Angular-ui-router:基于AngularJS的可嵌套路由

ui-router是一个可以用来替换AngularJS原生路由的插件,它最大的特点就是支持嵌套路由。

如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的。比如这样:<div ng-view></div>。一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图。比如这样:

/* 在router.js文件里,使用AngularJS原生的路由 */
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');
    }])
 
/* 继续后面的各个视图的路由定义 */

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便,没有什么太大的问题。但是细想一下,如果说我们有一个网页,左边是菜单栏,右边是各个菜单所对应的视图。那么,如果按照这样的定义,点击每个菜单项,岂不得刷新整个网页?而我们想要的只是右边的视图刷新。所以,这就要用到嵌套路由了。

关于嵌套路由

所谓嵌套路由,就是视图里面还可以再嵌套视图,路由里还可以再嵌套路由。并且,通过ui-router,可以实现不同视图之间的参数传递。

关于ui-router的简单使用

ui-router定义路由的时候,与ngRouter不一样,它是使用.来进行定义的,并且在html标签里,不使用ng-view,而是使用ui-view。比如<div ui-view></div>

ui-router提供了$stateProvider$urlRouterProvider来进行路由定义。具体使用如下:

/* 使用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'
    })
}]);

以上是关于ui-router的简单用法。当然,这还看不出来和Angular的原生路由的区别。因为这都是只涉及了一层路由。

关于ui-router的嵌套路由的使用

关于嵌套路由的使用,可以用这样一个例子来说明。以AngularJS的API Guide为例。

这是一个典型的左右结构。左边为菜单条目,右边为视图。并且,菜单条目里,有主条目,主条目下面有子条目。

点击就会现,刷新的只是右边的视图,左边并没有刷新。说明左边和右边是分开的视图。那么,这个就是用的ui-router来实现的。

在主页面文件里:

2
&lt;!-- index.html --&gt;
&lt;div ui-view&gt;&lt;/div&gt;

那么,有了index.html之后,就需要把主要的页面加载到这里面,所以,添加一个main.html文件。

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

OK,现在在main.html里也定义了一个ui-view,这个ui-view就是用来加载视图的。

router.js里,就可以这样写。

/* 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: '&lt;ui-view /&gt;'
                    })
 
                    //通过"."的方式声明子视图
                    //这样,就能实现嵌套路由了
                    .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'
                    })
        }]);

通过这样一层一层的不断定义,就可以简单实现嵌套路由了。

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

未经允许不得转载:蒋丽君的小站 » Angular-ui-router:基于AngularJS的可嵌套路由

赞 (1)