标签 ui router 下的文章

我现在正在进行 信用生活 的业务运行系统的开发，使用了 AngularJS 以及 Material Design 以及 [Angular UI Router]()，系统中涉及到了一个特别常见的问题——一个Router的网址带有可选的参数，比如：/cms/promotions/movies 对应的是 /cms/promotions/:promotionType ，然后我还需要网址中能带有分页参数以及每一页数据的条目数量参数，这些参数也还应该有默认值，这个时候就使用到了可选参数。

在 AngularJS UI Router 中有以下方法可以创建可选参数的路由。

Query Parameters

使用 Query Parameters 是最简单也是最常见的一种方式了， UI Router 会将定义的参数都添加至 $stateParams 对象中去，比如：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType?page',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType;
    $scope.page = $stateParams.page || 0;
  }
})

接着，你就可以向下面这样定义一个新的链接了：

<a ui-sref="app.console.cms.promotions({ promotionType: 'foods', page: 1})">美食</a>

如果有多个参数，也没有关系，直接把多个参数使用 & 符号连接即可：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType?page&size',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType;
    $scope.page = $stateParams.page || 0;
    $scope.size = $stateParams.size || 10;
  }
})

直接使用 Route Parameter

还有一种方式只适合只有一个可选参数的路由，比如：/cms/promotions/:promotionType：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType || 'foods';
  }
})

此时， /cms/promotions/ 就对应的就是参数没有值时的路由了，此时我在 Controller 里面使用了一个默认的 foods 值为其值。

但是对于多个参数的时候，我们也只能定义多个路由了：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType || 'foods';
  }
})

...

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType/:page',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType || 'foods';
    $scope.page = $stateParams.page || 0;
  }
})

非 URL 路由参数

还有一种方式，可以不通过 URL 即可定义参数：

state('app.console.cms.promotions', {
  url: '/cms/promotions',
  params: {
    promotionType: 'foods'
  },
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType;
  }
})

此时，我们还是可以使用 ui-sref=app.console.cms.promotions({promotionType: 'movies'}) 创建一个链接 /cms/promotions，但是却会把 movies 做为 promotionType 的值传递给控制器。