大佬教程收集整理的这篇文章主要介绍了4、Angular-Ui Router URL路由(完结篇)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

Here's how you set a basic url.
下面是如何设置基本url的方法。

$stateProvider
    .state('contacts',{
        url: "/contacts",templateUrl'contacts.html'
    })

Now when the user accessesindex.html/contactsthen the 'contacts' state would become active and the mainui-viewwill be populated with the 'contacts.html' partial. Alternatively,if the user were to transition to the 'contacts' state viatransitionTo('contacts')then the url would be updated toindex.html/contacts
当用户访问 index.html/contacts时。然后，“contacts”状态将变为活动，ui-view将被“contacts.html”填充。或者，如果用户通过transitionTo("contacts")切换到“contacts”状态，那么url将被更新为index.html/contacts

URL Parameters
URL参数

Basic Parameters
基本参数

Often,URLs have dynamic parts to them which are called parameters. There are several options for specifying parameters. A basic parameter looks like this:
通常，UR有动态的部分，它们被称为参数。有几个选项可以指定参数。一个基本的参数是这样的:

Alternatively you can also use curly brackets:
或者你也可以使用花括号:

Examples:
示例:

• '/Hello/'- Matches only if the path is exactly '/Hello/'. There is no special treatment for Trailing slashes,and patterns have to match the entire path,not just a prefix.
  '/Hello/'-只有在路径完全是“/Hello/”的情况下才匹配。对于后面的斜杠没有特殊的处理，并且模式必须匹配整个路径，而不仅仅是一个前缀。
• '/user/:id'- Matches '/user/bob' or '/user/1234!!!' or even '/user/' but not '/user' or '/user/bob/details'. The second path segment will be captured as the parameter 'id'.
  '/user/:id' - 匹配 '/user/bob' 或 '/user/1234!!!' 或者是 '/user/' 但不是 '/user' 或 '/user/bob/details'. 第二个路径段将被捕获为参数'id'。
• '/user/{iD}'- Same as the prevIoUs example,but using curly brace Syntax.
  '/user/{iD}' - 与前面的示例相同，但使用的是花括号语法。
• '/user/{id:int}'- The param is interpreted as Integer.
  '/user/{id:int}' - id参数被解释为整数。

Note:
注意

• Parameter names may contain only word characters (laTin letters,digits,and underscore) and must be unique within the pattern (across both path and search parameters).
  参数名称只能包含字母、数字和下划线,并且在模式中必须是唯一的 (在路径和搜索参数中)。

Using Parameters in Links
在链接中使用参数

To create a link that passes parameters,use the state name like a function and pass it an object with parameter names as keys. The properhrefwill be generated.
要创建传递参数的链接，可以使用状态名作为函数，并传递带有参数名的对象作为键。将生成适当的href。

For example,using the above state which specified acontactIdparameter,create a link like so:
例如,使用指定了 contactId 参数的上述状态,创建如下链接:

<a ui-sref="contacts.detail({ContactId: iD})">View Contact</a>

The value foridcan be anything in scope.
id的值可以是任意值。

Regex Parameters
参数正则表达式

A bonus to using curly brackets is the ability to set a Regular Expression rule for the parameter:
使用花括号的一个好处是可以为参数设置正则表达式规则:

Examples:示例:

'/user/{id:[^/]*}'- Same as'/user/{iD}'from the prevIoUs example.
'/user/{id:[^/]*}' - 与前一个示例中的“/user/id”相同。
• '/user/{id:[0-9a-fA-F]{1,8}}'- SIMILAR TO the prevIoUs example,but only matches if the id parameter consists of 1 to 8 hex digits.
  '/user/{id:[0-9a-fA-F]{1,8}}' - 与前面的示例类似，但是只有当id参数@R_259_11262@到8十六进制数字时才匹配。
• '/files/{path:.*}'- Matches any URL starTing with '/files/' and captures the rest of the path into the parameter 'path'.
  '/files/{path:.*}' - 匹配任何以'/files/'开头的URL，并将其余路径捕获到参数“path”中。
• '/files/*path'- Ditto. Special Syntax for catch all.

Warning:
警告

• Don't put capturing parentheses into your regex patterns,the UrlMatcher in ui-router adds those itself around the entire regex. You're effectively introducing a second capture group for the same parameter,which trips up the numbering in the child URl. You can use non-capturing groups though,i.e. (?:...) is fine.
  不要在正则表达式模式中使用捕获括号，ui-router中的UrlMatcher在整个正则表达式中添加了这些括号。您可以有效地为相同的参数引入第二个捕获组，该参数将在子URL中访问编号。也就是说您可以使用非捕获组。
• Regular expression can't include forWARD slashes as that's route segment delimiter
  正则表达式不能包含斜杠，因为这是路由分隔符
• Route parameters with regular expressions can't be optional or greedy
  带有正则表达式的路由参数不能是可选的或贪婪的

Query Parameters
查询参数

You can also specify parameters as query parameters,following a '?':
还可以将参数指定为查询参数,即'?':

If you need to have more than one,separate them with an '&':
如果你需要不止一个查询参数，则把它们用"&"分开。

Using Parameters without Specifying Them in State URLs
使用参数而不用在状态URL中指定它们

You still can specify what parameters to receive even though the parameters don't appear in the url. You need to add a new field params in the state and create links as specified in Using Parameters in Links
即使参数没有出现在url中，您仍然可以指定要接收的参数。您需要在状态中添加一个新的字段params，并在指定的链接中使用参数。

Box-sizing: border-Box; margin-top: 0px; margin-bottom: 16px; color: rgb(36,you have the state.
例如，你的状态。

<a ui-sref="contacts({param1: value1})">View Contacts</a>

$state.go('contacts',{param1: value1})

// If you had a url on your state of:
url: '/users/:id/details/{typE}/{repeat:[0-9]+}?from&to'

// Then you navigated your browser to:
'/users/123/details//0'

// Your $stateParams object would be
{ id:'123',type:'',repeat:'0' }

// Then you navigated your browser to:
'/users/123/details/default/0?from=there&to=here'

// Your $stateParams object would be
{ id:'123',type:'default',repeat:'0',from:'there',to:'here' }

• 上一篇：3、Angular-Ui Router 多个命名视图下一篇：Angular4+NodeJs+MySQL 入门-04 接