ui-router路由传参
Angularjs ui-router - 组件
stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新
urlRouterProvider生成一个路由规则来执行转换的状态。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
urlRouterProvider：管理了一套路由规则列表来处理当
location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。
路由嵌套(子路由): 在一个模版当中可以嵌套另一个模板,即一个模版中可以继续进行路由跳转.
1.传入参数
- 格式: home( {键: 值} )
<li><a ui-sref-active="active" ui-sref="home({id:1})">首页</a></li>
<li><a ui-sref-active="active" ui-sref="my({id:2})">关于我们</a></li>
<li><a ui-sref-active="active" ui-sref="contact({id:3})">联系我们</a></li>
2.url中接收参数
- 接收格式:
url:url:'/home/:id'
url:'/my/{id:int}',
url:'/contact/?id&sk',
$stateProvider.state('home', {
//接收路由参数
url:'/home/:id', //url显示地址
template:'<h1>首页-{{name}}</h1>',
controller:'skController'
}).state('my', {
url:'/my/{id:int}',
template:'<h1>关于我们</h1>',
controller:'skController'
}).state('contact', {
url:'/contact/?id&sk',
template:'<h1>联系我们</h1>',
controller:'skController'
});
3.控制器通过$stateParams来获取路由参数
- $stateParams提取在url中的不同参数。该服务的作用是处理url的不同部分。
- $stateParams对象的值为键值对：
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
app.controller('skController', ['$scope' , '$stateParams',function ($scope, $stateParams) {
$scope.name = '修改内容';
//获取路由参数
console.log($stateParams.id);
}]);
