Angular路由:ui-router
2016-08-12 09:27
579 查看
ui-router是AngularJs的一个客户端路由框架。AngularJs ngRoute模块中的路由是通过URL路由来管理视图的,ui-router则是通过状态(state)来管理视图,并且可以绑定路由和其它的行为。状态被绑定到命名、嵌套和并行视图,大大增强了视图管理的能力。
传统的路由ngRoute有以下缺点:
视图不能嵌套。
单个页面下不支持多个视图。
无法通过url进入到指定页面,必须通过路由进入。
然后为状态"state1","state2"分别添加关联的视图page1.html和page2.html,并在视图中再一次使用了ui-view和ui-sref指令嵌套状态和视图。其实这个和在index.html添加ui-view是一样的操作,但我们成功的进行了状态和视图的嵌套。
$stateProvdier和$urlRouterProvider是ui-router模块的两个服务,专门进行状态和路由配置。$stateProvider.state()方法进行状态配置,第一个参数是状态的名字,第二个参数是配置对象,重要的属性有url:路由名称,由自己命名,templateUrl:视图路径,controller:对应的控制器名称。具体请参考:$stateProvider详解。$rulRouterProvider类似于ngRoute的$routeProvider对
这样一个完整的嵌套视图路由就完成了。效果如下图所示:
完整的demo在:http://download.csdn.net/detail/gameloft9/9471247
参考文章:AngulerJS路由:ng-router与ui-router
传统的路由ngRoute有以下缺点:
视图不能嵌套。
单个页面下不支持多个视图。
无法通过url进入到指定页面,必须通过路由进入。
安装ui-router
ui-router同ngRoute一样也是一个单独的模块,需要下载安装。可以去GitHub上下载:https://github.com/angular-ui/ui-router/tree/legacy。我是下载的release版本,直接将其保存至angular-ui-router.js文件中。然后在index.html页面中进行引用,记住要放在angular.js后面。<script src="js/angular.js"></script> <script src="js/angular-ui-router.js"></script>
添加模块依赖
在使用ui-router的模块中添加ui-router依赖,这样才能使用。angular.module("app", [ "ui.router"//添加ui-router模块依赖 ]).config(["$stateProvider","$urlRouteProvider", function($stateProvider,$urlRouteProvider) { //在这里配置状态 }])
页面布局
1、嵌套的状态和视图
ui-router主要的用途就是用在嵌套的状态和视图中。首先需要在index.html页面中的body使用ui-view指令,它同ng-view类似都是为视图进行占位。关于ui-view指令具体请查看:ui-view指令详解,ui-sref是<a>标签专用的状态的连接指令,将a标签连接到某个状态。这样点击<a>标签的时候,就会自动跳转到相应的状态。关于ui-sref指令具体请查看:ui-sref指令详解。<body ng-app="app"> <div ui-view></div> <!-- 在这里添加导航 --> <a ui-sref="state1">State 1</a> <a ui-sref="state2">State 2</a> </body>
然后为状态"state1","state2"分别添加关联的视图page1.html和page2.html,并在视图中再一次使用了ui-view和ui-sref指令嵌套状态和视图。其实这个和在index.html添加ui-view是一样的操作,但我们成功的进行了状态和视图的嵌套。
//page1.html <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
//page2.html <h1>State 2</h1> <hr/> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
//page1Child.html <h3>List of State 1 Items</h3> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul>
//page2Child.html<h3>List of State 2 Things</h3><ul> <li ng-repeat="thing in things">{{ thing }}</li></ul>
状态配置
创建app.js文件,加入下面的代码,并在index.html中进行引用。在应用模块中我们通过$stateProvider和$urlRouterProvider对状态和路由进行配置。将状态,路由,视图和控制器很好的对应了起来。//app.js angular.module("app", [ "ui.router",//添加ui-router模块依赖 "controllers"//控制器模块 ]).config(["$stateProvider","$urlRouterProvider", function($stateProvider,$urlRouterProvider) { //在这里配置状态 $stateProvider .state('state1', { url: "/state1", templateUrl: "views/page1.html" }) .state('state1.list', { url: "/list", templateUrl: "views/page1Child.html", controller: "page1ChildController" }) .state('state2', { url: "/state2", templateUrl: "views/page2.html" }) .state('state2.list', { url: "/list", templateUrl: "views/page2Child.html", controller: "page2ChildController" }); // 将未匹配的url重定向到state1状态中。 $urlRouterProvider.otherwise("/state1"); }])
$stateProvdier和$urlRouterProvider是ui-router模块的两个服务,专门进行状态和路由配置。$stateProvider.state()方法进行状态配置,第一个参数是状态的名字,第二个参数是配置对象,重要的属性有url:路由名称,由自己命名,templateUrl:视图路径,controller:对应的控制器名称。具体请参考:$stateProvider详解。$rulRouterProvider类似于ngRoute的$routeProvider对
$location.url()进行监视,发现变化后就匹配路由。具体请参考:$urlRouterProvider详解。
添加控制器
为了便于扩展,我们将控制器放入单独的模块中。创建controllers.js文件,加入下面的代码。然后在app.js中引用控制器模块。angular.module("controllers", []) .controller("Page1Controller", ["$scope",function($scope) { }]) .controller("Page2Controller", ["$scope", function($scope) { }]) .controller("page1ChildController", ["$scope", function($scope) { $scope.listItems = ["Tom", "Jack", "GAMELoft9"]; }]) .controller("page2ChildController", ["$scope", function($scope) { $scope.ListThings = ["robot", "cat", "icecream"]; }]);
这样一个完整的嵌套视图路由就完成了。效果如下图所示:
完整的demo在:http://download.csdn.net/detail/gameloft9/9471247
2、多视图和命名视图
多视图和命名视图下面这篇文章已经讲的很好了,这里给出链接:http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/。参考文章:AngulerJS路由:ng-router与ui-router
相关文章推荐
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
- 详解AngularJs ui-router 路由的简单介绍
- [转]AngularJS ui-router (嵌套路由)
- Angular路由 ng-route和ui-router的区别
- angular路由 ui.router
- angularjs ui-router中路由的二级嵌套
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
- Angular的第三方路由:ui-router
- Angular-ui-router路由,View管理
- angularjs ui-router路由移除#解决方案
- AngularJs ui-router 路由的简单介绍
- angularjs ui-router 路由简介
- 深入理解ANGULARUI路由_UI-ROUTER
- AngularJs ui-router 路由的简单介绍
- UI-Router:为什么开发者都不喜欢Angular.js内置的路由
- angular ui.router 路由传参数
- angularjs+bootstrap+SpringMVC+Spring+mybatis+maven--ui.router路由一
- AngularJS ui-router (嵌套路由)
- UI-Router:为什么开发者都不喜欢Angular.js内置的路由
- AngularJS ui-router (嵌套路由)