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