AngularJS realizes dynamic (lazy) loading modules and dependencies through ocLazyLoad

Recently, when using AngularJS, I found that the things in AngularJS rookie tutorial are too basic, and many things are not mentioned, such as today's one optimization problem about front-end, lazy loading. When address distribution is realized through routing, load the files you need through lazy loading mode, such as related controller, that is, js, which is beneficial to increase the burden of first loading.

The following is the implementation process of a lazy load.

The implementation process mainly refers to three main JS files:

<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/ocLazyLoad.min.js"></script> 

Then, through APP configuration, the dependent scripts are injected:

var app = angular.module('pkcms', ["ui.router", "oc.lazyLoad"]);

 　　 app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",

 　　   　　 function ($provide, $compileProvider, $controllerProvider, $filterProvider) {

     　　 　 　  　　  　 app.controller = $controllerProvider.register;

     　　 　 　  　　  　 app.directive = $compileProvider.directive;

     　　 　 　  　　  　 app.filter = $filterProvider.register;

     　　 　 　  　　  　 app.factory = $provide.factory;

     　　 　 　  　　  　 app.service = $provide.service;

     　　 　 　  　　  　 app.constant = $provide.constant;

 　　   　　 }]);

   　　 　 　 //  Load other script files as modular 

    　　 　 　  　　  app.constant('Modules_Config', [

     　　 　 　  　　  　 {

       　　 　 　  　　  　 　 　 name: 'treeControl',

       　　 　 　  　　  　 　 　 serie: true,

      　　 　 　  　　  　 　  files: [

        　　 　 　  　　  　 　 　  　　  "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"

       　　 　 　  　　  　 　 　 ]<br>}]);

    　　 　 　  　　  app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);

    　　 　 　  　　  function routeFn($ocLazyLoadProvider,Modules_Config){

     　　 　 　  　　  　 $ocLazyLoadProvider.config({

     　　 　 　  　　  　 debug:false,

     　　 　 　  　　  　 events:false,

     　　 　 　  　　  　 modules:Modules_Config

  　　 　 });

}; 

The above is the configuration process of initializing dynamic loading.

The next step is to establish the route:

"use strict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
 $urlRouterProvider.otherwise("/main");
 $stateProvider
 .state("main",{
 url:"/main",
 templateUrl:"views/main.html",
 controller:"mainCtrl",
 controllerAs:"main",
 resolve:{
 deps:["$ocLazyLoad",function($ocLazyLoad){
 return $ocLazyLoad.load("controllers/main.js");
 }]
 }
 })
 .state("adminUser",{
 url:"/adminUser",
 templateUrl:"views/adminUser.html",
 controller:"adminUserCtrl",
 controllerAs:"adminUser",
 resolve:{
 deps:["$ocLazyLoad",function($ocLazyLoad){
 return $ocLazyLoad.load("controllers/adminUser.js");
 }]
 }
 })
};

Finally, two HTML page files and two JS files are built in the corresponding directory according to the route configuration for testing

main.html

<div>
 {{main.value}}
</div>

adminUser.html

<div>
 {{adminUser.value}}
</div>

main.js

/**
 * mainCtrl
 * Created by pkcms.cn on 2016/6/24.
 */
(function () {
 "use strict"
 app.controller("mainCtrl", mainCtrlFn);
 function mainCtrlFn() {
 this.value = "Hello World";
 }
}())

adminUser.js

 /**
 * adminUserCtrlFn
 * Created by pkcms.cn on 2016/6/24.
 */
(function () {
 app.controller('adminUserCtrl',adminUserCtrlFn);
 function adminUserCtrlFn() {
 this.value = "welcome to admin user";
 }
}());

demo Download: angularjs-oclazyload_jb51. rar