controller not defined when using OC lazyloading

Question

I'm trying to lazy load my JS files with oclazyload module. but I'm getting this error

Uncaught ReferenceError: dashboardController is not defined

while my files are correctly loaded. here is the state declaration

.state(
    "dashboard",
    {
        url : "/dashboard",
        views : {

             "mainbody" : {
                 templateUrl : "dashboard/dashboard.html"
             },
         },
         resolve : {
             load : [
                 '$ocLazyLoad',
                 function($ocLazyLoad) {
                     return $ocLazyLoad
                         .load({
                             name : 'Dashboard',
                             files : [
                                'dashboard/Dashboard.js',
                                'dashboard/controllers/DashboardController.js' 
                             ]
                        });
                } 
            ]
        },
        data : {
            pageTitle : "dashboard",
            authenticate : true
        }
    })

and my module was declared like this:

angular.module('Dashboard', [ 'nvd3', 'ngAnimate', 'ui.bootstrap', 'ngTouch', 'ui.grid' ]).controller('dashboardController', dashboardController);

and the controller

function dashboardController ($scope , uiGridConstants, $http,  $timeout) {//some staff}

any idea how to fix that?

Answer 1

Try to put the resolve block under your view block

.state(
    "dashboard", {
    url : "/dashboard",
    views : {
        "mainbody" : {
            templateUrl : "dashboard/dashboard.html",
            resolve : {
                load : [
                    '$ocLazyLoad',
                    function ($ocLazyLoad) {
                        return $ocLazyLoad
                        .load({
                            name : 'Dashboard',
                            files : [
                                'dashboard/Dashboard.js',
                                'dashboard/controllers/DashboardController.js']
                        });
                    }
                ]
            },
            data : {
                pageTitle : "dashboard",
                authenticate : true
            }
        },
    }
})

Answer 2

Please try this.

 return $ocLazyLoad
 .load([
      'dashboard/Dashboard.js',
      'dashboard/controllers/DashboardController.js' 
 ]);