ui-router路由傳參

Angularjs ui-router - 組件

• stateProvider：管理狀態(tài)定義、當(dāng)前狀態(tài)和狀態(tài)轉(zhuǎn)換。包含觸發(fā)狀態(tài)轉(zhuǎn)換的事件和回調(diào)函數(shù)，異步解決目標(biāo)狀態(tài)的任何依賴項，更新urlRouterProvider生成一個路由規(guī)則來執(zhí)行轉(zhuǎn)換的狀態(tài)。

• ui-view指示器：渲染狀態(tài)中定義的視圖，是狀態(tài)中定義的視圖的一個占位符。

• urlRouterProvider：管理了一套路由規(guī)則列表來處理當(dāng)location，并在處理完成時候返回true。支持正則表達(dá)式規(guī)則和通過$urlMatcherFactory編譯的UrlMatcher對象的 url 占位符規(guī)則。

• 路由嵌套(子路由): 在一個模版當(dāng)中可以嵌套另一個模板,即一個模版中可以繼續(xù)進(jìn)行路由跳轉(zhuǎn).

1.傳入?yún)?shù)

• 格式: 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})">關(guān)于我們</a></li>
<li><a ui-sref-active="active" ui-sref="contact({id:3})">聯(lián)系我們</a></li>

2.url中接收參數(shù)

• 接收格式:

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

$stateProvider.state('home', {
        //接收路由參數(shù)
        url:'/home/:id', //url顯示地址
        template:'<h1>首頁-{{name}}</h1>',
        controller:'skController'
    }).state('my', {
        url:'/my/{id:int}',
        template:'<h1>關(guān)于我們</h1>',
        controller:'skController'
    }).state('contact', {
        url:'/contact/?id&sk',
        template:'<h1>聯(lián)系我們</h1>',
        controller:'skController'

});

3.控制器通過$stateParams來獲取路由參數(shù)

• $stateParams提取在url中的不同參數(shù)。該服務(wù)的作用是處理url的不同部分。
• $stateParams對象的值為鍵值對：
  {inboxId: '123', sorted: 'ascending', from: 10, to: 20}

app.controller('skController', ['$scope' , '$stateParams',function ($scope, $stateParams) {
        $scope.name = '修改內(nèi)容';
        //獲取路由參數(shù)
        console.log($stateParams.id);
}]);