Trying to use nested views in angularjs with ui-router get a blank page

Question

My setup

app/learning/learning.js

 angular.module('meanApp')
.config(function($stateProvider) {
  $stateProvider
  .state('learning',{
    templateUrl: 'app/learning/learning.html',
    url: '/learning',
    controller: 'LearnCtrl',
    views: {
     'list': {
       templateUrl: 'app/learning/learning.list.html',
       controller: function($scope){  }
     },
     'magic': {
       templateUrl: 'app/learning/learning.magic.html',
       controller: function($scope){  }
     }
   }
 });
});

app/learning/learning.html

<h1>Learning</h1>
<div ui-view="list"></div>
<div ui-view="magic"></div>

app/learning/learning.list.html

<p>A list</p>

app/learning/learning.magic.html

<h2>Magic</h2>

when I navigate to /learning I get a blank page, I'm not sure what I'm doing wrong so any help would be greatly appreciated.

Answer 1

You shouldn't load the base template inside state when there are nested ui-view, Define the base template inside views.

Route Code

 angular.module('meanApp')
.config(function($stateProvider) {
  $stateProvider
  .state('learning',{
    url: '/learning',
    views: {
     '': {
       templateUrl: 'app/learning/learning.html',
       controller: 'LearnCtrl'
     },
     'list@learning': { //you missed state name here
       templateUrl: 'app/learning/learning.list.html',
       controller: function($scope){  }
     },
     'magic@learning': { //you missed state name here
       templateUrl: 'app/learning/learning.magic.html',
       controller: function($scope){  }
     }
   }
 });
});

This could Help you, Thanks.