how to lazyload angular's controllers

[mz121star]

I want uses angularjs and requirejs ,
but now, when i wrote routeProvider need require() all controlls module.

how to lazyload my controllers module？

[mz121star]

no ask for me？ )-:

[pkozlowski-opensource]

@mz121star in the current version AngularJS doesn't provide special mechanism to load controllers (not other services, filters etc. for that matter) on demand. Currently a controller needs to present (loaded) when it gets instantiated.

There were several threads on the mailing list and Stack Overflow regarding this and several people had some success with loading globally defined controllers on demand. Search archives of the mailing list / SO to learn more. You might also watch best practices video where this topic is mentioned: http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=g-user-u

Future version of AngularJS might have support for lazy-loading controllers.

Going to close this issue for now, please don't hesitate to post on the mailing list (angular@googlegroups.com) if you need more info.

[mz121star]

Thank you for your reply!

[orneryd]

FYI, I have crated a lazy load directive that allows you to lazy load the controllers when globally defined.

$directivesModule.directive('ngLazyInclude', ['$compile',function ($compile) {
    var ngLazyInclude = {
        scope: true,
        compile: function () {
            return {
                pre: function ($scope, iElement, iAttrs ) {
                    /*
                    opts {
                        //@controller is the url to the script that contains the controller
                        controller: 'viewController.js',
                        //@patrial is the url to the html file you would normally use ng-include with
                        partial: 'view.html'
                    }
                    */
                    $scope.$watch(function() {
                        return JSON.stringify($scope.$eval(iAttrs.ngLazyInclude));
                    }, function () {
                        var opts = $scope.$eval(iAttrs.ngLazyInclude);
                        iElement.empty();
                        $.getScript(opts.controller).done(function () {
                            var html = $.ajax({
                                type: "GET",
                                url: opts.partial,
                                async: false
                            }).responseText;
                            $scope.$apply(function() {
                                iElement.append($compile(html)($scope));
                            });
                        });
                    });
                }
            };
        }
    };
    return ngLazyInclude
}]);

All the angular team would have to do is support adding controllers to modules on the fly (without requiring re-bootstrapping) and the default controller definitions would work.

[GoNode5]

+1

[ifyio]

I have written a blog post showing how you can implement lazy loading in AngularJS. http://ify.io/entry/172/lazy-loading-in-angularjs/

[GabrielDelepine]

Do somebody knows when AngularJS will have a native feature to do it ?

[frederic-bonjour]

Tested solution provided by @ifyio: works fine! Great work!

[m59peacemaker]

The directive presented by @timothyswt didn't work for me and the solution from @ifyio is dealing with routes whereas I am more interested in dynamically loading a controller with ng-include. I copied that directive and modified it to load both a js and html file, register the controller, and add the controller to the partial's div. My solution is probably very bad (I'm a noob), but it is working as I intended. I would love to see how it can be improved. Detailed explanation here: http://pastebin.com/RsYuKTMT
Thanks!!

Edit: I changed the link above. My previous link was not functioning as I thought. I have greatly improved my approach in many regards, as I am understanding the original ng-include directive better.

[GabrielDelepine]

The @ifyio solution works well ! Thanks to him.
I made a service to add dynamically the CSS files in the page. Combinated with the @ifyio solution, it's really powerfull. See here : https://github.com/Yappli/angularDynamicStylesheets

[DomenZajc]

@mz121star +1

[freeman42x]

You might also want to take a look at angularAMD:

• http://marcoslin.github.io/angularAMD/#/home
• https://github.com/marcoslin/angularAMD

or ng-couch-potato:

• https://github.com/stu-salsbury/angular-couch-potato