URL Routing for nested states in ui-router

Question

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

Hence maybe abstract state is used below

The second idea

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 ?

Answer 1

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">