As the user navigates between the sections(Dashboard and Project Details, etc) which all use the main template, the entire template is reloaded. I would like to see only the nested "main" and "appbar" views change.
In this Example App, the links in 'mainTemplate' should not reload. The css class 'view-fade-in' is not working in the embedded snippet, but it is on the jsfiddle link. Notice how everything fades when you go from Dashboard to Project and vice versa. The only thing that should fade are the app bar and main content.
In other words, I do expect the mainTemplate to be reloaded when a user goes from state 'announcement' to state 'dashboard', but when a user goes from state 'dashboard' to state 'project.details' since both states are using mainTemplate it should not reload.
You can fiddle here: http://jsfiddle.net/webmandman/3wb8a46o/3/
(function() {
'use strict';
var mainTemplate = '<div class="mainTemplate"><a ui-sref="dashboard">Dashboard</a> - <a ui-sref="project.details">Project Details</a> - <a ui-sref="announcement">Announcement</a><div class="view-fade-in" ui-view="appbar"></div><div class="view-fade-in" ui-view="main"></div></div>';
var fullscreenTemplate = '<div class="fullscreenTemplate"><div class="view-fade-in" ui-view="main"></div></div>';
angular
.module('ExampleApp', ['ui.router','ngAnimate'])
.controller('exampleAppMainController', function() {})
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider
.state("dashboard", {
url: '/',
views: {
'@': {
template: mainTemplate
},
'appbar@dashboard': {
template: 'Dashboard App Bar Content GOES HERE'
},
'main@dashboard': {
template: 'Dashboard Main Content GOES HERE'
}
}
})
.state("project", {
views: {
'@': {
template: mainTemplate
},
'appbar@project': {
template: 'Project App Bar'
}
},
abstract: true
})
.state("project.details", {
url: '/project/:projectid/:typeid/:directoryid',
views: {
'main@project': {
template: 'Project Details'
}
},
params: {
typeid: {
squash: true,
value: null
},
directoryid: {
squash: true,
value: null
}
}
})
.state("announcement", {
url: '/announcement',
views: {
'@': {
template: fullscreenTemplate
},
'main@announcement': {
template: 'Announcement To Be Made! <a ui-sref="dashboard">Back to Dashboard</a>'
}
}
});
$urlRouterProvider.otherwise('/');
}
]);
})();/*** NG-VIEW Animation ******************************/
.body {margin:25px;color:white;}
.body a {color:black;}
.mainTemplate {background-color:hotpink;}
.fullscreenTemplate {background-color:darkorange;}
.view-fade-in.ng-enter {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
position: relative;
opacity: 0;
}
.view-fade-in.ng-enter.ng-enter-active {
opacity: 1;
}
.view-fade-in.ng-leave.ng-leave-active {
opacity: 1;
}
.view-fade-in.ng-leave {
opacity: 0;
}<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="ExampleApp">
<head>
<title>Example App - Routing and Nested Views</title>
</head>
<body class="body" layout="column">
<div class="view-fade-in" layout="column" ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
</body>
</html>
What you looking for is "abstract" states.
https://github.com/angular-ui/ui-router/wiki/nested-states-&-nested-views#abstract-states
Here you have the updated jsfiddle: http://jsfiddle.net/3wb8a46o/4/
The main changes were in the state provider:
Basically a abstract root state was created with the main template which all the states extend