Angular路由:ui-router
来源:互联网 发布:json文件格式转换工具 编辑:程序博客网 时间:2024/05/22 21:27
ui-router是AngularJs的一个客户端路由框架。AngularJs ngRoute模块中的路由是通过URL路由来管理视图的,ui-router则是通过状态(state)来管理视图,并且可以绑定路由和其它的行为。状态被绑定到命名、嵌套和并行视图,大大增强了视图管理的能力。
传统的路由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对状态和路由进行配置。将状态,路由,视图和控制器很好的对应了起来。
$stateProvdier和$urlRouterProvider是ui-router模块的两个服务,专门进行状态和路由配置。$stateProvider.state()方法进行状态配置,第一个参数是状态的名字,第二个参数是配置对象,重要的属性有url:路由名称,由自己命名,templateUrl:视图路径,controller:对应的控制器名称。具体请参考:$stateProvider详解。$rulRouterProvider类似于ngRoute的$routeProvider对//app.jsangular.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");}])
$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
0 0
- Angular路由:ui-router
- angular路由 ui.router
- angular-ui-router页面路由
- AngularJS Router原生路由和Angular UI Router嵌套路由
- Angular(三)路由ui-router
- angular ui.router 路由传参数
- angular 路由,ui-router,ocLazyLoad的使用
- Angular中嵌套路由ui-router
- Angular的第三方路由:ui-router
- angular中的路由 ng-router vs ui.router
- angular中的路由 ng-router vs ui.router
- Angular JS路由插件ui.router源码解析
- angular router ui 路由模块(父子)层级说明
- Angular JS路由插件ui.router源码解析
- angular 系列七 ui-router路由控制器介绍
- Angular路由 ng-route和ui-router的区别
- Angular学习-ng-route与ui-router路由的区别
- 4、Angular-Ui Router URL路由(完结篇)
- 机械振动 趋势项产生原因
- Error:Execution failed for task ':app:mergeDebugResources'. > Some file crunching failed, see logs f
- Mongodb 设置过期时间Expire Date
- mac下,redis的安装与配置
- Mysql 入门第二课
- Angular路由:ui-router
- db2 常用命令小结
- 【bzoj1500】[NOI2005]维修数列
- 汇编程序与编译程序区别 assembler compiler
- ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
- JQuery上传插件Uploadify使用详解
- iOS 点击按钮实现拨打电话,发送短信功能
- mysql 主主互备
- 模板方法模式