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