ANGULARJS dynamically loads the controller solution based on the page accessed

This article mainly introduces the ANGULARJS based on the page to visit the dynamic Load controller solution, the need for friends can refer to the next

Ng is just want to do a single page application (Simple page application), is the hope that all the pages of the site are using NG route, as far as possible without location.href, but such webapp benefits are many, But the drawback is that when your webapp over time, the user becomes more, the function becomes richer, the controller also becomes more and more, you have to put all controller as the global module to load, In order to make any page in the station to press F5 Refresh can be route to any other page, without the failure to find controller error, load all the controller so that on the phone, the page's first opening speed slowed, Today I would like to share with you how I have improved this shortcoming, realize the 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 route when blocking to load the required JS, after the successful loading and then continue, do not know what $script is a classmate please point Http://dustindiaz.com/scriptjs

The code is as follows:

$routeProvider. When ('/:p lugin ', {

Templateurl:function (RD) {

Return ' plugin/' + 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 (' Mypluginctrl ', function ($scope) {

...

});

Index.html

The code is as follows:

　　

...

　　

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

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 version number

}

$script (dependencies, function () {

$rootScope. $apply (function () {

Deferred.resolve ();

});

});

return deferred.promise;

}];

}

});

The code is as follows:

$routeProvider. When ('/:p lugin ', {

Templateurl:function (RD) {

Return ' plugin/' + rd.plugin + '/index.html ';

},

Resolve: {

Load:app.asyncjs (' Plugin/controller.js ')

}

});

To this as long as the original one controller.js by the module to split into a number of JS and then add module dependencies for route can increase the load speed, this method can not only be used in controller on-demand loading, and can be used in other JS modules, For example jquery.ui.datepicker.js such a date selection plug-in, the route node that needs the date to select the plugin plus

The code is as follows:

$routeProvider. When ('/:p lugin ', {

Templateurl: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 be loaded on the need to judge the JS, if it has been loaded before he will return directly to success, that is, only the first time to enter the date of the selection interface will go to request Jquery.ui.datepicker.js quit to go back and then will not ask