Make child route as default

Question

I asked a similar case here but then I found out it was not exactly what I wanted to do:

Here is a new version:

HTML

  <body ng-app="plunker">
    <div>
      <a ui-sref="admin">Admin</a>
      <a ui-sref="user">User</a>
    </div>
    <div ui-view></div>  
  </body>

JS

var app = angular.module('plunker', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .when('/', '/admin/dashboard')
    .when('/admin', '/admin/dashboard')
    .when('/user', '/user/dashboard')
    .otherwise('/admin/dashboard');

  $stateProvider
    .state('admin.dashboard', {
      url: '/admin/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
    })
    .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
      url: '/admin/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      template: '<div>admin link1</div>'
    })
    .state('user', {
      url: '/user/dashboard',
      template: '<div>user dashboard</div>'
    });
});

CODE: http://plnkr.co/edit/NYdWC1j9xskQnY8LjJkZ?p=preview

Requirements

I don't need to render anything for parent routes (admin)
The default redirect will be /admin/dashboard
I need the url to be properly structure as child of /admin because previous question, it ended up to be /admin/dashboard/admin/link1
I do need admin and user parents. There is a need for children relationship. This will be used later.

Problems

Right now I cannot show child routes like admin.dashboard. It's just blank. How to show dashboard by default?
If I added the lines below to show the admin template, even this ui-sref="admin.dashboard" won't take me to the correct dashboard child route

javascript .state('admin', { url: '/admin', template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a></div>' })

score 1 · Answer 1 · answered Jul 24 '14 at 01:17

When nesting routes you need to have a parent route. In this case you are missing an 'admin' route.

.state('admin', {
    url: '/admin',
    abstract: true,
    template: '<div ui-view></div>'
})
.state('admin.dashboard', {
    url: '/dashboard',
    templateUrl: '/views/admin.dashboard.html'
})
.state('admin.profile', {
    url: '/profile',
    templateUrl: '/views/profile.html'
})

the abstract: true attribute tells ui-router that this isn't actually a route you can navigate to
the nesting of routes is implied by the . in the name
routes are then /admin/dashboard and /admin/profile

see: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading—showing (re: missing ui-view/blank view problem)

Yes this is almost what I needed: http://plnkr.co/edit/aCQ3SV5uAimuU0F3ITSr?p=preview. But how to make `admin` to redirect to `admin.dashboard` though? Basically parent to a child of it. Right now I had to modify the `Admin` — HP., Jul 24 '14 at 04:40
I found out `abstract: true` disabled redirect. Strange. This works now: http://plnkr.co/edit/aCQ3SV5uAimuU0F3ITSr?p=preview — HP., Jul 24 '14 at 05:43

Radim Köhler · Accepted Answer · 2014-07-24T04:49:51.107

There is an updated plunker. To make things simple, I firstly changed the name of the state 'admin.dashboard' into:

.state('admin_dashboard', {
  url: '/admin/dashboard',
  ...

the reason is, that any dot is here treated as a sub-state. And we can (but do not have to) introduce substate of admin now, to explain how to call that state properly...

And these are the essential changes in the call inside of the <a>

not working ui-sref (original)

<div>
  <a ui-sref="admin">Admin</a>
  <a ui-sref="user">User</a>
</div>

working ui-sref

<div>
  <a ui-sref="admin_dashboard">Admin</a>
  <a ui-sref="user">User</a>
</div>

working href

<div>
  <a href="#/">Admin as <samp>'/'</samp></a>
  <a href="#/admin">Admin as <samp>'/Admin'</samp></a>
  <a href="#/user">User</a>
</div>

as we can see, the ui-sref must contain the state name, while the href can (must) contain the url, even the one defined inside of the when()

Check the updated example...

UPDATE:

In case that we would like to go with the parent child, we can have the setting like this

$stateProvider
     .state('admin', {
       url: '/admin',
       template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a>' + 
       '<div ui-view=""></div>' +
       '</div>'
     })
    .state('admin.dashboard', {
      url: '/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
    })
    .state('admin.link1', { 
      url: '/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      template: '<div>admin link1</div>'
    })
    .state('user', {
      url: '/user/dashboard',
      template: '<div>user dashboard</div>'
    });

and these would be the anchors

not working ui-sref (original)

<div>
  <a ui-sref="admin">Admin</a>
  <a ui-sref="user">User</a>
</div>

working ui-sref

<div>
  <a ui-sref="admin.dashboard">Admin</a>
  <a ui-sref="user">User</a>
</div>

working href

<div>
  <a href="#/">Admin as <samp>'/'</samp></a>
  <a href="#/admin">Admin as <samp>'/Admin'</samp></a>
  <a href="#/user">User</a>
</div>

And the updated plunker

Sorry I didn't make it clear. I thought of doing flat and no parent/children before but I think I do need the parent state. — HP., Jul 24 '14 at 04:42
Not an issue ;) I just updted the plunker, to show you how easy is to introduce the parent child... you have to love `ui-router` ... it is a really **aaawesome** tool ;) — Radim Köhler, Jul 24 '14 at 04:50

Make child route as default

2 Answers2