AngularJS 동적 로딩 모듈 및 종속성 메서드 분석

이 기사의 예에서는 AngularJS에서 모듈과 종속성을 동적으로 로드하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

머리말

AngularJS는 단일 페이지 애플리케이션 프레임워크이므로 일반적인 상황에서는 모든 CSS 및 JavaScript 파일이 다음과 같이 포함됩니다. 페이지에 액세스하는 중입니다. 파일이 많지 않으면 페이지 시작 속도는 큰 영향을 미치지 않습니다. 그러나 파일이 너무 많거나 로드된 타사 라이브러리가 상대적으로 크면 페이지 시작 속도에 영향을 미칩니다. 따라서 애플리케이션 규모가 크거나 파일 수가 상대적으로 크거나 로드된 타사 라이브러리가 상대적으로 큰 경우 JS를 동적으로 로드하거나 모듈을 동적으로 로드하면 페이지의 시작 속도가 크게 향상됩니다. 이 기사에서는 ocLazyLoad를 사용하여 동적 로딩을 구현하는 방법을 소개합니다.

준비

AngularJS 동적 로딩은 타사 라이브러리인 ocLazyLoad에 의존합니다. ocLazyLoad는 모듈, 서비스, 지시문 및 정적 파일을 동적으로 로드하기 위해 AngularJS를 지원하는 타사 라이브러리입니다.

ocLazyLoad 설치

npm 또는 bower를 통해 설치 가능

npm install oclazyload
bower install oclazyload

애플리케이션에 ocLazyLoad 모듈 추가

angular.module('myApp',['oc.lazyLoad']);

ocLazyLoad 구성

config 함수에서 $ocLazyLoadProvider를 구성할 수 있으며 구성 파일은 다음과 같습니다

.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider){
  $ocLazyLoadProvider.config({
    debug: true,
    events: true,
    modules: [
      {
        name: 'TestModule',
        files: ['test.js']
      }
    ]
  })
}])

디버그: 디버그 모드를 활성화하는 데 사용됩니다. 부울 값, 기본값은 false입니다. 디버그 모드가 활성화되면 $ocLazyLoad는 모든 오류를 콘솔에 인쇄합니다.
이벤트: 모듈을 동적으로 로드하면 $ocLazyLoad가 해당 이벤트를 브로드캐스트합니다. 부울 값, 기본값은 false입니다.
modules: 동적으로 로드해야 하는 모듈을 정의하는 데 사용됩니다. 각 모듈에는 고유한 이름이 있어야 합니다.
모듈은 배열 형태여야 하며, 파일이 하나만 로드되더라도 파일도 배열 형태로 존재해야 합니다.

라우트에 모듈 로드

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise('/index');
    $routeProvider.when('/index', {
      templateUrl: 'index.html',
      controller: 'IndexController',
      resolve: { // resolve 里的属性如果返回的是 promise对象，那么resolve将会在view加载之前执行
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
          // 在这里可以延迟加载任何文件或者刚才预定义的modules
          return $ocLazyLoad.load('TestModule'); //加载刚才定义的TestModule
          /*return $ocLazyLoad.load([  // 如果要加载多个module，需要写成数组的形式
            'TestModule',
            'MainModule'
            ]);*/
        }]
      }
    })
}])

resolve로 설정한 속성을 컨트롤러에 주입할 수 있습니다. Resolve가 Promise 객체를 반환하는 경우 컨트롤러가 로드되고 $routeChangeSuccess가 트리거되기 전에 해당 객체가 실행됩니다.

$ocLazyLoad는 이 원칙 핵을 사용하여 동적 로딩을 수행합니다.

resolve의 값은 다음과 같습니다.

* 키, 키의 값은 컨트롤러에 주입될 종속성의 이름입니다.
* 팩토리는 다음과 같습니다. 서비스 이름, 컨트롤러에 주입되는 함수인 반환 값일 수도 있고 해결 가능한 Promise 객체일 수도 있습니다.

이 구성을 통해 AngularJS는 모듈과 종속성을 동적으로 로드할 수 있습니다. 그러나 ocLazyLoad는 모듈 및 종속성의 동적 로딩뿐만 아니라 서비스의 동적 로딩, 직접 로딩 등 더욱 풍부한 기능을 제공합니다.