Child view not working in angular-ui-router

Question

Here is the code:

$stateProvider.
  state('dashboard', {
    url: '/dashboard/',
    templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
    controller: 'DashboardCtrl'
  }).
  state('dashboard-home', {
    url: '/dashboard/home/',
    parent: 'dashboard',
    templateUrl: 'modules/dashboard/views/home.client.view.html'
  });

I have a <div ui-view></div> element in dashboard.client.view.html

When I navigate to /dashboard/home/ nothing comes up. The goal is to have home.client.view.html get injected into dashboard.client.view.html .

Answer 1

There is an example as working plunker

Each Child state inherits url from its Parent . So we shoulduse just

url: '/home', 

because parent will add the /dashboard .

The state definition has changed url in our child state:

.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
    controller: 'DashboardCtrl'
  })
.state('dashboard-home', {
    //url: '/dashboard/home/',
    url: '/home',
    parent: 'dashboard',
    templateUrl: 'modules/dashboard/views/home.client.view.html'
});

And these links are working as expected:

<a href="#/dashboard">
<a href="#/dashboard/home">

Check it in action here

There is another working example , which shows that we can map states without parent:'' , but with dot notation:

state('dashboard', {
    url: '/dashboard',
    templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
    controller: 'DashboardCtrl'
})
//.state('dashboard-home', {
.state('dashboard.home', {
    //url: '/dashboard/home/',
    url: '/home', 
    templateUrl: 'modules/dashboard/views/home.client.view.html'
});

You can observe it here