Angular-ui-route_angular uiroute

ng-route

ng-route是官方的原来就实现的路由器

范例如下:

angular.module('myApp', [])
    .config('myAppCtrl', ['$routeProvider', function ( $routeProvider ) {

        $routeProvider
            .when('/', {
                templateUrl: 'views/page-a.html',
                controller: 'pageACtrl'
            })
            .when('/next', {
                templateUrl: 'views/page-b.html',
                controller: 'pageBCtrl'
            })

                 /* 对其他不合法的路由进行处理 */
        $routeProvider.otherwise('/404');
    }])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

貌似已经足够我们使用了,但是问题是我们会遇到以下的情况

如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？
而且人肉眼会明显的感觉到不平滑感

所以我们需要使用ui-route

ui-route

ui-route是一种嵌套路由,简单的说,就是一个被路由出来的页面,再可以一个路由

• 第一层路由

/* 使用ui-router来进行路由定义，需要注入ui.router模块 */
var myApp = angular.module('myApp', ['ui.router']);

/* 注入$stateProvider，$urlRouterProvider */
myApp.config(['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {

    /* 使用when来对一些不合法的路由进行重定向 */
    $urlRouterProvider.when('', '/main');

    /* 通过$stateProvider的state()函数来进行路由定义 */
    $stateProvider.state('main', {
        url: '/main',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    }).state('detail', {
        url: '/main/detail/store',
        templateUrl: 'views/detail.html',
        controller: 'DetailCtrl'
    })

    $stateProvider.state('404', {
        url: '/404',
        templateUrl: '404.html'
    })
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在此处好像没有看出跟ng-route的区别,那请看第二层的路由,就明白了

• 第二层路由

<!-- main.html -->;
<div>这是侧边栏的菜单条目</div>
<div ui-view></div>

/* router.js */
var myApp = angular.module('myApp', ['ui.router']);

myApp
    .config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider){

            $stateProvider
                    //为主菜单声明abstract属性和template属性
                    //那么视图就会自动加载到ui-view里
                    .state('main', {
                        abstract: true,
                        url: '/main',
                        template: '<ui-view />'
                    })

                    //通过"."的方式声明子视图
                    //这样，就能实现嵌套路由了
                    .state('main.page_a', {
                        url: '/page_a',
                        templateUrl: 'views/template-a.html',
                        controller: 'pageACtrl'
                    })
                    .state('main.page_b', {
                        url: '/page_b',
                        templateUrl: 'views/template-b.html',
                        controller: 'pageBCtrl'
                    })
        }]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

ui-view替代ng-view
abstract来说明是上一级路由的名字

如果需要了解ui-router更深层次的用法，可以查看其官方文档