Using Ng means to do a simple page application, and I hope that all pages on the site will use Ng Route, and try not to use location.href. However, such webapps have many benefits, but the only disadvantage is that as your webapp has more users and more functions, and more controllers have become more and more. You have to load all controllers as global modules so that after pressing F5 to refresh on any page in the site, you can route to any other page without an error of not finding the controller. Loading all controllers makes the first opening speed of the page slower on the mobile phone. Today I will share with you how I improved this disadvantage and realize the modular loading of the controller.
app.js
The code copy 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
};
});
Block the required js when route and continue after loading successfully. If you don't know what $script is, please click http://dustindiaz.com/scriptjs
The code copy is as follows:
$routeProvider.when('/:plugin', {
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 copy is as follows:
app.register.controller('MyPluginCtrl', function ($scope) {
...
});
index.html
The code copy is as follows:
<div ng-controller="MyPluginCtrl">
...
</div>
In this way, the transformation can dynamically load the js that the route depends on when route is routed. However, generally there are many routes in our webapps, and each of them has to write a bunch of code, which is both ugly and difficult to maintain. We might as well optimize it.
app.js
The code copy 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 copy is as follows:
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: app.asyncjs('plugin/controller.js')
}
});
At this point, just split the original controller.js into multiple js according to the module and then add module dependencies to route to improve the loading speed. This method can not only be used for controller loading on demand, but also for other js modules, such as jquery.ui.datepicker.js, add the route node that needs to be selected.
The code copy is as follows:
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
}
});
That's fine
PS: $script can judge the js that need to be loaded. If it has been loaded before, it will return directly to success. That is to say, only when you enter the date selection interface for the first time, you will request jquery.ui.datepicker.js to exit and then enter, and you will not request it.