Angular-ui-router_基于AngularJS的可嵌套路由_前端开发者

前端开发者丨AngularJS

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

关于 ui-router 的安装，可以使用 npm 、 bower 、 jspm 、 component ，也可以直接下载源文件来引入。

那么，什么是嵌套路由呢？我们都知道，如果使用原生路由的话，angular的视图是通过 ng-view 这个指令进行加载的。

比如这样：

。

一般，我们都会把这个指令放在 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’); }]) /* 继续后面的各个视图的路由定义 */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /* 在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 。

比如

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’ }) }]); 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 /* 使用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 来实现的。

在主页面文件里：

1 2 & lt ; ! — index . html — & gt ; & lt ; div ui – view & gt ; & lt ; / div & gt ;那么，有了 index.html 之后，就需要把主要的页面加载到这里面，所以，添加一个 main.html 文件。

这是侧边栏的菜单条目

1 2 3 & 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: ” }) //通过”.”的方式声明子视图 //这样，就能实现嵌套路由了 .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 /* 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 : ” } ) //通过”.”的方式声明子视图 //这样，就能实现嵌套路由了 . 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 更深层次的用法，可以查看其官方文档。

开发资源官方网站：http://angular-ui.github.io/ui-router/

开源地址：https://github.com/angular-ui/ui-router