UI Router Introduction

1. Routing Rules

Rap Frame page routing based on Ui-router implementation

1.1 Ui-router

A basic routing status is as follows:

Routing configuration: $stateProvider . State (' po ', { URL: '/po ', Abstract:false, Templateurl: './pages/master.html ', resolve:{ Deps: "I am a test" }, Controller: ' Po_controller ' }) Front Desk Interface: <div ui-view></div>

When we visit index.html/#/po , the ‘po’ state will be activated, while <div ui-view></div> the in ui-view will be ‘./pages/master.html‘ populated.

1.1.1 Route description

The route definition basic parameter description is shown in 1?1:

Figure 1?1 Parameter Description

1.1.2 Nesting Structure

The default nesting rules are implemented according to the delimiter '. '

$stateProvider . State (' po ', { URL: '/po ', ... }) . State (' Po.input ', { URL: '/input ', ... }) . State (' Po.input.mkt ', { URL: "/mkt", ... })

The above routing configuration represents:

L ‘contacts‘ State will match"/contacts"

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

The 1.1.3 parameter uses the 1.2 URL parameter 1.2.1 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:

1 2 3 4 5 6 7 8 9 10

$stateProvider . State (' Contacts.detail ', { URL parameters are set here URL: "/contacts/:contactid", Templateurl: ' contacts.detail.html ', Controller:function ($stateParams) { If we got here from a URL of/contacts/42 Expect ($stateParams). ToBe ({contactid:42}); } })

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

1 2	Equivalent to the previous Setup method URL: "/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.

1.2.2 Parameters with regular expressions

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

1 2	Matches only numbers with contactId 1 to 8 digits URL: "/contacts/{contactid:[0-9]{1,8}}"

Example:

• ‘/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.

1.2.3 Query Parameters

You can ? specify parameters as query parameters by

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

If you need more than one query parameter, use & delimited:

1 2	URL: "/contacts?myparam1&myparam2" Match "/contacts?myparam1=value1&myparam2=wowcool"

1.3 Route control for nested states 1.3.1 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.

1 2 3 4 5 6 7 8 9

$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.

1.3.2 Absolute Route (^)

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

1 2 3 4 5 6 7 8 9

$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 ^ .

1.4 $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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

If the status of the URL property 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 '}

1.4.1 Use $stateParamsThe two traps

• An object exists only if the state is activated and all dependencies of the state are injected $stateParams . This means that you cannot resolve use objects in the function of the state $stateParams , which can be used $state.current.params instead.
• 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.

1 2 3 4< br> 5 6 7 8 9

$stateProvider. State (' Contacts.detail ', {  &N bsp;  Resolve: {       someresolve:function ($state) {          //*** cannot use $stateParams here, the service is not a ready ***// &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&N bsp;  //*** use $state. Current.params instead of ***//          return $state. Current.params.contactId + "!"      };   },   //... })

1 2 3 4 5 6 7 8 9 10 11 12

$stateProvider. State (' Contacts.detail ', { Controller:function ($stateParams) { $stateParams. ContactId//*** exists! ***// } }). State (' Contacts.detail.subitem ', { Controller:function ($stateParams) { $stateParams. contactId//*** attention! doesn ' T exist!! ***// } })

1.5 $urlRouterProvider

$urlRouterProviderHandles the routing of URL requests outside of the URL routing method specified in the state configuration. $urlRouterProviderresponsible for monitoring $location , when $location changed, $urlRouterProvider will find matches from one list, one by one, until found. All URLs are compiled into an UrlMatcher object.

$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.

1 2 3 4 5 6 7

App. Config (function ($urlRouterProvider) { $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 .

function can return:

• 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:

1 2 3 4 5

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

otherwise() Invalid route

Parameters:

• 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.

1 2 3 4 5 6 7 8 9 10

App. Config (function ($urlRouterProvider) { No matches for URLs found in configuration (state configuration and when () method) Otherwise the 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 ... }); })

rule() custom URL handling

Parameters:

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

1 2 3 4 5 6 7

App. Config (function ($urlRouterProvider) { Here's an example on how to might allow case insensitive URLs $urlRouterProvider. Rule (function ($injector, $location) { var path = $location. Path (), normalized = Path.tolowercase (); if (path! = normalized) return normalized; }); })

1.6 $urlMatcherFactory and Urlmatchers

Defines the syntax for URL patterns and parameter placeholders. $urlMatcherFactoryis called behind the scenes $urlRouterProvider to cache the compiled UrlMatcher object without having to re-parse the URL after each location change. Most users do not need to use the $urlMatcherFactory method directly, but are useful in state configuration and can use $urlMatcherFactory methods to generate an UrlMatcher object and use that object in the state configuration.

1 2 3 4

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

UI Router Introduction