本文共 2819 字，大约阅读时间需要 9 分钟。

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

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

Git源代码地址：

官网地址：

英文API地址：

在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 页面

显示结果：

更多：

路由配置参数等：