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.

Pankaj Parkar · Accepted Answer · 2015-01-31 16:54:35Z

2

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.

answered Jan 31, 2015 at 16:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nana Hacker Over a year ago

Thank you so much, that has been bugging me for ages!

Pankaj Parkar Over a year ago

@Cherry15 You're welcome, it would be great if you marked answer as correct.

Nana Hacker Over a year ago

Sorry, just discovered the tick next to the answer, I'm new to stackoverflow

Pankaj Parkar Over a year ago

@Cherry15 np. Thanks once again :)

Nana Hacker · Accepted Answer · 2015-01-31 17:54:14Z

0

The problem was that I was trying to load the base template inside state and I missed out the state name as Pankaj said, so the solution is...

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){  }
    }
  }
 });
});

answered Jan 31, 2015 at 17:54

Nana Hacker

711 silver badge8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related