AngularJS dynamic loading module and dependency method analysis

The example in this article describes the method of dynamically loading modules and dependencies in AngularJS. Share it with everyone for your reference, the details are as follows:

Foreword

Since AngularJS is a single-page application framework, under normal circumstances, all CSS and JavaScript files will be loaded when accessing the page. When there are not many files, the page startup speed will not have much impact. But once there are too many files or the loaded third-party library is relatively large, it will affect the page startup speed. Therefore, when the application scale is large, the number of files is relatively large, or the third-party libraries loaded are relatively large, dynamically loading JS or dynamically loading modules will greatly improve the startup speed of the page. This article will introduce how to use ocLazyLoad to implement dynamic loading.

Prepare

AngularJS dynamic loading relies on a third-party library: ocLazyLoad. ocLazyLoad is a third-party library that supports AngularJS to dynamically load modules, services, directives, and static files.

Install ocLazyLoad

Can be installed through npm or bower

npm install oclazyload
bower install oclazyload

Add ocLazyLoad module to your application

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

Configure ocLazyLoad

Configure $ocLazyLoadProvider in the config function, The configuration file is as follows

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

debug: used to enable debug mode. Boolean value, default is false. When debug mode is enabled, $ocLazyLoad will print out all errors to the console.
events: When you dynamically load a module, $ocLazyLoad will broadcast the corresponding event. Boolean value, defaults to false.
modules: used to define the modules you need to load dynamically. Each module must have a unique name.
Modules must be in the form of an array, and files must also exist in the form of an array, even if only one file needs to be loaded

Load the module in the route

.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'
            ]);*/
        }]
      }
    })
}])

The properties set by resolve can be injected into the Controller. If resolve returns promise objects, they will be executed before the controller is loaded and $routeChangeSuccess is triggered.

$ocLazyLoad uses this principle hack to perform dynamic loading. The value of

resolve can be:

* key, the value of key is the name of the dependency that will be injected into the Controller;
* factory, which can be the name of a service or a return value, which will A function that is injected into the controller or a promise object that can be resolved.

Through this configuration, AngularJS can dynamically load modules and dependencies. However, ocLazyLoad provides richer functions, not only dynamic loading of modules and dependencies, but also dynamic loading of services, direct, etc.