How to use Lazylaoding in angularjs - 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>Home</li>
<li>Usermanagement</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.

Answer 1

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