Injecting into lazy loaded AngularJS Controller when using ocLazyLoad

Question

I started using ocLazyload to lazy load few of my AngularJs controllers. I have used it along with the $routeProvider like this

  $routeProvider.when("/login", {
        templateUrl: "login.html",
        resolve: {
            loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load('LoginCtrl.js');
            }]
        }
    }).

and this works fine.

I have another route definition which uses resolve property to resolve few items before loading the controller.

 when("/dashboard", {
        templateUrl: "dashboard.html",
        controller: "DashboardCtrl",
        resolve: {
            profileData: getProfile,
            count : getCount
        }
    }).

Now I want to lazy load this controller too, and I tried it like this

   when("/dashboard", {
        templateUrl: "dashboard.html",
        resolve: {
            profileData: getProfile,
            count : getCount,
            loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load(['DashboardCtrl.js']);
            }]
        }
    }).

The page loads in this case, but the profileData and count doesn't get injected into the controller. The controller definition is as given below.

var app = angular.module('gt');
app.controller('DashboardCtrl', ['$scope', '$rootScope', 'profileData', 'count',
    function($scope, $rootScope, profileData, count) {
...
}]);

On debugging, I realise that the getProfile and getCount method get's called, but it happens asynchronously and the controller also lazy loads without waiting for these methods. How do I inject and lazy load at the same time? Can I use promises to resolve this in any way?

I am using AngularJS 1.3.10 & ocLazyLoad 1.0.5 versions

getProfile function for reference

var getProfile = function($q, $http, Profile, localStorageService) {
        var deferred = $q.defer();
        if (!localStorageService.get("loggedInUser")) {
            $http.post('/loggedin').success(function(user) {
                if (user) {
                    localStorageService.set("loggedInUser", user.email)
                    Profile.get(localStorageService.get("loggedInUser"), function(profileData) {
                        if (profileData) {
                            deferred.resolve(profileData);
                        } else {
                            deferred.resolve();
                        }
                    });
                } else {
                    deferred.reject();
                }
            });
        } else {
            Profile.get(localStorageService.get("loggedInUser"), function(profileData) {
                if (profileData) {
                    deferred.resolve(profileData);
                } else {
                    deferred.resolve();
                }
            });
        }
        return deferred.promise;
    }

getProfile.$inject = ["$q", "$http", "Profile", "localStorageService"];

That was an useful info.

Dhanush Gopinath
– Dhanush Gopinath

2015-10-14 07:02:45 +00:00
Commented Oct 14, 2015 at 7:02 — Dhanush Gopinath
– Dhanush Gopinath, Commented Oct 14, 2015 at 7:02

Dhanush Gopinath · Accepted Answer · 2015-09-28 06:47:22Z

1

I could get this working with the following configuration of $routeProvider

when("/dashboard", {
    templateUrl: "dashboard.html",
    controller :"DashboardCtrl"
    resolve: {
        profileData: getProfile,
        count : getCount,
        loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load(['DashboardCtrl.js']);
        }]
    }
}).

where DashboardCtrl is the controller defined in DashboardCtrl.js

answered Sep 28, 2015 at 6:47

Dhanush Gopinath

5,7697 gold badges41 silver badges68 bronze badges

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

Comments

Sonaryr · Accepted Answer · 2015-09-24 09:16:30Z

0

does getProfile and getCount return a promise? I would guess this is the problem as this is required. Every object put in resolve should return a promise. see the documention

answered Sep 24, 2015 at 9:16

Sonaryr

1,1222 gold badges10 silver badges24 bronze badges

Comments

Olivier · Accepted Answer · 2015-09-30 07:52:28Z

0

If you need your resolves to happen in a specific order, you can inject them into another resolve, like this:

   when("/dashboard", {
    templateUrl: "dashboard.html",
    resolve: {
        profileData: getProfile,
        count : getCount,
        loadCtrl: ['$ocLazyLoad', 'profileData', 'count', function($ocLazyLoad, profileData, count) {
            return $ocLazyLoad.load(['DashboardCtrl.js']);
        }]
    }
}).

answered Sep 30, 2015 at 7:52

Olivier

1,2681 gold badge10 silver badges25 bronze badges

Collectives™ on Stack Overflow

Injecting into lazy loaded AngularJS Controller when using ocLazyLoad

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related