CODEWITHSUNDEEP
angularjsangular-ui-routerstate
Navin Nagpal
Navin Nagpal

Reputation: 650

URL Routing for nested states in ui-router

So I am using UI-Router to build my AngularJS app. However I am confused as to how the URL Routing works in case of nested states mainly due to the conflicting ideas (as per my understanding) provided in the wiki for UI-Router.

The first idea

idea 1 Hence maybe abstract state is used below

idea 1

The second idea

idea 2

As given in the documentation (first idea), url of parent state is prepended to that of it's children only in case of 'abstract':true property defined on the parent state.

However the documentation (second idea) also mentions how the above is a default feature.

Aren't the two ideas above conflicting for the same concept ? Or have I completely misunderstood them ?

Upvotes: 7

Views: 4137

Answers (2)

Radim Köhler
Radim Köhler

Reputation: 123901

Well, the documentation statements are correct. Maybe not clear for someone - but correct. It simply says:

1) No inheritance of url: "..url..." setting. It means, that child state won't have the url set with the same value as parent. Both values are independent.

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

So, the documentation is correct. This example is just for play ... It shows what we know. Child has different url setting then parent. Child state url in address bar is build from its url setting - 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">

Upvotes: 4

Nishchit
Nishchit

Reputation: 19094

They are trying to show concept only in this doc,so don't expect actual example here.

This is common concept for ui router.

Behavior of abstract state.

1) You can not call abstract state directly, So here we can not call contacts state directly

/contsacts This redirect to our default state

2) Abstract state should have always at least one child state. So we can call here

/contact/list as contacts.list state

3) Parent state's template must have 

<div ui-view></div>

directive where child state will propagate.

Upvotes: 1

Related Questions