[AngularJS] Lazy loading Angular modules with Oclazyload

With the oclazyload you can load AngularJS modules on demand. This was very handy for runtime loading of Angular modules in large applications.

' Use strict ';//Declare app level module which depends on filters, and servicesvarApp = Angular.module (' app ', [' ui.router ', ' oc.lazyload ']). config (function($stateProvider, $locationProvider, $urlRouterProvider, $ocLazyLoadProvider) {$urlRouterProvider. otherwise ( "/"); $locationProvider. Hashprefix (‘!‘); //You can also load via resolve$stateProvider. State (' Index ', {URL:"/",//Root RouteViews : {"Lazyloadview": {controller:' Appctrl ',//This view would use Appctrl loaded below in the ResolveTemplateurl: ' partials/main.html '}}, resolve: {//resolve should return a promise and is executed before the view is loadedLoadmyctrl: [' $ocLazyLoad ',function($ocLazyLoad) {//You can lazy load files for an existing module            return$ocLazyLoad. Load ({name:' App ', files: [' Js/appctrl.js ']            }); }]}). State (' Modal ', {parent:' Index ', resolve: {//resolve should return a promise and is executed before the view is loadedLoadocmodal: [' $ocLazyLoad ', ' $injector ', ' $rootScope ',function($ocLazyLoad, $injector, $rootScope) {//Load ' oc.modal ' defined in the provider $ocLazyLoadProvider            return$ocLazyLoad. Load ({name:' Oc.modal ', files: [' Bower_components/bootstrap/dist/css/bootstrap.css ',//Would use the cached version if you already loaded bootstrap with the button' Bower_components/ocmodal/dist/css/ocmodal.animations.css ',                ' Bower_components/ocmodal/dist/css/ocmodal.light.css ',                ' Bower_components/ocmodal/dist/ocmodal.js ',                ' Partials/modal.html ']}). Then (function() {$rootScope. bootstraploaded=true; //inject the lazy loaded service              var$ocModal = $injector. Get ("$ocModal"); $ocModal. Open ({URL:' Modal ', CLS:' Fade-in '              });          }); }],          //Resolve the sibling state and use the service lazy loadedSETMODALBTN: [' loadocmodal ', ' $rootScope ', ' $ocModal ',function(Loadocmodal, $rootScope, $ocModal) {$rootScope. Openmodal=function() {$ocModal. Open ({URL:' Modal ', CLS:' Flip-vertical '              });    }          }]        }      }); //without server side support HTML5 must is disabled.$locationProvider. Html5mode (false); //We Configure Oclazyload to use the Lib Script.js as the async loader$ocLazyLoadProvider. config ({debug:true, Events:true, modules: [{name:' Gridmodule ', files: [' Js/gridmodule.js '        ]      }]    }); });

The lazy loading is the more for projects this is huge with many people working on it, and we have tons and tons of files. Instead of concatenating every JavaScript file into a few megabytes loaded up front, it would make + sense to lazy load them.

But if you ' re just working in a small project it makes more sense just to concatenate everything and serve up one giant Ja Vascript file up front. That's the worry about the files failing to the load later on and things.

It's really a call on the your end you had to do as to the whether you need to the lazy load or not. Typically I ' d say you don't need to and you don't have to but if you ' re working on a large project and it's a huge load up Front then lazy loading are something you should look into.

Read More:https://github.com/ocombe/oclazyload/blob/master/examples/complexexample/js/app.js

[AngularJS] Lazy loading Angular modules with Oclazyload