Skip to content

angular ui router stateprovider

遇见王斌 edited this page Sep 6, 2020 · 2 revisions

ui-router 参数处理

https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

路由

参数以 Json 格式传入: ui-sref="articles.page({pageType: 'news', pageId: 0})", 可以对应三种url形式:

/articles/type/id参数体现在url绝对路径里面,对应stateprovider定义:

.state('articles.page', {
        url: "/articles/:type/:id",

/articles?type=xx&id=xx参数体现在url的查询参数里面,对应的state定义是:

.state('articles.page', {
        url: "/articles?type&id",

这里需要注意,就是如果是有状态继承,子url本来是空的,可以单独写query 参数,或者使用^操作符,不继承URL:
$stateProvider
  .state('articles', {
    abstract: true,
    url: '/articles',
    templateUrl: '/modules/articles/client/views/switch.client.view.html'
  })
  .state('articles.page', {
    // here the url using query params, and for the inheritance url part, so here just using query part
    // We can using ^ to set absolute url from domain url also as:
    // url: '^/articles?type&page',
   
     url: '?type&page',
    templateUrl: '/modules/articles/client/views/list-articles.client.view.html',
    controller: 'ArticlesListController',
    controllerAs: 'vm',

/articles这种是参数不体现在url上面,state如下:

.state(''articles.page ',
{
url: "/articles",
params: { type: null, id: null },
templateUrl: 'contacts.html'})

controller

.controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
    $scope.state = $state.current
    $scope.params = $stateParams; 
})
Clone this wiki locally