AngularJS路由之ui-router（一）

天马3798

于 2016-12-08 15:34:29 发布

阅读量4.2k

点赞数

分类专栏： AngularJs 文章标签： AngularJS uiRouter Angularjs路由

本文链接：https://blog.youkuaiyun.com/u011127019/article/details/53518586

版权

AngularJs 专栏收录该内容

55 篇文章

订阅专栏

在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.添加引用：

    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-ui-router.min.js"></script>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />

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

<div>
    <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
    <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
    <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
</div>
<div>
    <div ui-view="" />
</div>

4.Page1-3.html的内容

<h1 class="text-success">
    Page1 页面
</h1>

显示结果：

AngularJS路由之ui-router（二）

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