Unconventional approach to AngularJS module management problems

  • 2020-06-03 05:46:31
  • OfStack

Cause 1.

I worked as winform directly. I had the honor to receive a project of node.js,express,angularJS, etc. from the hands of a great god, which collected numerous open source frameworks.

Problem 2.

BootStrap modal box is required for certain environments. I am learning win. The natural idea is to integrate the boosStrp modal box into one universal thing, with four calls...

patial is used to reference the dialog file, and the dialog itself USES anglurJS for server-related communication.

As it turns out, it works well with only one, but only one works well with multiple references (calling different data).

3. The analysis

After checking 1 bit of information, I realized that the call of ES25en.bootstrap can only be executed once on the page, and it is not useful to execute more than one. However, I wrote all the angular.module as a separate JS file, and each JS file finally calls ES31en.bootstrap, so it will die naturally.

4. Looking forward to

Therefore, I want to have a resolution mechanism, so that I can freely partial various files into the page, and js files are not repeated references, angulurJS can be executed perfectly;

5. Solve

Dear friends -- it's a little gross, but it's absolutely direct;

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

Don't say, paste the code

On the frame page (layout...) head refers to the file angulurinit.js with the following code:


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);

};

Each anglur.ES60en module will be within the


angular.bootstrap(document, [modulename]);

replace


  Confirm(modulename);

In layout (layout page? I don't know what it's called, but it's the common frame page.) At the end, add angulur.js.


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

Hey hey ~~ I'm sick... Are you sick?

This is the end of this article, I hope you enjoy it.


Related articles: