Angularjs dynamic loading module and dependent method analysis _angularjs

This article illustrates the ANGULARJS dynamic loading module and the dependent method. Share to everyone for your reference, specific as follows:

Objective

Since Angularjs is a single page application framework, under normal circumstances, all CSS and JavaScript files will be loaded in when the page is accessed. When there are not many files, the page start speed will not affect too much. However, once the number of files is too large or the load of the Third-party library is larger, it will affect the page start speed. Therefore, the application of large scale, more files or the loading of the Third-party library is relatively large, the use of dynamic loading JS or dynamic loading module will greatly enhance the starting speed of the page. This article will describe how to use oclazyload to implement dynamic loading.

Get ready

Angularjs dynamic loading relies on Third-party libraries: Oclazyload. Oclazyload is a third-party library that supports ANGULARJS dynamically loading module, service, directive, and static files.

Install Oclazyload

Can be installed via NPM or bower

NPM Install oclazyload
Bower Install Oclazyload

Add Oclazyload module to your application

Angular.module (' myApp ', [' oc.lazyload ']);

Configure Oclazyload

You can configure the $ocLazyLoadProvider in the config function, and 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 turn on debug mode. Boolean value, which is false by default. When debug mode is turned on, the $ocLazyLoad prints out all errors to the console console.
Events: When you dynamically load the module, the $ocLazyLoad broadcasts the corresponding event. Boolean value, which defaults to false.
Modules: Used to define the modules you need to dynamically load. Defining the name of each module requires unique.
Modules must be in the form of an array , where files must also be in the form of an array , even if only one file needs to be loaded

Load module in route

. config ([' $routeProvider ', function ($routeProvider) {
    $routeProvider. Otherwise ('/index ');
    $routeProvider. When ('/index ', {
      templateurl: ' index.html ',
      controller: ' Indexcontroller ',
      resolve: {// Properties in resolve if the Promise object is returned, then resolve will execute Loadmyctrl before the view is loaded
        : [' $ocLazyLoad ', function ($ocLazyLoad) {
          // Here you can delay loading any file or just the predefined modules return
          $ocLazyLoad. Load (' testmodule ');//Load the Testmodule
          /*return $ just defined Oclazyload.load ([  ///If you want to load multiple module, you need to write an array of
            ' Testmodule ',
            ' Mainmodule '
            ]);
      }
    })
}])

The properties of the resolve settings can be injected into the controller. If the resolve returns the Promise object, they will be executed before the controller loads and the $routechangesuccess is triggered.

$ocLazyLoad is to use this principle hack, dynamic loading.

The value of the 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, is a function that is injected into a controller or a promise object that can be resolve.

With such a configuration, Angularjs dynamic loading modules and dependencies can be realized. But Oclazyload provides richer functions, not only dynamic loading modules and dependencies, but also dynamic loading of service,diretive. More features can be accessed [oclazyload official website] (Https://oclazyload.readme.io)

I hope this article will help you to Angularjs program design.