Angular 学习笔记 6

例子4 多视图

 angular.module('myApp', ['ui.router'])
            .config(function ($stateProvider) {
                $stateProvider
                        .state('state', {
                            url: '/state',
                            views: {
                                'view1': {
                                    template: '<strong>{{text}}</strong>',
                                    controller: function ($scope) {
                                        $scope.text = "This is view1.";
                                    }
                                },
                                'view2': {
                                    template: '<strong>{{text}}</strong>',
                                    controller: function ($scope) {
                                        $scope.text = "This is view2.";
                                    }
                                }
                            }
                        })
            })
    ;

<div ng-app="myApp">
    <div ui-view="view1">This div will be replaced.</div>
    <div ui-view="view2">This div will be replaced too.</div>
</div>

例子5  $urlRouterProvider

 angular.module('myApp', ['ui.router'])
            .config(function ($urlRouterProvider, $stateProvider) {
                $urlRouterProvider.when('', '/state')   // 重定向
                        .otherwise('');                 // 当没有其他路由匹配时，重定向
                $stateProvider
                        .state('state', {
                            url: '/hello',
                            template: '<div>This is the template.</div>'
                        })
            })
    ;

<div ng-app="myApp">
    <div ui-view>This div will be replaced.</div>
</div>

例子6 继承状态以及嵌套视图

  angular.module('myApp', ['ui.router'])
            .config(function ($stateProvider) {
                $stateProvider
                        .state('father', {
                            abstract: true,
                            url: '/father',
                            template: '<div>father</div>' +
                            '<div ui-view></div>'
                        })
                        .state('father.child1', {
                            url: '/child1',
                            template: '<div>This is child1</div>'
                        })
                        .state('father.child2', {
                            url: '/child2',
                            template: '<div>This is child2</div>'
                        })
            })
    ;

<div ng-app="myApp">
    <div ui-view>This div will be replaced.</div>
</div>

这样一来，ui-router 就学的差不多了。