AngularJsはocLazyLoadによって動的(怠け者)ロードモジュールと依存性を実現する

最近ずっとAngularJsの実践を勉強しているうちに、以前も勉強していましたが、いつも仕事の面でいろいろな原因で断続的で、前もずっと見ていましたがなかなか手に入らない感じで、自分の心が高すぎて一気に身につけることができたのかもしれません.もう一つの原因は、以前JQUERYのパターンに慣れていたことです.AngularJsの下ではあまり適応していないので、学習の過程で多くの問題に直面しています.今日解決した動的ロードの問題のように、AngularJsの通常のチュートリアルの本ではあまり言及されていません.あるものはありません.通常の使い捨てロード方式で、この方式は教育と小型プロジェクトでしか使用できません.ダイナミック(怠け者)ロードを使用するのが望ましい.この方式のメリットは経験のあるプログラマーはもちろん知っています.
今日は决心してこの问题を解决して、この解决の过程はまた私の前の1人の先端の同僚に感谢しなければならなくて、彼は私より早くAngularJsを学びます.彼は自分のブログにも記録していますが、彼の上の記録にはC#言語の要素が含まれていて、中には見えない場合があります.私はここで直接純粋な先端言語で整理します.
さて、本題に入ります.AngularJsで動的(怠け者)ロードを実現するには、主に3つのプライマリJSファイルと1つの依存スクリプトに依存します.
実装の過程は主に3つの主要なJSファイルを引用することである
 <span class="pln"style="color:rgb(0,0,255);"> </span><span class="atn"style="color:rgb(0,170,0);">src</span><span class="pun"style="color:rgb(0,170,0);">=</span><span class="atv"style="color:rgb(194,143,91);">"angular/1.4.8/angular/angular.min.js"</span><span class="tag"style="color:rgb(249,38,89);">>
<span class="pln"style="color:rgb(0,0,255);"> </span><span class="atn"style="color:rgb(0,170,0);">src</span><span class="pun"style="color:rgb(0,170,0);">=</span><span class="atv"style="color:rgb(194,143,91);">"angular/ui-router/release/angular-ui-router.min.js"</span><span class="tag"style="color:rgb(249,38,89);">>
<span class="pln"style="color:rgb(0,0,255);"> </span><span class="atn"style="color:rgb(0,170,0);">src</span><span class="pun"style="color:rgb(0,170,0);">=</span><span class="atv"style="color:rgb(194,143,91);">"angular/oclazyload/src/ocLazyLoad.min.js"</span><span class="tag"style="color:rgb(249,38,89);">>
そして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
 
{{main.value}}

adminUser.html
 
{{adminUser.value}}

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
AngularJsはocLazyLoadを通じて動的(怠け者)ロードモジュールと依存を実現する