AngularJS 는 ocLazyLoad 를 통 해 동적(게 으 름)로드 모듈 과 의존 을 실현 합 니 다.

최근 에 AngularJS 를 사용 하고 있 는데 AngularJS 초보 튜 토리 얼 에 있 는 것 이 너무 기본 적 이 고 많은 것 이 언급 되 지 않 은 것 을 발견 했다.예 를 들 어 오늘 의 전단 최적화 문제,게 으 름 로드 등 이다.주 소 를 통 해 배 포 를 실현 할 때 게 으 른 로 딩 모드 를 통 해 필요 한 파일 을 불 러 옵 니 다.예 를 들 어 관련 contrller,즉 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"

　　　　　　　　　]<br>}]);

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

마지막 으로 경로 에 따라 설 정 된 디 렉 터 리 에 HTML 페이지 파일 2 개 와 JS 파일 2 개 를 만들어 테스트 합 니 다.
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 다운로드:angularjs-oclazyload_jb51.rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.