Search code examples
angularjsroutesmultiple-views

ui-views are not getting rendered even with correct states


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?


Solution

  • 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.