angularjs nested routing doesn't load layout

Question

.state('home', {
      url: '/',
      templateUrl: 'index.html',
      abstract:true
 })
.state('home.dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/index.html',
      controller: 'dashboardCtrl'
 })

I failed to load index.html when I visit example.com/dashboard, I was only able to get the raw html of what is inside dashboard/index.html. That's strange, because in index.html I've declared <ui-view></ui-view> within the body so I expect dashboard/index.html to be a child of index.html.

Pushed a repo of my code.

Answer 1

You don't actually have nested states; you simply have a primary index.html file that serves as the container for your application, its dependencies, and your views. Angular won't load your primary index.html page, the index.html page loads Angular.

So there is no need for your 'home' state to have a templateUrl. You will use nested states if, for example, your dashboard view has an inner view that can load different templates depending on a user action. See Angular UI Router's documentation for some example use cases for nested views.