Talking about some pits of angular lazy load _angularjs

It's written in front.

Recently in the work of exposure to angular modular packaging loaded some of the content, feeling the middle of a few holes, marking this.

Project background:

The project mainly uses the ANGULARJS as the front-end frame, when the project is released, all the front-end scripts are packaged into a file, loaded at the time of the first visit of the page, causing the page to start loading slowly, on the basis of which to load on demand, that is, only when the user accesses a module, The script for the module will not load.

Tool class:

The project uses grunt packaging according to the AMD specification, uses Grunt-contrib-requirejs to compress the merge module, simultaneously uses the oclazyload to complete the angular module lazy loading.

Project Process:

Module packaging

The code in the project is basically written according to the AMD specification, using Grunt-contrib-requirejs to compress each module into a JS file.

problem One: in the project code, each module will rely on the third Third-party/Project public service/project public directives, if this part of the content is not processed, Grunt-contrib-requirejs will be in the compression of each module, Load all the modules it relies on, and then compress them into the same JS file.

Response: Compress the third third-party/public services and directives into three modules, and then remove them using "exclude" in the packaging scripts for each module. The following illustration shows:

It should be noted that the module name of the public module requires a JS file with the same name under the corresponding path

Load on Demand

After the script is packaged as a JS file, the next step is to load the different modules according to the user request, the project uses Ui-router to handle the route jump, can start from the route to complete the lazy load of the module.

The specific method is: When the user action route jump, according to the user to jump to the state, To load the module to which this state belongs. Based on this, a mapping between the state and the module needs to be added, the first time using Requirejs to load, the discovery script can be loaded in, but angular registered controller/services/ Filter and so on do not work. The survey found that services such as controllers registered after the bootstrap method was invoked are no longer invoked angular. Based on this, the introduction of the Oclazyload to load (oclazyload to the angular source some injection modification).

So far, the basic implementation is loaded on demand, but there are several questions:

Project dependencies between modules

Because there are some modules between the project has strong dependencies, the processing of which is to add the dependencies between the modules in the configuration file, before loading a module to see if there is a dependency module, if any, the priority to load its dependent modules, to rely on the module after loading completed before loading the current module

instruction lazy load;

Angular can be implemented by $compile to achieve the interdependence between the instructions, the processing of which is to configure the command name and instruction module dependencies, when the use of an instruction, first to load its modules, and then execute the compilation method. This solution solves most of the command dependencies.

The location of the directive. Most of the items used are long pages, each long page is divided into several regions, each of which is an instruction. There is a problem when using interception, that is, the length of each instruction loading time is different, the first return instruction will be append to the DOM, which leads to the uncertainty of page layout. The solution is, Use the Deffer mechanism to add execution to the DOM tree after all instructions have been loaded/compiled.

Dependencies between directives: There are also project dependencies between directives, and the solution is to merge the interdependent instructions into one module, Packaged in the same script file. This scheme solves most of the instruction dependencies, but it does not solve the dependencies in the initialization process. When a directive is compiled, its dependent directives have not yet been compiled. For such a super Special example, the script and template are loaded only when the page is initialized.

These are the problems that are encountered throughout the project process, basic every advance is to step on the pit, a lot of things are the first contact, feeling or learned something. The solution to many of the problems may not be clear. All of the above questions have been encountered by other people, as long as the use of good search engines, plus their own good reading Understand other people's code. All problems can be solved satisfactorily.

About this article angular lazy load some of the pits are small parts to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.