5-5 Angular ui-router路由传参

ui-router路由传参

Angularjs ui-router - 组件

• stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新urlRouterProvider生成一个路由规则来执行转换的状态。

• ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。

• urlRouterProvider：管理了一套路由规则列表来处理当location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。

• 路由嵌套(子路由): 在一个模版当中可以嵌套另一个模板,即一个模版中可以继续进行路由跳转.

---

1.传入参数

• 格式: home( {键: 值} )

首页
关于我们
联系我们

2.url中接收参数

• 接收格式:

url:url:'/home/:id'
url:'/my/{id:int}',
url:'/contact/?id&sk',

$stateProvider.state('home', {
        //接收路由参数
        url:'/home/:id', //url显示地址
        template:'
首页-{{name}}
',
        controller:'skController'
    }).state('my', {
        url:'/my/{id:int}',
        template:'
关于我们
',
        controller:'skController'
    }).state('contact', {
        url:'/contact/?id&sk',
        template:'
联系我们
',
        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);
}]);