[AngularJS] ui-router: named views

The ui-router library for AngularJS provides the ability to name views within your application. This is useful for dividing up your application into sections, and changing the content of a section based on the current state.

We use named view to build a simple webpage with 'header','sidebar','content' and 'footer'.

/**
* Created by Answer1215 on 12/17/2014.
*/
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
views: {
'header': {
templateUrl: 'app/common/header.tpl.html'
},
'sidebar': {
templateUrl: 'app/common/sidebar.tpl.html'
},
'content': {
templateUrl: 'app/common/content.tpl.html'
},
'footer': {
templateUrl: 'app/common/footer.tpl.html'
}
}
});
$urlRouterProvider.otherwise('/');
});

<div class="container">

<!-- Header -->
<div ui-view="header" class="row"></div>

<div class="row">
<!-- Sidebar/Nav -->
<div ui-view="sidebar" class="col-xs-3"></div>
<!-- Content -->
<div ui-view="content" class="col-xs-9"></div>
</div>

<!-- Footer -->
<div ui-view="footer" class="row"></div>
</div>

Result:



Now when we click 'One', 'Two' and 'Three', we also want to replace the content accordingly.

alt-one.js:

/**
* Created by Answer1215 on 12/17/2014.
*/
angular.module('app.alt-one', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.alt-one', {
url: 'alt-one',
views: {
// '@': replace the content
// if there is just @ without other stuff, it will looking for the parent 'app' root
'content@': {
templateUrl: 'app/alt-one/alt-one.content.tpl.html'
}
}
})
})

alt-two.js: we replace the content and header both at the same time.

/**
* Created by Answer1215 on 12/17/2014.
*/
angular.module('app.alt-two', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.alt-two', {
url: 'alt-two',
views: {
'content@': {
templateUrl: 'app/alt-two/alt-two.content.tpl.html'
},
'header@': {
templateUrl: 'app/alt-two/alt-two.header.tpl.html'
}
}
})
})

alt-three.js:

/**
* Created by Answer1215 on 12/17/2014.
*/
angular.module('app.alt-three', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('app.alt-three', {
url: 'alt-three',
views: {
'content@': {
templateUrl: 'app/alt-three/alt-three.content.tpl.html'
},
'header@': {
templateUrl: 'app/alt-three/alt-three.header.tpl.html'
},
// find the 'alt-three' directory to replace the name view == "one"
'one@app.alt-three': {
template: '<div class="alert-info">Sub One</div>'
},
// find the 'alt-three' directory to replace the name view == "two"
'two@app.alt-three': {
template: '<div class="alert-success">Sub Two</div>'
}
}
}
)
})
;

Read More: https://egghead.io/lessons/angularjs-ui-router-named-views