AngularJS 通過 ocLazyLoad 實現動態（懶）加載模塊和依賴

　　最近在使用AngularJS，發現AngularJS菜鳥教程上的東西太過於基礎，很多東西都沒有提及，比如今天的一個關於前端的優化問題，懶加載。通過路由實現地址分發的時候，再通過懶加載模式加載你所需的文件，比如是相關的controller，就是js，這樣有利於提高首次加載的負擔。

　　下面就是一個懶加載的實現過程。

　　實現的過程主要是引用3個主要的JS文件：

　　　　

　　　　<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>

　　

　　然后通過 APP 配置，將依賴的腳本進行注入操作：

　　　　　

　　　　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;
　　　　 　　}]);
　　　　　　// 按模塊化加載其他的腳本文件
　　　　　　　　app.constant('Modules_Config', [
 　　　　　　　　{
 　　　　　　　　　　name: 'treeControl',
 　　　　　　　　　　serie: true,
　　　　　　　　　　 files: [
 　　　　　　　　　　　　"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
 　　　　　　　　　　]
}]);
　　　　　　　　app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
　　　　　　　　function routeFn($ocLazyLoadProvider,Modules_Config){
 　　　　　　　　$ocLazyLoadProvider.config({
 　　　　　　　　debug:false,
 　　　　　　　　events:false,
 　　　　　　　　modules:Modules_Config
 　　　　});
　　};

　　　　以上是初始化動態加載的配置過程。

　　接着是建立路由：

　　

"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");
 }]
 }
 })
};

　　最后是按路由配置的在對應目錄下建2個HTML頁面文件和2個JS文件用做測試
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";
 }
}());

github url :https://github.com/366065186/angularjs-oclazyload

此文章來自：PKCMS博客 » AngularJs 通過 ocLazyLoad 實現動態（懶）加載模塊和依賴