AngularJS 路由:ui-router
UI-Router是Angular-UI提供的客户端路由框架,它解决了原生的ng-route的很多不足:视图不能嵌套。这意味着$scope会发生不必要的重新载入。这也是我们在Onboard中引入ui-route的原因。同一URL下不支持多个视图。这一需求也是常见的:我们希望导航栏用一个视图(和相应的控制器)、内容部分用另一个视图(和相应的控制器)。UI-Router提出了$state的概念。一个$state是一个当前导航和UI的状态,每个$state需要绑定一个URL Pattern。 在控制器和模板中,通过改变$state来进行URL的跳转和路由。这是一个简单的例子:
<!-- in index.html --> <body ng-controller="MainCtrl"> <section ui-view></section> </body> // in app-states.js $stateProvider .state('contacts', { url: '/contacts', template: 'contacts.html', controller: 'ContactCtrl' }) .state('contacts.detail', { url: "/contacts/:contactId", templateUrl: 'contacts.detail.html', controller: function ($stateParams) { // If we got here from a url of /contacts/42 $stateParams.contactId === "42"; } });
当访问/contacts时,contacts $state被激活,载入对应的控制器和视图。在ui-router时,通常使用$state来完成页面跳转, 而不是直接操作URL。例如,在脚本使用$state.go:
$state.go('contacts'); // 指定state名,相当于跳转到 /contacts $state.go('contacts.detail', {contactId: 42}); // 相当于跳转到 /contacts/42
在模板中使用ui-sref(这是一个Directive):
<a ui-sref="contacts">Contacts</a> <a ui-sref="contacts.detail({contactId: 42})">Contact 42</a>
嵌套视图 不同于Angular原生的ng-route,ui-router的视图可以嵌套,视图嵌套通常对应着$state的嵌套。 contacts.detail是contacts的子$state,contacts.detail.html也将作为contacts.html的子页面:
<!-- contacts.html --> <h1>My Contacts</h1> <div ui-view></div> <!-- contacts.detail.html --> <span ng-bind='contactId'></span>
上述ui-view的用法和ng-view看起来很相似,但不同的是ui-view可以配合$state进行任意层级的嵌套, 即contacts.detail.html中仍然可以包含一个ui-view,它的$state可能是contacts.detail.hobbies。
命名视图在ui-router中,一个$state下可以有多个视图,它们有各自的模板和控制器。这一点也是ng-route所没有的, 给了前端路由极大的灵活性。来看例子:
<!-- index.html --> <body> <div ui-view="filters"></div> <div ui-view="tabledata"></div> <div ui-view="graph"></div> </body>
这一个模板包含了三个命名的ui-view,可以给它们分别设置模板和控制器:
$stateProvider .state('report',{ views: { 'filters': { templateUrl: 'report-filters.html', controller: function($scope){ ... controller stuff just for filters view ... } }, 'tabledata': { templateUrl: 'report-table.html', controller: function($scope){ ... controller stuff just for tabledata view ... } }, 'graph': { templateUrl: 'report-graph.html', controller: function($scope){ ... controller stuff just for graph view ... } } } })
AngularJS 路由:ui-router的更多相关文章
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- angularjs的路由ui.router
<!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
- Angularjs - 路由 angular-ui-router
注意,使用的路由不是官方的,而是第三方的.因为这个更加强大支持嵌套而且大家都是这样用的 http://www.tuicool.com/articles/zeiy6ff http://www.open- ...
- AngularJS 路由 resolve属性
当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现 ...
- AngularJS 路由及SPA理解
一.路由及SPA理解 路由允许我们通过不同的 URL 访问不同的内容,可实现多视图的单页web应用(SPA);通常我们的URL形式为 http://runoob.com/first/page,但在单页 ...
随机推荐
- ARM学习笔记10——GNU ARM命令行工具
一.编译器arm-linux-gcc 1.用arm-linux-gcc编译一个程序,一般它是要经过如下步骤的: 1.1.预处理阶段 编译器把上述代码中stdio.h编译进来,使用GCC的选项-E可以使 ...
- JavaScript---网络编程(1)-介绍、变量、运算符与语句
JavaScript也是一种编程语言.并不是Java的分支哦. 可以直接在浏览器中运行的编程语言. JavaScript 的历史故事: 1.JavaScript语言与名称的由来(Netscape,Su ...
- Jquery扩展- 倒计时
Source Code (function($) { $.fn.countdown = function(options) { // default options var defaults = { ...
- Codevs 3286 火柴排队 2013年NOIP全国联赛提高组 树状数组,逆序对
题目:http://codevs.cn/problem/3286/ 3286 火柴排队 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : ...
- Bzoj 3173: [Tjoi2013]最长上升子序列 平衡树,Treap,二分,树的序遍历
3173: [Tjoi2013]最长上升子序列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1183 Solved: 610[Submit][St ...
- EJB 总结学习(1)
总结1: 以下面这行代码为例: PersonDaoBeanRemote pdb = (PersonDaoBeanRemote)ctx.lookup("PersonDaoBean/remote ...
- []cp,转载]提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码!很牛!
1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击src,新建一个类,命名为MyEclipseGen,把.java里本来有的代码全部删掉,再把下面的代码 ...
- 基于iOS,Android的服务器证书失效检测
1.前言 在目前的iOS,Android手机上,当手机应用进行SSL通信时,手机端默认是不会进行服务器证书是否失效的监测. 在iOS上,系统是会定期获取所访问服务器的证书信息然后出存在本地. 在And ...
- GridControl 无数据时显示信息
图例: 主要代码如下: 说明:给GridView添加事件gv_CustomDrawEmptyForeground private void gv_CustomDrawEmptyForeground(o ...
- Oracle11g新特性导致空表不能导出问题
ORACLE 11G在用EXP导出时,发现空表(没有数据或者没有用过的表)不能导出了. 查了一下资料,说是Oracle 11G中有个新特性,当表无数据时,不分配segment,以节省空 ...