ANGULARJS dynamically loading the controller's solution based on the page visited

Recently Angularjs is very hot ....

Don't say much nonsense, like the subject.

With Ng is want to do single page application (Simple page application), is the hope that all the pages in the station are using NG route, try not to location.href, but such webapp benefits are many, But the drawback is that when your webapp over time, the user becomes more, the functions become richer, the controller becomes more and more, you have to load all the controllers as global modules, So that in any one page in the station can be F5 refreshed after the route to any other page, without a controller error, loading all the controller so that on the phone, the first time the page opened to slow, Today I will share with you how I have improved this shortcoming, the implementation of the controller's modular loading

App.js

App. Config (function($controllerProvider, $compileProvider, $filterProvider, $provide)  {= {    controller: $controllerProvider. Register,    directive: $compileProvider. Directive,    Filter: $ Filterprovider.register,    Factory: $provide. Factory,    Service: $provide. Service  };});

In the route to block a bit to load the required JS, loading success before continuing, do not know what $script is the classmate please point Http://dustindiaz.com/scriptjs

$routeProvider. When ('/:p lugin ', {templateurl:function(RD) {return' plugin/' + rd.plugin + '/index.html '; }, Resolve: {load:function($q, $route, $rootScope) {varDeferred =$q. Defer (); vardependencies = [        ' plugin/' + $route. Current.params.plugin + '/controller.js '      ]; $script (Dependencies,function() {$rootScope. $apply (function() {deferred.resolve ();      });      }); returndeferred.promise; }  }});

Controller.js

function ($scope) {  ...});

index.html

<ng-controller= "Mypluginctrl">  ... </ Div >

This transformation can be implemented when the route dynamically to load this route depends on the JS, but generally we have a lot of webapp in the route, each to write a bunch of code, both ugly and difficult to maintain, we might as well optimize

App.js

App. Config (function($controllerProvider, $compileProvider, $filterProvider, $provide) {App.register={controller: $controllerProvider. Register, Directive: $compileProvider. Directive, Filter: $filterProvider. R  Egister, Factory: $provide. Factory, Service: $provide. Service}; App.asyncjs=function(JS) {return["$q", "$route", "$rootScope",function($q, $route, $rootScope) {varDeferred =$q. Defer (); vardependencies =JS; if(Array.isarray (dependencies)) { for(vari = 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 ();            });            }); returndeferred.promise;    }]; }});

$routeProvider. When ('/:p lugin ', {  function(RD) {    return ' plugin/' + Rd.plugin + '/index.html ';  },  resolve: {    Load:app.asyncjs (' plugin/controller.js ')  }});

As long as the original one controller.js by the module split into multiple JS and then add module dependencies for the route can increase the loading speed, this method can not only be used in the controller on-demand loading, and can be used in other JS module, For example, a date selector plug-in such as Jquery.ui.datepicker.js, the route node that requires a date to select a plug-in plus

$routeProvider. When ('/:p lugin ', {  function(RD) {    return ' plugin/' + Rd.plugin + '/index.html ';  },  resolve: {    Load:app.asyncjs ([' plugin/controller.js ', ' plugin/ Jquery.ui.datepicker.js '])  });

We can do it.

PS: $script can judge the need to load JS, if it has been loaded before he will directly return to success, that is, only the first time to enter the date to select the interface will be requested jquery.ui.datepicker.js exit to go back into the request

Thanks to the original question respondents: Http://stackoverflow.com/questions/20909525/load-controller-dynamically-based-on-route-group

ANGULARJS dynamically loading the controller's solution based on the page visited