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',})

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

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

路由控制
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" />

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'
    });
});

<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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!