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

前端开发者丨AngularJS
https://www.rokub.com
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
前端开发者丨AngularJS
» 本文来自:前端开发者 » 《Angular-ui-router_基于AngularJS的可嵌套路由_前端开发者》
» 本文链接地址:https://www.rokub.com/2146.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!