Angular controller not loading using OcLazyLoad and ngRoute

Question

I have an app that which has a load of scripts loading initially and the list is growing as development goes on. I want to lazy load scripts which contain controllers as and when needed. I am using OcLazyLoad along with ngRoute for the routing option (i did try ui-route which actually had the same end result but was causing other app issues). The lazy load and routing is working fine, scripts and views are only loaded when needed, but the issue is the controller is not being loaded (Argument 'caseReviewController' is not) so it's as though the controller does not exist.

Here is a simple version of what I have in my app.js file...

var app = angular.module('dashboard', ['oc.lazyLoad', 'ngRoute', 'LocalStorageModule']);


        app.config(function ($ocLazyLoadProvider, $routeProvider, localStorageServiceProvider) {


                $ocLazyLoadProvider.config({
                        loadedModules: ['dashboard'], modules: [
                            {
                                name: 'caseReview',
                                files: ['js/controllers/case-review.js']
                            }
                        ]
                });


                $routeProvider

                        //other routes here...

                        .when('/case-review', {
                            templateUrl: 'views/case-review.html',
                            controller: 'caseReviewController',
                            resolve: {
                                loadModule: ['$ocLazyLoad', function ($ocLazyLoad) {
                                    return $ocLazyLoad.load('caseReview');
                                }]
                            }
                        })

});

In the seperate case-review.js file I have a simple controller

app.controller('caseReviewController', function($scope, localStorageService, $route){
    //do stuff
});

This controller is not being found or executed but the view and js file are being lazy loaded as expected. Any help would be great.

Thanks.

mohamedrias · Accepted Answer · 2015-04-06 09:41:18Z

10

In your separate case-review.js, you must get the reference of app.

angular.module('dashboard').controller('caseReviewController', function($scope, localStorageService, $route){
    //do stuff
});

As you've mentioned it's in separate file, it may not know about the app variable. It's better to get the reference of the angular module in the separate file.

This must solve your issue.

answered Apr 6, 2015 at 9:41

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dbach Over a year ago

Yes you are totally correct, major oversight on my part...that's what you get for looking at the screen too long! Thanks for your help.

Torrezzzz Over a year ago

Is there any way i can use the app variable? If i have to change it to angular.module to many files it will be waste of time.......

Collectives™ on Stack Overflow

Angular controller not loading using OcLazyLoad and ngRoute

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related