AngularJS路由之ui-router（一）

在angular1有内置的路由服务，使用$route可以帮助实现路由的切换，视图的改变，但是$route只是包含了基本的功能，在很多场合不够用。

uiRouter是第三方js库。需要引入“angular-ui-router.min.js”文件。

Git源代码地址：https://github.com/angular-ui/ui-router

官网地址：https://ui-router.github.io/

英文API地址：https://ui-router.github.io/docs/latest/modules/ng1.html

在Asp.Net中引入uiRouter简单方法是使用Nuget：

服务与指令：

    ui.router 路由模块名
    $urlRouterProvider 服务提供者，用来配置路由重定向
    $stateProvider 服务提供者，用来配置路由
    $urlRouter 服务
    $state 服务，用来显示当前路由状态信息，以及一些路由方法（如：跳转）
    $stateParams 服务，用来存储路由匹配时的参数
    ui-view 指令，路由模板渲染，对应的 dom 相关联
    ui-sref 指令，链接到特定状态

路由的创建：

基本配置
    调用 $stateProvider.state(...) 方法，并可配置以下参数

    $stateProvider
    .state("Main", {
    url: "/main",
    templateUrl: 'main.html',
    controller: 'MainCtrl',
    })

    parent-指定父子关系

    有两种方式可以指定父子状态关系。
    一种是，使用点标记法，像本文最后嵌套视图部分举得栗子那样：
    .state("tabs.tab1", {})
    另一种是，使用 parent 属性
    .state("tab1", {
    parent: 'tabs'  // 也可是一个状态对象， parent: tabs
    })
    abstract

    使用 abstract 可以为所有的子状态提供一个基 URL，这样做的好处就是可以在抽象出来的这个状态所对应的 html 页面中来定义静态资源。抽象模板不能被激活。

    $stateProvider
    .state('contacts', {
    abstract: true,
    url: '/contacts',
    templateUrl: 'contacts.html',
    })
    .state('contacts.list', {
    url: '/list',
    templateUrl: 'contacts.list.html'
    })

    resolve
    resolve 在 state 配置参数中，是一个对象(key-value)，每一个 value 都是一个可以依赖注入的函数，并且返回的是一个 promise (当然也可以是值)。

    resolve: {
    'myResolve': ['contacts',
    function(contacts){
    return contacts.all();
    }]
    }

    这样做的目的：
    简化了 controller 的操作，将数据的获取放在 resolve 中进行，这在多个视图多个controller 需要相同数据时，有一定的作用。
    只有当 reslove 中的 promise 全部 resolved(即数据获取成功)后，才会触发$stateChangeSuccess 切换路由，进而实例化 controller，然后更新模板。

路由控制
url 动态部分被称为参数，有以下几种方式设置

1） 使用花括号的方式可以设置一个正则表达式规则的参数：
//只会匹配 pageId 为1到8位的数字
url: "/pages/{pageId:[0-9]{1,8}}"
可以通过 ? 来指定参数作为查询参数
//比如匹配 href="/page?type='new'"
url: "/page?type"
如果需要不止一个查询参数，用 & 分隔：
//比如匹配 ui-sref="page({type:'all', title:'test ui-router'})"
url: "/page?type&title"

路由的查找匹配

angular 在刚开始的 $digest 时，$rootScope 会触发 $locationChangeSuccess 事件（angular 在每次浏览器 hash change 的时候也会触发 $locationChangeSuccess 事件）
ui.router 监听了 $locationChangeSuccess 事件，于是开始通过遍历一系列 rules，进行路由查找匹配列表项
当匹配到路由后，就通过 $state.transitionTo(state,...)，跳转激活对应的 state
最后，完成数据请求和模板的渲染
在视图中，建议使用 ui-sref="xxxState" 而不是 href="#/abc"，这样做能减少一遍 rules循环的遍历，提升性能。

实例一、嵌套路由使用实例

1.添加引用：

2.app.js

var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider
        .when("", "/PageTab")
        .when("/", "/PageTab");
    $stateProvider.state("PageTab", {
        url: '/PageTab',
        templateUrl: '/template/PageTab.html'
    }).state('PageTab.Page1', {
        url: '/Page1',
        templateUrl: '../template/page1.html'
    }).state('PageTab.Page2', {
        url: '/Page2',
        templateUrl: '../template/page2.html'
    }).state('PageTab.Page3', {
        url: '/Page3',
        templateUrl: '../template/page3.html'
    });
});

3.PageTab.thml

    Page-1
    Page-2
    Page-3


    

4.Page1-3.html的内容

    Page1 页面

显示结果：

更多：

AngularJS路由之ui-router（二）

路由配置参数等：http://bubkoo.com/2014/01/02/angular/ui-router/guide/url-routing/