angular ui-router参数配置说明

来源:互联网 发布:手机概率分析软件 编辑:程序博客网 时间:2024/05/20 09:45

已经迁移:https://www.heguo.org/blog/myweishanli/article/390


.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 parameterurl: '/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}",  // ..});


0 0