Unconventional ways to handle AngularJS module management issues_AngularJS

1.Cause

I have been working on winform, and I was lucky enough to take over a project from a master that integrates many open source frameworks such as node.js, express, angularJS, etc., and quickly put it on the shelves, so I learned while using my past ideas. Organize and refactor code;

2. Question

In certain environments, it is necessary to use BootStrap's modal box. Are we learning from win? . Naturally, I thought of integrating the boostStrp modal box into a universal thing and calling it everywhere. . .

So the dialog file is referenced using patial, and the dialog box itself uses anglurJS for server-related communication.

Later I found that it works well when only one is used. If it is referenced multiple times (calling different data), then only one will work. .

3. Analysis

After checking some information, I realized that the call angular.bootstrap can only be executed once on the page. If executed multiple times, it will not be useful. And I previously wrote all angular.module into separate JS files, each time A JS file finally calls angular.bootstrap, so it will naturally fail;

4. Looking forward to it

So, I want to have a solution mechanism that allows me to partially add various files to the page at will, and the js files will not be repeatedly referenced, and AngulurJS can also be executed perfectly;

5.Solution

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

The idea is to dynamically maintain all AngularJS modules in a global array and then load them dynamically

No more talking, just post the code

Reference the angulurinit.js file at the head of the frame 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);

};

Replace

in each angul.js module

Copy code The code is as follows:

angular.bootstrap(document, [modulename]);

Replace

with

Copy code The code is as follows:

Confirm(modulename);

Add the angulur.js file at the end of the layout (layout page? I don’t know what it’s called, anyway, it’s the public frame page). The code is as follows:

Copy code The code is as follows:

(function () {
var app = angular.module('app', jsModules);
Angular.bootstrap(document, ['app']);
})();

Hehe~~ I feel sick. . . Does it make you sick?

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