oclazyload

순서.
Angular 모듈 화 는 정말 갈 길이 멀 군요. 주입 을 이용 하여 app. js 와 같은 모듈 세트 모듈 을 실현 할 수 있 습 니 다.

angular.module('myApp', ['A', 'B', 'C', ...])

A.js

angular.module('A', ['A.1', 'A.2', 'A.3', ...])

B.js

angular.module('B', ['B.1', 'B.2', 'B.3', ...])

게다가 ui - router, 내장 보기, 예 를 들 어 호랑이 에 게 날 개 를 달 아 주 는 것 과 같은 문제 가 있 습 니 다. index. html 에서 모든 js 를 불 러 와 야 합 니 다. 모듈 이 많 으 면 귀 찮 습 니 다. 모듈 에 서브 모듈 의 js 를 불 러 올 수 있 었 으 면 좋 겠 습 니 다.
oclazyload
공식 문서https://oclazyload.readme.io/docs npm install oclazyload 설치 index. html 도입

  <script src="node_modules/oclazyload/dist/ocLazyLoad.js">script>

다음은 관건 이다.
모듈 A 에 대하 여

angular.module('student', [
  'oc.lazyLoad',
  'ui.router'])
  .config(function ($ocLazyLoadProvider) {
    $ocLazyLoadProvider.config({
      modules: [{
        debug: true,
        name: 'A.1',
        files: ['app/A/1/1.js']
      }, {
        debug: true,
        name: 'A.2',
        files: ['app/A/2/2.js']
      }]
    })
  })
  .config(function ($stateProvider) {
    $stateProvider
      .state('A', {
        url: '/A',
        templateUrl: 'app/A/A.html',
        controller: 'ACtrl',
        resolve: {
          lazy: function ($ocLazyLoad) {
            return $ocLazyLoad.load([
              'A.1',
              'A.2']);
          }
        }
      })
    })

lazyload 를 실현 할 수 있 습 니 다.