這篇文章將為大家詳細(xì)講解有關(guān)AngularJS怎么通過ocLazyLoad實現(xiàn)動態(tài)懶加載模塊和依賴，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元息烽做網(wǎng)站,已為上家服務(wù),為息烽各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

實現(xiàn)的過程主要是引用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 配置，將依賴的腳本進(jìn)行注入操作：

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"

　　　　　　　　　]<br>}]);

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

　　　　　　function routeFn($ocLazyLoadProvider,Modules_Config){

　　　　　　　$ocLazyLoadProvider.config({

　　　　　　　debug:false,

　　　　　　　events:false,

　　　　　　　modules:Modules_Config

　　　});

};

以上是初始化動態(tài)加載的配置過程。

接著是建立路由：

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

最后是按路由配置的在對應(yīng)目錄下建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";
 }
}());

關(guān)于“AngularJS怎么通過ocLazyLoad實現(xiàn)動態(tài)懶加載模塊和依賴”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞名稱：AngularJS怎么通過ocLazyLoad實現(xiàn)動態(tài)懶加載模塊和依賴
文章位置：http://chinadenli.net/article18/jgihgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、電子商務(wù)、營銷型網(wǎng)站建設(shè)、小程序開發(fā)、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)