活到老学到老  

记录遇到问题的点点滴滴。

angular ui-router参数配置说明

8年前发布  · 1773 次阅读
.state('mystate', {
  params: [
    {param1: {default: 'xyz', type: 'integer'}},
    {param2: {type: 'string'}}
  ]
})

or (with url)

.state('mystate', {
  url : '/path/to/{param1:integer}/with/{param2:string}',
  params: [
    {param1: {default: 'xyz'}
  ]
})

// ===================

params: {    id: {      type: 'string',      optional: true,      dynamic: true, // don't transition on change, instead two-way bind between $stateParams and $location.replace()      encode: function (value) {        // this refers to the parameter meta-data object        return encodeURIComponent(String(value));      },      decode: function (string) {        // inverse of encode      }    }  }
// ========================

url: '/place/{name=home:placeType}?{~orderby=name}' // '~' -> dynamic parameter

url: '/place/:name?orderby'
params: {
  name: {
    type: 'placeType',
    def: 'home'
  },
  orderby: {
    def: 'name',
    dynamic: true
  }
}

// =========================

url: '/myrouter/:id?startOn'

params: [
  "id": {
    // supports integer, boolean
    type: "integer",

    def: 0
  },
  "startOn": {
    type: {
      // evaluated for equality.
      equals: function (otherObj) {},

      // returns complex type from $location string
      decode: function () {}, 

      // returns string representation of complex type to be put in $location
      encode: function () {},

      def: new Date()
    }
  }
]

// =======================

angular.module('whatever', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider
          .when('/c?id', '/contacts/:id')
          .when('/user/:id', '/contacts/:id')
          .otherwise('/');

        $stateProvider
          .registerType("integer", {
            equals: function (typeObj, otherObj) { },
            decode: function (typeObj) { },
            encode: function (value) { }
          })

          .state("home/{id:integer}", {});
// ============================

$stateProvider.type("APIObject", function($resource) {
  return {
    decode: function(value, key) {
      // Figure out if the matched value is a slug or 24-char hex ID,
      // and query the API accordingly
      if (value.match(/^[0-9a-f]{24}$/)) {
        return $resource(key, "/" + key + "s/:_id").get({ _id: value });
      }
      return $resource(key, "/" + key + "s/:slug").get({ slug: value });
    },
    encode: function(value, key) {
      // When encoding to a URL, use the object's slug if available,
      // otherwise use the 24-char hex ID
      return value.slug || value._id;
    },
    equals: function(a, b) {
      // Compare one decoded object to another
      return a.$links.self === b.$links.self;
    }
    is: function(value, key) {
      // Note that I could use `key` to infer whether value is the
      // correct *type* of API object, but in this naïve example,
      // all I care about is that it *is* an API object
      return (value.$links && value.$links.self);
    },
    // As the reciprocal of `is()`, overrides the default URL regex
    // match, to match slug-style IDs, or 24-character hex values,
    // since some objects have slugs, and others don't
    pattern: "[a-z\-]+|[0-9a-f]{24}"
  };
});

$stateProvider.state("users", {
  url: "/users",
  // ...
}).state("users.item", {
  url: "/{user:APIObject}"
  // ...
}).state("movies", {
  url: "/movies",
  // ..
}).state("movies.item", {
  url: "/{movie:APIObject}",
  // ..
});