Using ocLazyLoad to lazily load a controller using $ stateProvider

Question

I'm having problems using oclazyload with $ stateProvider.

I pointed out that the .js controller must be loaded into the router configuration, and it does, but it is not available for use as the ng-controller attribute in the file loaded in templateURL.

Ui-route configuration:

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 the templateURL file starts:

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

But when it boots, the console throws an 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> 

Thus, the file is loaded correctly lazyload, confirmed by the console output above and the network tab in the developer tools, but it is not available in the url template for use as a controller? Does it need to be an alias either in the router configuration using the controller: the "or" key or the pattern? Do I need to be specifically tied to the (only) module in this application?

What am I missing?

PS: confirmation that the controller name is actually an OrdersIndexController:

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

Answer 1

Inside the function function($ocLazyLoad){} you must declare the name of the module containing the controller and the file name "for lazy loading"

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

Answer 2

You need to register your controller using

angular.module("myApp").controller

IN

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

Does not work

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

Answer 3

If you are using the current documented method 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 attach a new controller to an existing module, in this case mainApp, so any of the new dynamic controllers can use application dependencies. but you can define a new module that introduces your dependencies, as described here , a later version is usually used when you create your application using the plugin architecture and you want to isolate dynamic modules so that they have access only to some specific dependencies