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

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.

@Cherry15 You're welcome, it would be great if you marked answer as correct.
Sorry, just discovered the tick next to the answer, I'm new to stackoverflow

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

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

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related