Using ocLazyLoad to lazy load a controller with $stateProvider

Question

I'm having issues using oclazyload with $stateProvider.

I have specified that the controller .js should be loaded in the router config, and it does,' but it's not available to use as an ng-controller attribute in the file loaded in templateURL.

ui-route config:

core
.run(
    [                    '$rootScope', '$state', '$stateParams',
        function ($rootScope,       $state,     $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;              
        }
    ]
)
.config(
    [                    '$stateProvider', '$urlRouterProvider',
        function ($stateProvider,       $urlRouterProvider) {
            console.info('Routing ...');
            $urlRouterProvider
                .otherwise('/app/dashboard');

            $stateProvider
                .state('app', {
                    abstract: true,
                    url: '/app',
                    templateUrl: 'templates/app.html',
                })
                .state('app.orders', {
                    abstract: true,
                    url: '/orders',
                    templateUrl: 'templates/orders/orders.html',
                })
                .state('app.orders.index', {
                    url: '/index',
                    templateUrl: 'templates/orders/index.html',
                    resolve: {
                        deps: ['$ocLazyLoad',
                            function( $ocLazyLoad ){
                                console.info('Path ot order controller in route config',Momento.paths.js + 'controllers/orders/index.js');
                                return $ocLazyLoad.load([
                                        Momento.paths.js + 'controllers/orders/index.js'
                                ])
                            }
                        ]
                    }
                })
        }
    ]
)
;

And my templateURL file starts:

<div class="" id="" ng-controller="OrdersIndexController">...</div>

But when it loads, console throws the error:

<info>orders/index controller loaded controllers/orders/index.js:3
<info>Now I've finished loading the controller/order/index.js config/ui-router.js:69
<info>orders template loaded VM30437:1 (<-- this is the app.orders abstract template with ui-view directive ready for app.orders.index view)
<error>Error: [ng:areq] Argument 'OrdersIndexController' is not a function, got undefined
... <trace>

So the file is loaded correctly by lazyload, confirmed by console output above and network tab in developer tools, but it's not available in the templateURL to use as controller? Does it need to be aliased either in router config using controller:'' key or in template? Does it need to be specifically attached to the (only) module in this app?

What am I missing?

PS: confirming that the name of the controller is in fact OrdersIndexController:

core 
.controller('OrdersIndexController', [
                        'Model', '$scope', '$window', 
    function(   Model,      $scope,     $window){
        console.info("OrdersIndexController fired");
    }
]);

Answer 1

You have to register your controller with

angular.module("myApp").controller

Working

angular.module("myApp").controller('HomePageController', ['$scope', function ($scope) {
    console.log("HomePageController loaded");

}]);

Not working

var myApp = angular.module("myApp") 

myApp.controller('HomePageController', ['$scope', function ($scope) {
    console.log("HomePageController loaded");

}]);

Answer 2

Inside the function function($ocLazyLoad){} you must to declare the name of module that contains the controller and the name of file "to lazy load"

function( $ocLazyLoad ){
     return $ocLazyLoad.load(
         {
             name: 'module.name',
             files: ['files']
         }
     );
}

Answer 3

If you use the current documented way for ocLazyLoad 1.0 -> With your router

...
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
  // you can lazy load files for an existing module
         return $ocLazyLoad.load('js/AppCtrl.js');
}]

}

then in js/AppCtrl.js

You have something like this:

angular.module("myApp").controller('DynamicNew1Ctrl', ['$scope', function($scope) {
    $scope.name = "Scoped variable";
    console.log("Controller Initialized");
}]);

Note that with angular.module("myApp") you are attaching the new controller to an existing module, in this case the mainApp, so any of new dynamic controllers can use the app dependencies. but you can define a new module an inject your dependencies, as described here, the later is used commonly when you estructure your app with a plugin architecture and you want to isolate the dynamic modules so they only have access to some especific dependencies