Detailed explanation of AngularJS implements dynamic (lazy) loading modules and dependencies through ocLazyLoad

Recently, I am using AngularJS and found that the things on AngularJS are too basic and many things have not been mentioned, such as today's optimization problem about the front-end, lazy loading. When implementing address distribution through routing, load the files you need through lazy loading mode, such as the related controller, which is js, which is conducive to increasing the burden of first loading.

The following is a lazy loading implementation process.

The implementation process mainly refers to quoting 3 main JS files:

<script src="angular/1.4.8/angular/"></script>
<script src="angular/ui-router/release/"></script>
<script src="angular/oclazyload/src/"></script>

Then, through the APP configuration, the dependent script is injected:

var app = ('pkcms', ["", ""]);

(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",

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

　 = $;

　 = $;

　 = $;

　 = $;

　 = $;

　 = $;

 }]);

// Load other script files as modularly
('Modules_Config', [

　{

　name: 'treeControl',

　serie: true,

 files: [

　"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14."

　]&lt;br&gt;}]);

(["$ocLazyLoadProvider","Modules_Config",routeFn]);

function routeFn($ocLazyLoadProvider,Modules_Config){

　$({

　debug:false,

　events:false,

　modules:Modules_Config

　});

};

The above is the configuration process for initializing dynamic loading.

Next, create the route:

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

Finally, build 2 HTML page files and 2 JS files in the corresponding directory according to the routing configuration.

<div>
 {{}}
</div>



<div>
 {{}}
</div>

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

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

demo download:angularjs-oclazyload_jb51.rar

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.