1. UI-Router是Angular-UI提供的客户端路由框架，它解决了原生的ng-route的很多不足：视图不能嵌套。这意味着$scope会发生不必要的重新载入。这也是我们在Onboard中引入ui-route的原因。同一URL下不支持多个视图。这一需求也是常见的：我们希望导航栏用一个视图（和相应的控制器）、内容部分用另一个视图（和相应的控制器）。UI-Router提出了$state的概念。一个$state是一个当前导航和UI的状态，每个$state需要绑定一个URL Pattern。 在控制器和模板中，通过改变$state来进行URL的跳转和路由。这是一个简单的例子：
  1. <!-- in index.html -->
  2. <body ng-controller="MainCtrl">
  3.     <section ui-view></section>
  4. </body>
  5. // in app-states.js
  6. $stateProvider
  7.     .state('contacts', {
  8.         url: '/contacts',
  9.         template: 'contacts.html',
  10.         controller: 'ContactCtrl'
  11.     })
  12.     .state('contacts.detail', {
  13.         url: "/contacts/:contactId",
  14.         templateUrl: 'contacts.detail.html',
  15.         controller: function ($stateParams) {
  16.             // If we got here from a url of /contacts/42
  17.             $stateParams.contactId === "42";
  18.         }
  19.     });
  1. 当访问/contacts时，contacts $state被激活，载入对应的控制器和视图。在ui-router时，通常使用$state来完成页面跳转， 而不是直接操作URL。例如，在脚本使用$state.go：
  1. $state.go('contacts');  // 指定state名，相当于跳转到 /contacts
  2. $state.go('contacts.detail', {contactId: 42});  // 相当于跳转到 /contacts/42

　

  1. 在模板中使用ui-sref（这是一个Directive）：
  1. <a ui-sref="contacts">Contacts</a>
  2. <a ui-sref="contacts.detail({contactId: 42})">Contact 42</a>

　　

  1. 嵌套视图
  2.  
  3. 不同于Angular原生的ng-route，ui-router的视图可以嵌套，视图嵌套通常对应着$state的嵌套。 contacts.detail是contacts的子$state，contacts.detail.html也将作为contacts.html的子页面：
  1. <!-- contacts.html -->
  2. <h1>My Contacts</h1>
  3. <div ui-view></div>
  4.     <!-- contacts.detail.html -->
  5. <span ng-bind='contactId'></span>

上述ui-view的用法和ng-view看起来很相似，但不同的是ui-view可以配合$state进行任意层级的嵌套， 即contacts.detail.html中仍然可以包含一个ui-view，它的$state可能是contacts.detail.hobbies。

  1. 命名视图在ui-router中，一个$state下可以有多个视图，它们有各自的模板和控制器。这一点也是ng-route所没有的， 给了前端路由极大的灵活性。来看例子：
  1. <!-- index.html -->
  2. <body>
  3. <div ui-view="filters"></div>
  4.     <div ui-view="tabledata"></div>
  5.     <div ui-view="graph"></div>
  6.     </body>

　　

  1. 这一个模板包含了三个命名的ui-view，可以给它们分别设置模板和控制器：
  1. $stateProvider
  2.     .state('report',{
  3.         views: {
  4.             'filters': {
  5.                 templateUrl: 'report-filters.html',
  6.                 controller: function($scope){ ... controller stuff just for filters view ... }
  7.             },
  8.             'tabledata': {
  9.                 templateUrl: 'report-table.html',
  10.                 controller: function($scope){ ... controller stuff just for tabledata view ... }
  11.             },
  12.             'graph': {
  13.                 templateUrl: 'report-graph.html',
  14.                 controller: function($scope){ ... controller stuff just for graph view ... }
  15.             }
  16.         }
  17.     })

　　

AngularJS 路由：ui-router的更多相关文章

  1. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  2. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  3. angularjs的路由ui.router

      <!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...

  4. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  5. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  6. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  7. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  8. Angularjs - 路由 angular-ui-router

    注意,使用的路由不是官方的,而是第三方的.因为这个更加强大支持嵌套而且大家都是这样用的 http://www.tuicool.com/articles/zeiy6ff http://www.open- ...

  9. AngularJS 路由 resolve属性

    当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现 ...

  10. AngularJS 路由及SPA理解

    一.路由及SPA理解 路由允许我们通过不同的 URL 访问不同的内容,可实现多视图的单页web应用(SPA);通常我们的URL形式为 http://runoob.com/first/page,但在单页 ...

随机推荐

  1. HDOJ/HDU 1982 Kaitou Kid - The Phantom Thief (1)(字符串处理)

    Problem Description Do you know Kaitou Kid? In the legend, Kaitou Kid is a master of disguise, and c ...

  2. JavaScript---网络编程(2)-函数与数组

    上节,学完循环了~ 现在学Javascript的函数和数组. JavaScript语法 每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易.JS中也一样有变量,语句,函数,数组 ...

  3. 如何在 CentOS 7 上安装 Redis 服务器

    大家好,本文的主题是 Redis,我们将要在 CentOS 7 上安装它.编译源代码,安装二进制文件,创建.安装文件.在安装了它的组件之后,我们还会配置 redis ,就像配置操作系统参数一样,目标就 ...

  4. 黑马程序员_<<GUI(图形用户界面)--------1>>

    --------------------ASP.Net+Android+IOS开发..Net培训.期待与您交流! -------------------- 1.  GUI图形用户界面 1.简述 Gra ...

  5. php-mysql结果集函数比较

    本节主要介绍了获取查询结果集的4个函数,此处对它们进行综合比较.     ● mysql_result():优点在于使用方便:而缺点在于功能少,一次调用只能获取结果数据集中的一行记录,对较大型的数据库 ...

  6. Genymotion常见问题汇总（转）

    为什么说是常见问题整合呢,因为我就是Genymotion最悲剧的使用者,该见过的问题,我基本都见过了,在此总结出这血的教训,望大家不要重蹈覆辙.     常见问题1:Genymotion在开启模拟器时 ...

  7. 改变JVM中的参数以提高Eclipse的运行速度

    首先建立评估体系,将workspace里所有的项目close掉,关闭eclipse.优化的用例就是启动eclipse,open一个项目,eclipse会自动build这个项目,保证没有感觉到明显的卡, ...

  8. android 77 fragment

    fragment是3.0之后才有的,之前平板是3.0专用,后来手机和平板都用3.0 Activity: package com.itheima.fragment; import android.os. ...

  9. mybatis15 mapper方式 代码

    UserMapper.java package cn.itcast.mybatis.mapper; import java.util.List; import cn.itcast.mybatis.po ...

  10. xshell十大技巧

    xshell是我用过的最好用的ssh客户端工具,没有之一.这个软件完全免费,简单易用,可以满足通过ssh管理linux vps所有需要,唯一遗憾的是没有官方中文版. 警告:不要下载所谓的汉化版,可能有 ...