Lazy loading angular services using require.js

Question

I can lazy load a controller by doing the following,

Step1: Add an additional config...

rootModule.config([
    "$controllerProvider", function($controllerProvider) {
        rootModule.registerController = $controllerProvider.register;
    }
]);

Step2: Define the controller against the registerController defined in step 1

angular.module("rootModule").registerController("authController",
 function ($scope, $location, $rootScope, authService) {
     $scope.userName = "";
     $scope.userPwd = "";
     $scope.authenticate = function ()...

     $scope.testFunction = function ()...

 });

Step3: load the controller during routing by doing this,

 rootModule
    .config([
        '$routeProvider',
        function ($routeProvider) {
            $routeProvider.when('/',
                {
                    templateUrl: 'templates/Login.html',
                    resolve: {
                        load: ["$q", function($q) {
                            var defered = $q.defer();
                            require(["Controllers/authController"], function() {
                                defered.resolve();
                            });
                            return defered.promise;
                        }]
                    }
                }).

Now, the problem is I have a service called "authService", which I would like to lazy load, how to do it? Here is the service...

define(function() {

angular.module("rootModule").service("authService", function ($http) {
    return {
    /////Something code here//////
   });
});

You may want to take a look at angular-require-lazy. It is a different approach than yours, but you may still get ideas. Lazy loading in Angular is not a simple thing. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Dec 11, 2015 at 10:53
Thanks dude... will do it as soon as possible, hopefully I'll get enough info to answer my own question... — Giridhar Karnik
– Giridhar Karnik, Commented Dec 11, 2015 at 11:36

Giridhar Karnik · Accepted Answer · 2015-12-11 17:26:54Z

It was very simple in the end, thanks to this great blog written by Dan Wahlin.

To load a service in run time according to the routing, I had to do this...

Step 1: Get a reference to $provide.service() method in my rootModule's (module which contains the routing info) config...

rootModule.config(["$controllerProvider","$provide",
    "$controllerProvider", "$filterProvider","$compileProvider", function ($controllerProvider, $provide) {
        rootModule.registerController = $controllerProvider.register; //for controllers
        rootModule.registerService = $provide.service; //for services
        rootModule.registerFilter = $filterProvider.register; //for filters
        rootModule.registerDirective = $compileProvider.directive; //for directives
        rootModule.registerFactory = $provide.factory; //for factory
    }
]);

Step 2: Register the service to be loaded dynamically

define(function() {
angular.module("rootModule").registerService("reviewReportsService", function () {
    return {
              sampleData: "This is some sample data"
           }
       });
});

Step 3: Resolve the service script file, to load when the respective route is loaded

when('/ReviewAndSubmit',
                {
                    controller: "reviewAndSubmitController",
                    templateUrl: "templates/ReviewAndSubmit.html",

                    resolve: {
                        load: ["$q", function ($q) {
                            var defered = $q.defer();
                            require(["Controllers/reviewAndSubmitController"], function () {
                                defered.resolve();
                            });
                            require(["Services/reviewReportsService"], function () {
                                defered.resolve();
                            });
                            return defered.promise;
                        }]
                    }
                })

Hope this helps someone....

Collectives™ on Stack Overflow

Lazy loading angular services using require.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related