angular ui-router parent url set to /

Question

Using ui-router and setting the parent state url to / results in my url looking like localhost:8000/#//child when looking at a child page. I\'d lik

Answer 1

The ui-router has solution (almost) for anything. There is a working plunker. The feature we will se in action is called: Absolute Routes (^)

So, let's start with requirement, to have these URL routes:

domain/#/                             -- root for main
domain/#/emergency/                   -- main.emergency
domain/#/emergency/detail             -- main.emergency.detail

Which should be working when using this ui-sref state calls:

    
Main
    
Emergency
    
Detail
 

Now, the trick is:

• the root (first) state must use url: "/", to have some unique identification
• but the next state can start its definition from the root again: with this setting:
  url: "^/..."

Here is the state configuration, enabling the desired results

  $stateProvider
    // root with '/'
    .state("main", {
      url: "/",
      templateUrl: 'main.tpl.html',
    })
    // here we start again from the root '/emergency'
    .state("main.emergency", {
      url: "^/emergency",
      templateUrl: 'emergency_menu.tpl.html',
    })
    // parent and child '/emergency/detail
    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'emergency_detail.tpl.html',
    });

And here is the documentation:

Absolute Routes (^)

...and the working plunker...