Geek Answers Handbook

URL routing for nested states in ui-router

Therefore, I use UI-Router to build my AngularJS application. However, I am confused about how the routing URL works in the case of nested states, mainly due to conflicting ideas (according to my understanding) presented in the wiki for UI-Router.

First idea

idea 1 Therefore, perhaps the abstract state is used below

idea 1

Second idea

idea 2

As indicated in the documentation (first idea), the url of the parent state is added to the fact that it has only children, only in the case of an abstract property: true, defined in the parent state.

However, the documentation (second idea) is also mentioned as the above function by default.

Do not both of these ideas contradict the same concept? Or have I completely misunderstood them?

+6
source share
2 answers

Well, the documentation instructions are correct. It may not be clear to anyone, but true. He just says:

1) Inheritance url: "..url..." is absent. This means that the child state will not have a url with the same value as the parent . Both values ​​are independent.

2) There is an implicit url concatenation. The state of the child url (in the address bar, not in the setting) is built from all of its url ancestors.

So the documentation is correct . This example is for a game . He shows what we know. The child has another url parameter and then parent. The state of the url child in the address bar is built from its url parameter - prefixed with parent (s) url

 // NON abstract .state('parent1', { abstract: false, url: "/parent1", templateUrl: 'tpl.html', }) .state('parent1.child1', { url: "/child1", templateUrl: 'tpl.html', }) // abstract .state('parent2', { abstract: true, url: "/parent2", templateUrl: 'tpl.html', }) .state('parent2.child2', { url: "/child2", templateUrl: 'tpl.html', })

url in href:

 non abstract <a href="#/parent1"> <a href="#/parent1/child1"> abstract <a href="#/parent2"> - cannot navigate there - is abstract <a href="#/parent2/child2">
+2
source

They try to show the concept only in this document, so don't expect an actual example here.

This is a common concept for ui router.

The behavior of an abstract state.

1) You cannot directly call an abstract state, so here we cannot directly call the state of contacts

/ contsacts This redirects to our default state

2) An abstract state must always have at least one child state. Therefore we can call here

/ contact / list as status contacts.list

3) The parent state template must have

 <div ui-view></div>

where the child state will be distributed.

+1
source

More articles:


All Articles