Example analysis of Angularjs loading JS as needed

When writing NG applications, it is often necessary to encapsulate a large number of instructions. For some instructions, may be other plug-ins changed, this time will be introduced to the relevant JS. This is a very simple application. It is also easier to achieve.

The pseudocode is as follows: (dependent on echarts and CKEditor for example)

<div ckeditor></div>
<div echarts></div>
<script src= "Jquery.js" ></script>
<script src= "Ckeditor.js" ></script>
<script src= "Echarts.js" ></script>
<script src= "Angular.js" ></script>
<script>
var app = Angular.module (' app ', []);
App.directive (' CKEditor ', function () {...});
App.directive (' Echarts ', function () {...});
.....
</script>

This looks really ok. It does run successfully.

But is it really good to apply in a project?

I personally think this is not good, mainly in the following:

When I do not need this page to ckeditor this thing, that is, I want to delete this line of code

<div ckeditor></div>

Now I'm going to manually delete it.

<script src= "Ckeditor.js" ></script>

Otherwise it will cause rubbish. Because I can't even use it.

Another problem is that I have a background of dozens of pages, more than 10 pages to use CKEditor. I'm not going to write it many times.

<script src= "Ckeditor.js" ></script>

You TM this is not nonsense. But it's a bit complicated to maintain this over and over again in large projects. There is no better way ...

I think some of the root of the problem is actually because there is no solution to use this command time to load related JS, at this time, we need to design a, when the instructions to load related JS way. Take Echarts as an example:

Directivesapp.directive (' Bdzecharts ', function () {
return {
Restrict: ' EA ',
Template: ' <div></div> ',
Replace:true,
Scope: {
Option: ' =? '
},
Link:function (scope, element, Attrs) {

Scope. $watch (' option ', function () {
var getchart = function () {
var MyChart = Echarts.init (element[0]);
Mychart.setoption (scope.option);
};

if (!window.echarts) {
$.getscript ('/assets/vendor/echarts/2.0.3/build/echarts-plain.js ', function () {

Getchart ();
});
}else{
Getchart ();
}
})

}
}
});

The important code is actually just a few words:

if (!window.echarts) {
$.getscript ('/assets/vendor/echarts/2.0.3/build/echarts-plain.js ', function () {

Getchart ();
});
}else{
Getchart ();
}
Dynamic to load his related JS. So what does this window.echarts do?

Because sometimes, we use a page a few times this instruction, in fact this JS has been loaded, there is no need to repeatedly load it. That's why it's the only sentence.

I'll say a few words at the end. Because the $.getscript is asynchronous. So in fact this JS in the load may also appear to Judge Window.echarts actually did not. The best way, if you want to fully determine whether window.echarts exists, can be loaded synchronously.

if (!window.echarts) {
$.ajax ({
Async:false,
URL: "/assets/vendor/echarts/2.0.3/build/echarts-plain.js",
DataType: "Script",
Success:function () {
Getchart ();
}
});

}else{
Getchart ();
}

This will be a perfect solution to load on demand.

Now you think, you add a command to a page, or delete a command, you do not need to manually increase the deletion of some JS, cool bar