[AngularJS] ui-router: named views-白红宇

[AngularJS] ui-router: named views

阅读量：6830 次

发布时间：2019-06-26

本文共 3726 字，大约阅读时间需要 12 分钟。

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('/');    });

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: '
     
      Sub One
     
'                    },                    // find the 'alt-three' directory to replace the name view == "two"                    'two@app.alt-three': {                        template: '
     
      Sub Two
     
'                    }                }            }        )    });