Routing control of Angularjs module Ui-router

Most states in your app have URLs associated with them, and routing control is not an afterthought after the design completes state, but rather a problem that should be considered when you start development.

Here's how to set up a basic URL.

$stateProvider    . State (' contacts ', {        URL: "/contacts",        templateurl: ' contacts.html '    })

When we visit index.html/contacts , the ‘contacts‘ state will be activated, while index.html the in ui-view will be ‘contacts.html‘ populated. Alternatively, the transitionTo(‘contacts‘) state is transformed to a state through a method, and the ‘contacts‘ URL is updated to index.html/contacts .

URL parameter Basic parameters

Typically, the URL dynamic part is called a parameter, and there are several options for specifying the parameter. The basic parameters are as follows:

$stateProvider    . State (' Contacts.detail ', {        //url parameter URL set here        : "/contacts/:contactid",        Templateurl : ' contacts.detail.html ',        controller:function ($stateParams) {            //If We got here from a URL of/contacts/42            E Xpect ($stateParams). ToBe ({contactid:42});        }    )

Alternatively, you can use curly braces to specify the parameters:

Equivalent URL to the preceding setting method: "/contacts/{contactid}"

Example:

• ‘/hello/‘-Only match ‘/hello/‘ paths, no special handling of slashes, this pattern will match the entire path, not just a prefix.
• ‘/user/:id‘-Matches, and ‘/user/bob‘ ‘/user/1234!!!‘ even matches ‘/user/‘ , but does not match ‘/user‘ and ‘/user/bob/details‘ . The second segment of the path is captured as a parameter "id" .
• ‘/user/{id}‘-Same as the previous example, but using the curly brace syntax.

Parameters with regular expressions

You can set the parameters of a regular expression rule using curly braces:

Matches only numeric URLs with a contactId of 1 to 8 digits: "/contacts/{contactid:[0-9]{1,8}}"

示例：
‘/user/{id:[^/]*}‘-With the ‘/user/{id}‘ same

• ‘/user/{id:[0-9a-fA-F]{1,8}}‘-Similar to the previous example, but only matches numbers and characters from 1 to 8
• ‘/files/{path:.*}‘-matches any ‘/files/‘ URL path to the beginning and captures the remaining path into the parameter ‘path‘ .
• ‘/files/*path‘-the same as before, captures all special grammars.

Warning: do not write the capture parentheses into the regular expression, Ui-router's urlmatcher will add a capture for the entire regular expression.

Query Parameters

You can ? specify parameters as query parameters by

URL: "/contacts?myparam"//Match "/contacts?myparam=value"

If you need more than one query parameter, use & delimited:
URL: "/contacts?myparam1&myparam2"

Match "/contacts?myparam1=value1&myparam2=wowcool"

Routing Control for nested states

Additional Way (default)

In the nested state of the routing control, the default is that the URL of the child state is appended to the URL of the parent state.

$stateProvider  . State (' contacts ', {     URL: '/contacts ',     ...  })  . State (' Contacts.list ', {     URL: '/list ',     ...  });

The route becomes:

• ‘contacts‘Status will match"/contacts"
• ‘contacts.list‘The status will match "/contacts/list" . The URL of the child state is appended to the URL of the parent state.

Absolute Route (^)

If you use absolute URL matching, then you need to add a special symbol to your URL string "^" .

$stateProvider  . State (' contacts ', {     URL: '/contacts ',     ...  })  . State (' Contacts.list ', {     URL: ' ^/list ',     ...  });

The route becomes:

• ‘contacts‘Status will match"/contacts"
• ‘contacts.list‘The status will match "/list" . The URL of the child state is not appended to the URL of the parent state because it is used ^ .

$stateParams Services

The service you saw earlier $stateParams is an object that contains the key/value of each parameter in the URL. $stateParamsyou can provide various parts of a URL for a controller or service.
Note: $stateParams The service must be associated with a controller, and the $stateParams "key/value" must also be defined in the controller's url properties beforehand.

If the status of the URL attribute is: url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to '//When browsing '/users/123/details//0 '//$ The Stateparams object will be {ID: ' 123 ', type: ', repeat: ' 0 '}//when browsing '/users/123/details/default/0?from=there&to=here '//$ The Stateparams object will be {ID: ' 123 ', type: ' Default ', repeat: ' 0 ', from: ' There ', to: ' Here '}

Only when the state is activated and all the dependencies of the state are injected, $stateParamsObject exists. It means you can't be in a state. resolveUsed in functions $stateParamsobject, you can use the $state.current.paramsTo replace. Use $stateParamsThe two traps

$stateProvider. State (' Contacts.detail ', {     resolve: {       someresolve:function ($state) {          //*** cannot be used here Stateparams, the service is not a ready ***//         //*** use $state. Current.params instead of the ***//         return $state. Current.param S.contactid + "!"       };    },   //...})

• In a state controller, an $stateParams object contains only those parameters that are defined in the state, so you cannot access parameters that are defined in other States or ancestor states.

$stateProvider. State (' Contacts.detail ', {   URL: '/contacts/:contactid ',      controller:function ($stateParams) {      $stateParams. contactId  //*** exists! ***//   }}). State (' Contacts.detail.subitem ', {   URL: '/item/: ItemId ',    controller:function ($stateParams) {      $stateParams. contactId//*** attention! doesn ' T exist!!      $stateParams. ItemId//*** exists! ***//     }})

$urlRouterProvider $urlRouterProviderHandles the routing of URL requests outside of the URL routing method specified in the state configuration. $urlRouterProviderResponsible for monitoring $locationWhen $locationAfter the change, $urlRouterProviderWill find a match from one list, one by one, until it is found. All URLs are compiled into a UrlMatcherObject.

$urlRouterProviderThere are some practical methods that can be module.config used directly in the.

when()for redirection redirection

Parameters:

• whatString | RegExp | Urlmatcher, you want to redirect the incoming path
• handlerString | the path to which the Function will be redirected

handlerAs a String
If handler it is a string, it is treated as a redirect, and the redirected address is determined according to the matching syntax.

App. Config (function ($urlRouterProvider) {    //when there are an empty route, redirect To/index       $ Urlrouterprovider.when (', '/index ');    You can also use Regex for the match parameter    $urlRouterProvider. When ('/aspx/i ', '/index ');})

函数可以返回：handlerAs function
If handler it is a function, this function is injected into some service. If $location the match succeeds, the function is called. You can selectively inject $match .

• Falsy Indicates that the rule does not match and $urlRouter will attempt to find another match
• string that is used as the redirect address and passed as a parameter to the$location.url()
• Nothing or any value that is true to tell the $urlRouter URL has been processed

Example:

$urlRouterProvider. When (State.url, [' $match ', ' $stateParams ', function ($match, $stateParams) {    if ($state. $ Current.navigable! = State | | !equalforkeys ($match, $stateParams)) {        $state. Transitionto (state, $match, False);    }}]);

Parameter: otherwise() Invalid route

• pathString | functions you want to redirect the URL path or a function to return the URL path. A function can contain $injector and $location two parameters.

App. Config (function ($urlRouterProvider) {    //does not find any matches for URLs in the configuration (State configuration and when () method)/    /otherwise would take care of Routing the user to the specified URL    $urlRouterProvider. Otherwise ('/index ');    Example of using function rule as param    $urlRouterProvider. Otherwise (function ($injector, $location) {        ... Some advanced Code ...})    

Parameters: rule() custom URL handling

• handler function A function that contains $injector and $location two services as parameters, which are responsible for returning a valid path to the string.

App. Config (function ($urlRouterProvider) {//Here's an example's might allow case    insensitive URLs    $urlRo Uterprovider.rule (function ($injector, $location) {        var path = $location. Path (), normalized = Path.tolowercase (); C3/>if (Path! = normalized) return normalized;    })

$urlMatcherFactory and Urlmatchers
Defines the syntax for URL patterns and parameter placeholders. $urlMatcherFactoryis being behind the scenes $urlRouterProviderCalled to cache the compiled UrlMatcherObject without having to re-parse the URL after each location change. Most users do not need to use directly $urlMatcherFactorymethod, but is very useful in the state configuration and can be used $urlMatcherFactorymethod to generate a UrlMatcherobject and use it in the state configuration.

var urlmatcher = $urlMatcherFactory. Compile ("/home/:id?param1"); $stateProvider. State (' MyState ', {    URL: Urlmatcher});

Original address: http://bubkoo.com/2014/01/02/angular/ui-router/guide/url-routing/

Routing control of Angularjs module Ui-router