Unconventional solution to AngularJS module Management Problems

Unconventional solution to AngularJS module Management Problems

This article mainly introduces the unconventional management methods for AngularJS module management. It is a helpless action. I will share it with my friends for your reference.

1. Cause

I have been doing winform myself, and I am lucky to have a node in my hand. js, express, and angularJS collect a large number of open-source framework projects, and catch up with them. As a result, I learned how to organize and reconstruct the Code with my previous thoughts;

2. Problem

In a few environments, you need to use the BootStrap modal box. Do you want to learn win .. Naturally, the boosStrp modal box is encapsulated into a common thing and called everywhere...

Therefore, patial is used to reference the dialog box file. The dialog box itself uses anglurJS for server-related communication.

Later, it was found that it was easy to use when only one application was used. If multiple references (calling different data), there would be only one benefit ..

3. Analysis

I checked some information to understand, angular. the bootstrap call can only be executed once on the page. It is not easy to execute multiple times. the module is written into a separate JS file, and each JS file finally calls angular. therefore, bootstrap will naturally fail;

4. Expectation

Therefore, I want to have a solution that allows me to randomly add various partial files to the page without repeated references between js files. angulurJS can also be executed perfectly;

5. Solution

Dear friends, although this method is a bit disgusting, it is absolutely effective;

The idea is to dynamically maintain all AngularJS modules in a Global Array and then perform dynamic loading.

Don't talk about it. paste the code

REFERENCE The angulurinit. js file at the head of the Framework page (layout...). The Code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Array. prototype. indexOf = function (val ){ For (var I = 0; I <this. length; I ++ ){ If (this [I] = val) return I; } Return-1; }; Var jsModules = new Array (); Function Confirm (val ){ If (jsModules. indexOf (val)>-1) Return; Else JsModules. push (val );   };

In each anglur. js module

The Code is as follows:

Angular. bootstrap (document, [modulename]);

Replace

The Code is as follows:

Confirm (modulename );

In layout (layout page? I don't know what it is, but it is the public framework page.) Add the angulur. js file at the end of the page. The Code is as follows:

The Code is as follows:

(Function (){

Var app = angular. module ('app', jsModules );

Angular. bootstrap (document, ['app']);

})();

The above is all the content of this article. I hope you will like it.