Load ocLazyLoad Sample on Demand in AngularJS

1. Preface

ocLoayLoad is the module on-demand loader for AngularJS. 1 In small projects, there is no big problem in downloading all the resources as soon as the page is loaded for the first time. However, as our website grows larger and larger, this loading strategy makes the initialization speed of network speed slower and slower, and the user experience is not good. 2, sub-module loading is easy for team cooperation and reduces code conflicts.

2. Objects loaded on demand

Each Controller module, Directive module, Server module and template template are actually some. js files or. html files.

3. Scenarios of loading on demand

1 Route Load (resolve/uiRouter)

resolve based on uiRouter is a series of operations performed before loading controller and template, which helps us initialize the 1 view we are going to. controller is instantiated only if be solved (operation complete). Therefore, we can load the controller we need in the resolve step.

  $stateProvider
    .state('index', {
      url: '/',
      views: {
        'lazyLoadView': {
          templateUrl: 'partials/main.html',
          controller: 'AppCtrl'
        }  
      },
      resolve: {
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){
          return $ocLazyLoad.load('js/AppCtrl.js')
        }]
      }
    })

Among them, 'js/AppCtrl. js' contains one controller we need

angular.module('myApp')
.controller('AppCtrl', ['$scope', function($scope){
//...
}])

2 Dependent loading

Import 1 series of modules we need in dependencies (there is a layer '[]' that conforms to oh)

angular.module('gridModule', [[
  'bower_components/angular-ui-grid/ui-grid.js',
  'bower_components/angular-ui-grid/ui-grid.css'
]]).controller('GridModuleCtrl', ['$scope', function($scope){
  //...
}])

3 Dynamic loading in Cotroller

angular.module('myApp')
.controller('AppCtrl', ['$scope','$ocLazyLoad', function($scope, $ocLazyLoad){
  $scope.loadBootstrap = function(){
    $ocLazyLoad.load([
     'bower_components/bootstrap/dist/js/bootstrap.js',
     'bower_components/bootstrap/dist/css/bootstrap.css'
    ])
  }
  var unbind = $scope.$on('ocLazyLoad.fileLoaded', function(e, file){
    $scope.bootstrapLoaded = true;
     console.log(' Download boot Finish ');
     unbind();
  })
}])

4 template contains loading (config)

How to deal with controller nested in the html template we loaded? This requires the oc-lazy-load instruction and the configuration of $ocLazyLoadProvider

/*template A.html*/
<h1>hi i am hzp </h1>
  <div oc-lazy-load="gridModule">
    <div ng-controller="GridModuleCtrl">
      <span>{{test}}</span><br/>
      <div ui-grid="gridOptions" class="gridStyle"></div>
    </div>
  </div>
</div>


  $ocLazyLoadProvider.config({
    modules: [{
      name: 'gridModule',
      files: [
        'js/gridModule.js'
      ]
    }]
  })

4. How to organize load on demand

Routing, differentiated by function, packaged into different multiple or single controller. directive. server modules