AngularJs dynamically loads the Controller solution based on the accessed page _ AngularJS

This article mainly introduces AngularJs's solution for loading Controller dynamically based on the accessed page. If you need it, you can refer to using Ng as a simple page application ), it is hoped that all the pages in the station will use Ng's Route and try not to use location. href, but there are many advantages for such a webapp, but the disadvantage is that when your webapp grows over time, more users, more functions, and more controllers, you have to load all controllers as global modules so that you can route to any other page after pressing F5 on any page in the station, the controller cannot be found. Loading all controllers slows down the page opening speed for the first time on the mobile phone end. Today, I will share with you how I have improved this shortcoming, implement modular loading of Controller

App. js

The Code is as follows:

App. config (function ($ controllerProvider, $ compileProvider, $ filterProvider, $ provide ){
App. register = {
Controller: $ controllerProvider. register,
Directive: $ compileProvider. directive,
Filter: $ filterProvider. register,
Factory: $ provide. factory,
Service: $ provide. service
};
});

In the route to block the need to load the js, loaded successfully and then continue, do not know what $ script is please click http://dustindiaz.com/scriptjs

The Code is as follows:

$ RouteProvider. when ('/: In in ',{
TemplateUrl: function (rd ){
Return 'in in/'+ rd. plugin +'/index.html ';
},
Resolve :{
Load: function ($ q, $ route, $ rootScope ){
Var deferred = $ q. defer ();
Var dependencies = [
'Plugin/'+ $ route. current. params. plugin +'/controller. js'
];
$ Script (dependencies, function (){
$ RootScope. $ apply (function (){
Deferred. resolve ();
});
});
Return deferred. promise;
}
}
});

Controller. js

The Code is as follows:

App. register. controller ('myininctrl ', function ($ scope ){
...
});

Index.html

The Code is as follows:

...

In this way, we can dynamically load the js that the route depends on when implementing the route, but generally there are many route in our webapp, each of which has to write a bunch of code, it is both ugly and difficult to maintain. We may wish to optimize it.

App. js

The Code is as follows:

App. config (function ($ controllerProvider, $ compileProvider, $ filterProvider, $ provide ){
App. register = {
Controller: $ controllerProvider. register,
Directive: $ compileProvider. directive,
Filter: $ filterProvider. register,
Factory: $ provide. factory,
Service: $ provide. service
};
App. asyncjs = function (js ){
Return ["$ q", "$ route", "$ rootScope", function ($ q, $ route, $ rootScope ){
Var deferred = $ q. defer ();
Var dependencies = js;
If (Array. isArray (dependencies )){
For (var I = 0; I <dependencies. length; I ++ ){
Dependencies [I] + = "? V = "+ v;
}
} Else {
Dependencies + = "? V = "+ v; // v is the version number.
}
$ Script (dependencies, function (){
$ RootScope. $ apply (function (){
Deferred. resolve ();
});
});
Return deferred. promise;
}];
}
});

The Code is as follows:

$ RouteProvider. when ('/: In in ',{
TemplateUrl: function (rd ){
Return 'in in/'+ rd. plugin +'/index.html ';
},
Resolve :{
Load: app. asyncjs ('plugin/controller. js ')
}
});

At this point, you only need to set the original controller. js is split into multiple js by module and then add module dependencies for route to increase the loading speed. This method can be used not only for controller On-Demand Loading, but also for other js modules, such as jquery. ui. datepicker. for date selection plug-ins such as js, add

The Code is as follows:

$ RouteProvider. when ('/: In in ',{
TemplateUrl: function (rd ){
Return 'in in/'+ rd. plugin +'/index.html ';
},
Resolve :{
Load: app. asyncjs (['plugin/controller. js', 'plugin/jquery. ui. datepicker. js'])
}
});

You can

PS: $ script can be used to determine the js to be loaded. If it has been loaded before, it will directly return success, that is, it will only request jquery when it first enters the date selection interface. ui. datepicker. js will not be requested after exiting and re-entering.