UI Router - Nested views have double slashes and redirect to root

Question

I'm trying to edit a project so that it uses a root view/state, which holds all the other views/states inside it. Before, every page was it's own independent state which wasn't that great when I wanted to add something globally to all states as it would mean you'd have to use $rootScope too often.

So in app.js I've done this:

$stateProvider
  .state('app', {
    url: '/',
    templateUrl: 'app/app.html',
    controller: function($state) {
      $state.go('app.home');
    }
});

So my logic here is that I want to keep the same structure of the website and everything like that. So inside app.html I have just included <div ui-view></div> so that I can inject all the child states, and then on load I am just loading the home state which was originally just the homepage called on '/'.

So now, app.homeis this:

$stateProvider
  .state('app.home', {
    templateUrl: 'app/home/home.html',
    controller: 'HomeCtrl'
  });

No URL here as I'm just loading it from app anyway. And here is another page I've tested:

$stateProvider
  .state('app.test', {
    url: '/test',
    templateUrl: 'app/test/test.html',
    controller: 'TestCtrl',
    authenticate: true
  });

The routing works fine, and the views are loaded, but there are a couple of issues.

1. When navigating to /test, the URL will actually be http://localhost:4000//test with two slashes. I can force it to be one slash if I make the url just test in the stateProvider, but I don't think that's the correct solution.

2. If I reload the page from /test it will also just redirect me back to http://localhost:4000/ and the root state.

Any ideas?

Answer 1

The url is built from all parents url definitions - plus current state's url. I.e.:

"\" + "\test" === "\\test"

In case, we want to have url without parent part, we can use this sign ^:

$stateProvider
  .state('app.test', {
    url: '^/test',
    templateUrl: 'app/test/test.html',
    controller: 'TestCtrl',
    authenticate: true
  });

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

So the routes would become:

• 'contacts' state matches "/contacts"
• 'contacts.list' state matches "/list". The urls were not combined because ^ was used.

So, going to '\test' without absolute routes (^) will in fact trigger the otherwise setting, and go to default state...

EXTEND: how to create default state UI-Router standard way - working plunker

    .state('app', {
      url: '/',
      templateUrl: 'tpl.html',
      abstract: true,
      //controller:  function($state) {
      //  $state.go('app.home');
      //}
    })
    .state('app.home', {
      url: "",
      ...
    })
    .state('app.test', {
      url: '^/test',
      ...
    })  

check it here