Possible duplicate of this. I am building an application using angular. I am using ui router for rendering multiple views. My problem is when i am launching the application, views are not getting rendered.My router is,
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
views: {
'indexlist': {
templateUrl: 'partials/list',
controller:'ListController',
controllerAs:'ctrl',
resolve: {
users: function ($q, ListService) {
console.log('Load all indexlist');
var deferred = $q.defer();
ListService.loadAllUsers().then(deferred.resolve, deferred.resolve);
return deferred.promise;
}
}
},
'sidemenu': {
templateUrl: 'partials/sidemenu',
controller:'HomeController',
controllerAs:'ctrl',
resolve: {
users: function ($q, HomeService) {
console.log('Load all values');
var deferred = $q.defer();
HomeService.loadAllLists().then(deferred.resolve, deferred.resolve);
return deferred.promise;
}
}
}
}
});
And index.html is,
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>${title}</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet"/>
<link href="css/sidebar.css" rel="stylesheet"/>
<script src="js/lib/jquery-3.2.1.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/angular.min.js" ></script>
<script src="js/lib/angular-ui-router.min.js" ></script>
<script src="js/lib/localforage.min.js" ></script>
<script src="js/lib/ngStorage.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/ListService.js"></script>
<script src="js/app/ListController.js"></script>
<script src="js/app/HomeService.js"></script>
<script src="js/app/HomeController.js"></script>
</head>
<body>
<div ui-view="sidemenu"></div>
<div ui-view="indexlist"></div>
</body>
</html>
But when I dont use multiple views like and provide blank ui-view in index.html,it renders the view,
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/sidemenu',
controller:'HomeController',
controllerAs:'ctrl',
resolve: {
users: function ($q, ListService) {
console.log('Load all lists');
var deferred = $q.defer();
ListService.loadAllUsers().then(deferred.resolve, deferred.resolve);
return deferred.promise;
}
}
});
Can anyone suggest if i am missing something or doing something wrong?
You are doing wrong in resolve section, below is the corrected version
resolve: {
users: function ($q, ListService) {
console.log('Load all lists');
var deferred = $q.defer();
ListService.loadAllUsers().then(function(response){
deferred.resolve(true)
});
return deferred.promise;
}
}
Inject users in the corresponding controller.