1. 路由规则

rap框架页面路由基于ui-router实现

1.1 ui-router

一个基本的路由状态如下所示:

路由配置:

$stateProvider

.state('po',{

url:'/po',

abstract:false,

templateUrl:'./pages/master.html',

resolve:{

deps:"i am a test"

},

controller:'po_controller'

})

前台界面:

<div ui-view></div>

当我们访问index.html/#/po时, ‘po’状态将被激活,同时<div ui-view></div>中的ui-view将被'./pages/master.html'填充。

1.1.1 路由说明

路由定义基本参数说明如图1‑1所示:

图1‑1 参数说明

1.1.2 嵌套结构

默认的嵌套规则是根据 分隔符 '.' 实现的,

$stateProvider

.state('po',{

url:'/po',

...

})

.state('po.input',{

url:'/input',

...

})

.state('po.input.mkt',{

url:"/mkt",

...

})

以上路由配置表示:

l 'contacts'状态将匹配"/contacts"

l 'contacts.list'状态将匹配"/contacts/list"。子状态的url是附在父状态的url之后的。

1.1.3 参数使用

1.2 URL参数

1.2.1 基本参数

通常,url动态部分被称为参数,有几个选项用于指定参数。基本参数如下:

1
2
3
4
5
6
7
8
9
10
$stateProvider
    .state('contacts.detail', {
        // 这里设置了url参数
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
        }
    })

或者,你也可以使用花括号的方式来指定参数:

1
2
// 与前面的设置方法等效
url: "/contacts/{contactId}"

示例:

  • '/hello/' - 只匹配'/hello/'路径,没有对斜杠进行特殊处理,这种模式将匹配整个路径,而不仅仅是一个前缀。
  • '/user/:id' - 匹配'/user/bob''/user/1234!!!',甚至还匹配 '/user/',但是不匹配'/user''/user/bob/details'。第二个路径段将被捕获作为参数"id"
  • '/user/{id}' - 与前面的示例相同,但使用花括号语法。

1.2.2 含正则表达式的参数

使用花括号的方式可以设置一个正则表达式规则的参数:

1
2
// 只会匹配 contactId 为1到8位的数字
url: "/contacts/{contactId:[0-9]{1,8}}"

示例:

  • '/user/{id:[^/]*}' - 与'/user/{id}'相同
  • '/user/{id:[0-9a-fA-F]{1,8}}' - 与前面的示例相似,但只匹配1到8为的数字和字符
  • '/files/{path:.*}' - 匹配任何以'/files/'开始的URL路径,并且捕获剩余路径到参数'path'中。
  • '/files/*path' - 与前面相同,捕获所有特殊的语法。

警告:不要把捕获圆括号写进正则表达式,ui-router 的 UrlMatcher 将为整个正则表达式添加捕获。

1.2.3 Query Parameters

可以通过?来指定参数作为查询参数

1
2
url: "/contacts?myParam"
// 匹配 "/contacts?myParam=value"

如果你需要不止一个查询参数,请用&分隔:

1
2
url: "/contacts?myParam1&myParam2"
// 匹配 "/contacts?myParam1=value1&myParam2=wowcool"

1.3 嵌套状态的路由控制

1.3.1 附加的方式(默认)

在嵌套状态的路由控制中,默认方式是子状态的 url 附加到父状态的 url 之后。

1
2
3
4
5
6
7
8
9
$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '/list',
     ...
  });

路由将成为:

  • 'contacts'状态将匹配"/contacts"
  • 'contacts.list'状态将匹配"/contacts/list"。子状态的url是附在父状态的url之后的。

1.3.2 绝对路由(^)

如果你使用绝对 url 匹配的方式,那么你需要给你的url字符串加上特殊符号"^"

1
2
3
4
5
6
7
8
9
$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

路由将成为:

  • 'contacts'状态将匹配"/contacts"
  • 'contacts.list'状态将匹配"/list"。子状态的url没有附在父状态的url之后的,因为使用了^

1.4 $stateParams 服务

之前看到的$stateParams服务是一个对象,包含 url 中每个参数的键/值。$stateParams可以为控制器或者服务提供 url 的各个部分。
注意:$stateParams服务必须与一个控制器相关,并且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 如果状态中 url 属性是:
url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to' // 当浏览
'/users/123/details//0' // $stateParams 对象将是
{ id:'123', type:'', repeat:'0' } // 当浏览
'/users/123/details/default/0?from=there&to=here' // $stateParams 对象将是
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

1.4.1 使用$stateParams的两个陷阱

  • 只有当状态被激活并且状态的所有依赖项都被注入时,$stateParams对象才存在。这代表你不能再状态的resolve函数中使用$stateParams对象,可以使用$state.current.params来代替。
  • 在状态控制器中,$stateParams对象只包含那些在状态中定义的参数,因此你不能访问在其他状态或者祖先状态中定义的参数。
1
2
3
4
5
6
7
8
9
10
$stateProvider.state('contacts.detail', {  
   resolve: {
      someResolve: function($state){
         //*** 不能在这里使用 $stateParams , the service is not ready ***//
         //*** 使用 $state.current.params 来代替 ***//
         return $state.current.params.contactId + "!"
      };
   },
   // ...
})
1
2
3
4
5
6
7
8
9
10
11
12
$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',  
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId',
   controller: function($stateParams){
      $stateParams.contactId //*** 注意! DOESN'T EXIST!! ***//
      $stateParams.itemId //*** Exists! ***// 
   }
})

1.5 $urlRouterProvider

$urlRouterProvider负责处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。$urlRouterProvider负责监视$location,当$location改变后,$urlRouterProvider将从一个列表,一个接一个查找匹配项,直到找到。所有 url 都编译成一个UrlMatcher对象。

$urlRouterProvider有一些实用的方法,可以在module.config中直接使用。

when() for redirection 重定向

参数:

  • what String | RegExp | UrlMatcher,你想重定向的传入路径
  • handler String | Function 将要重定向到的路径

handler 作为 String
如果handler是字符串,它被视为一个重定向,并且根据匹配语法决定重定向的地址。

1
2
3
4
5
6
7
app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index  
    $urlRouterProvider.when('', '/index');     // You can also use regex for the match parameter
    $urlRouterProvider.when('/aspx/i', '/index');
})

handler 作为 Function
如果handler是一个函数,这个函数是注入一些服务的。如果$location匹配成功,函数将被调用。你可以选择性注入$match

函数可以返回:

  • falsy 表明规则不匹配,$urlRouter将试图寻找另一个匹配
  • String 该字符串作为重定向地址并且作为参数传递给$location.url()
  • nothing或者任何为真的值,告诉$urlRouterurl 已经被处理

示例:

1
2
3
4
5
$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) {
    if ($state.$current.navigable != state || !equalForKeys($match, $stateParams)) {
        $state.transitionTo(state, $match, false);
    }
}]);

otherwise() 无效路由

参数:

  • path String | Function 你想重定向url路径或者一个函数返回url路径。函数可以包含$injector$location两个参数。
1
2
3
4
5
6
7
8
9
10
app.config(function($urlRouterProvider){
    // 在配置(状态配置和when()方法)中没有找到url的任何匹配
    // otherwise will take care of routing the user to the specified url
    $urlRouterProvider.otherwise('/index');     // Example of using function rule as param
    $urlRouterProvider.otherwise(function($injector, $location){
        ... some advanced code...
    });
})

rule() 自定义url处理

参数:

  • handler Function 一个函数,包含$injector$location两个服务作为参数,函数负责返回一个有效的路径的字符串。
1
2
3
4
5
6
7
app.config(function($urlRouterProvider){
    // Here's an example of how you might allow case insensitive urls
    $urlRouterProvider.rule(function ($injector, $location) {
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) return normalized;
    });
})

1.6 $urlMatcherFactory 和 UrlMatchers

定义了url模式和参数占位符的语法。$urlMatcherFactory是在幕后被$urlRouterProvider调用,来缓存编译后的UrlMatcher对象,而不必在每次 location 改变后重新解析url。大多数用户不需要直接使用$urlMatcherFactory方法,但是在状态配置中非常实用,可以使用$urlMatcherFactory方法来生成一个UrlMatcher对象,并在状态配置中使用该对象。

1
2
3
4
var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1");
$stateProvider.state('myState', {
    url: urlMatcher
});

ui router 介绍的更多相关文章

  1. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  2. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  3. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  4. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  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 实现表单向导

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

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

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

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

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

随机推荐

  1. SQL Server2008窗口计算

    (一) 窗口的定义:指为用户指定的一组行,也称着"分区".如下图所示的窗口分区.每一个班级看作是一个数据窗口,一共有三个窗口 (二)窗口计算的相关方法 1)over()用法  格式 ...

  2. 【转】apache kafka监控系列-KafkaOffsetMonitor

    apache kafka监控系列-KafkaOffsetMonitor 时间 2014-05-27 18:15:01  CSDN博客 原文  http://blog.csdn.net/lizhitao ...

  3. Nosql 之 Redis(可做缓存 )

    下载 可以下载解压安装的 地址:https://github.com/dmajkic/redis/downloads 修改 redis.conf 取消注释 requirepass foobared运行 ...

  4. edwin报警和监控平台近期的更新(python源码)

    edwin从发布以来, 得到了不少关注, 获得了不少star. 最近又做了一些很有意义的改进, 同时完善了部分文档. 项目地址: https://github.com/harryliu/edwin , ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. 如何催促Apple进行App审核

    为什么提交给 App Store 的应用进入"审核(In Review)"状态后, 仍然可能会等待好多天的时间 ? 不过你也可以通过催促Apple进行App审核来缩短这个时间.以下 ...

  7. 删除某一BSC在某一时间段内的数据

    DELETE FROM cdl_raw_do_12501_ztev8_sht_201509 WHERE call_start_time >= STR_TO_DATE( '2015-09-14 2 ...

  8. 绝不要进行两层间接非const指针赋值给const指针

    #include <stdio.h> #include <stdlib.h> int main(void) { int *p1; int * *pp1; const int * ...

  9. JS对于数据常见操作

    var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; $.each(_mozi,function(key,val){//先key 后值 循环 console.log(ke ...

  10. 剑指Offer 反转链表

    题目描述 输入一个链表,反转链表后,输出链表的所有元素.     思路: 法1:用栈,压栈出栈 法2:头插法(有递归非递归2中)   AC代码: /* struct ListNode { int va ...