[TOC] # 路由控制 在你的应用中大多数状态都有与其相关联的 url，路由控制不是设计完成 state 之后的事后想法，而是开始开发时就应该考虑的问题。 ## 设置一个基本url。使用url属性 ~~~ $stateProvider.state('home', { //配置路由使用属性url url:'/home', templateUrl: basePathProvider.getPath('homeTpl.html'), }); ~~~ # URL参数 ## 基本参数 url动态部分被称为参数，有几个选项用于指定参数。 * 冒号语法 ~~~ //设置一个参数 //匹配home/12 //匹配home/sss url: "/home/:id" //设置多个参数 url: "/home/:id/:name" ~~~ * 花括号语法 ~~~ //设置一个参数 //匹配home/12 //匹配home/sss url: "/home/{id}" //设置多个参数 url: "/home/{id}/{name}" ~~~ * 带正则表达式语法 ~~~ //设置一个参数 // 只会匹配 id 为1到8位的数字 //匹配home/4 //不匹配home/111 //不匹配home/sss url: "/home/{id:[0-9]{1,8}}" ~~~ * 可以使用以前的?号方法设置参数 ~~~ //单个参数 //匹配 "/contacts?myParam=value" url: "/contacts?myParam" //多个参数 //匹配 "/contacts?myParam1=value1&myParam2=wowcool" url: "/contacts?myParam1&myParam2" ~~~ # 嵌套状态的路由控制 ## 附加的方式（默认） 嵌套状态的路由控制中，默认方式是子状态的 url 附加到父状态的 url 之后。 ~~~ $stateProvider .state('contacts', { url: '/contacts', ... }) .state('contacts.list', { url: '/list', ... }); ~~~ 路由将成为： ~~~ 'contacts'状态将匹配"/contacts" 'contacts.list'状态将匹配"/contacts/list"。子状态的url是附在父状态的url之后的。 ~~~ ## 绝对路由（^） 如果你使用绝对 url 匹配的方式，那么你需要给你的url字符串加上特殊符号"^"。 ~~~ $stateProvider .state('contacts', { url: '/contacts', ... }) .state('contacts.list', { url: '^/list', }); ~~~ 路由将成为： ~~~ 'contacts'状态将匹配"/contacts" 'contacts.list'状态将匹配"/list"。子状态的url没有附在父状态的url之后的，因为使用了^。 ~~~ # 捕获参数 ## $stateParams 服务 * $stateParams服务是一个对象，包含 url 中每个参数的键/值。$stateParams可以为控制器或者服务提供 url 的各个部分。 * $stateParams服务必须与一个控制器相关，并且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义。 * $stateParams服务不能在resolve中使用，但是可以使用$state.current.params来代替。 * 在状态控制器中，$stateParams对象只包含那些在状态中定义的参数，因此你不能访问在其他状态或者祖先状态中定义的参数。 ~~~ // 如果状态中 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' } ~~~ 【控制器中使用$stateParams】 ~~~ angular.module('myapp').controller('homeTplCtrl', function ($scope,$stateParams) { console.log($stateParams.id); $scope.$on('$viewContentLoaded', function (event, viewName) { }); }); ~~~ 【resolve中使用$stateParams，注意使用$state.current.params来代替】 ~~~ resolve: { someResolve: function($state){ //*** 不能在这里使用 $stateParams , the service is not ready ***// //*** 使用 $state.current.params 来代替 ***// return $state.current.params.contactId + "!" }; }, ~~~ ## $urlRouterProvider服务 * $urlRouterProvider负责处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。 * $urlRouterProvider负责监视$location，当$location改变后，$urlRouterProvider将从一个列表，一个接一个查找匹配项，直到找到。所有 url 都编译成一个UrlMatcher对象。 * $urlRouterProvider有一些实用的方法，可以在module.config中直接使用。 ### $urlRouterProvider服务的一些方法 * when() 重定向方法 * 参数： * what String | RegExp | UrlMatcher，你想重定向的传入路径 * handler String | Function 将要重定向到的路径 * handler 作为 String 如果handler是字符串，它被视为一个重定向，并且根据匹配语法决定重定向的地址。 ~~~ app.config(function($urlRouterProvider){ // 如果是一个空路由则直接重定向到index页面 $urlRouterProvider.when('', '/index'); //如果是一个指定的路由也可以重定向到index页面 $urlRouterProvider.when('/aspx/i', '/index'); }) ~~~ * handler 作为 Function 如果handler是一个函数，如果$location匹配成功，函数将被调用。你可以选择性注入$match。 函数可以返回： * falsy 表明规则不匹配，$urlRouter将试图寻找另一个匹配 * String 该字符串作为重定向地址并且作为参数传递给$location.url() * nothing或者任何为真的值，告诉$urlRouterurl 已经被处理 * otherwise() 无效路由 * 参数： path String | Function 你想重定向url路径或者一个函数返回url路径。函数可以包含$injector和$location两个参数。 ## $urlMatcherFactory 和 UrlMatchers 定义了url模式和参数占位符的语法。$urlMatcherFactory是在幕后被$urlRouterProvider调用，来缓存编译后的UrlMatcher对象，而不必在每次 location 改变后重新解析url。大多数用户不需要直接使用$urlMatcherFactory方法，但是在状态配置中非常实用，可以使用$urlMatcherFactory方法来生成一个UrlMatcher对象，并在状态配置中使用该对象。 ~~~ var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1"); $stateProvider.state('myState', { url: urlMatcher }); ~~~