Home >Web Front-end >JS Tutorial >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 modulewith
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:
Hehe~~ I feel sick. . . Does it make you sick?
The above is the entire content of this article, I hope you all like it.