How to use Lazylaoding in angularjs

Question

How I can use On demand loading of controllers /services in angularJs. now I have a mainApp which referenced by Index.html. I am using $routeprovider to routing but all the required controller/services are referenced in the corresponding views eg:

<section id="pageLevelScripts">
    <!--location of page level scripts-->

 <script src="/Area/Sotaria/Controllers/UserController.js"></script>
</section>
<div class="row" >
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#/users">Usermanagement</a></li>
                    <li class="active"><span>Users</span></li>
                </ol>
                <h6>{{name}}</h6>
            </div>
        </div>

This is my requirement I don't want to load all the controllers in my Index.html. but when I navigate to the childView, I am getting an error "Usercontroller is undefined", So how I can enable ondemanidng / lazy loading of controllers in angualrjs, .Ie. when ever the child page loaded ,then only its related controllers should load.

There is some way, check this Q&A [AngularAMD + ui-router + dynamic controller](http://stackoverflow.com/q/27465289/1679310) — Radim Köhler, Dec 17 '14 at 09:42

score 1 · Answer 1 · answered Dec 30 '14 at 22:41

The reason you get undefined is because just loading the JS file doesn't make Angular aware of it. You must attach it to Angular's $controllerProvider.

You can create a custom service that does the lazy loading for you or use one of the many already built by other people. Here is an example of a custom one that you can use with requirejs.

If the below example is not explanatory enough you can read this blog post here: Strange Milk - Front End Development

Custom Provider

function LoaderProvider(){
    this.controller = null;
    this.directive = null;
    this.filter = null;
    this.factory = null;
    this.service = null;

    //service factory definition
    this.$get = ['$q', '$rootScope', function($q, $rootScope){
        return {
            load: function (path) {
                var q = $q.defer();
                require([path], function () {
                    $rootScope.$apply(function () {
                        q.resolve();
                    });
                });
                return q.promise;
             }
         };
    }];
}

var container = new LoaderProvider();
module.provider('Loader', function(){
    return container;
});

Your Apps config:

.config(function (LoaderProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

        // save references to the providers
        LoaderProvider.controller = $controllerProvider.register;
        LoaderProvider.directive = $compileProvider.directive;
        LoaderProvider.filter = $filterProvider.register;
        LoaderProvider.factory = $provide.factory;
        LoaderProvider.service = $provide.service;
    })

An example of how you would use this in your App's routes. Learn more about Resolve

resolve : {
    load : ['Loader', function(Loader){
        return Loader.load('../app/global/controllers/headerCtrl');
    }]
}

Some other resources/solutions:

ocLazyLoad

angularAMD

How to use Lazylaoding in angularjs

1 Answers1