Unconventional Solution to AngularJS module management problems _ AngularJS

Source: Internet
Author: User
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:

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']);
})();

Hey ~~ I'm sick... Is it disgusting to you?

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.