AngularJs中的延迟加载
当你使用AngularJs中的routes/views模式建立大型网站或者应用的时候，把所有的自定义文件，如controllers和directives等在初始化时全部加载进来，确实不是一个好的办法。最好的方式是，初始化时仅仅加载所需要的文件。这些文件可能会依赖一个连接或者多个文件，然而它们仅仅被特定的route所使用。当我们切换route时，未被加载的文件将会按需加载。这不但能提高初始化页面的速度，而且可以防止带宽浪费。这篇文章，我将展示如何进行延迟加载。
下面有两个问题：
1.当application启动完成之后，针对一个module如何进行延迟文件的加载？
2.在application中，代替你选择的script加载器，应该在哪里进行实际的加载？
下面有两个问题：
1.当application启动完成之后，针对一个module如何进行延迟文件的加载？
2.在application中，代替你选择的script加载器，应该在哪里进行实际的加载？
问题1造成的原因是，在application启动以后，使用module API无法进行文件的注册。也就是说，如果你想在启动后的app中创建一个新的controller，如下：
angular.module('app').controller('SomeLazyController', function($scope)
{
$scope.key = '...';
});Error: Argument ‘SomeLazyController’ is not a function, got undefined 第三方服务是由一些对象组成，这些对象用来创建和配置AngularJs文件的实例。因此，我们用$controllerProvider服务来进行controller的延迟注册。以此类推，$compileProvider服务用来延迟注册directive，$filterProvider服务用来延迟注册filter，$provider服务用来延迟注册service。下面是关于controller和service的例子：
// Registering a controller after app bootstrap
$controllerProvider.register('SomeLazyController', function($scope)
{
$scope.key = '...';
});
// Registering a directive after app bootstrap
$compileProvider.directive('SomeLazyDirective', function()
{
return {
restrict: 'A',
templateUrl: 'templates/some-lazy-directive.html'
}
})
// etc第三方服务仅仅在module配置期间生效。因此，他们之间一直保持着联系，用来延迟注册文件。例如，通过保持一个相关的服务，你可以像下面的例子那样建立app module：
appModule.js
(function()
{
var app = angular.module('app', []);
app.config(function($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
{
app.controllerProvider = $controllerProvider;
app.compileProvider = $compileProvider;
app.routeProvider = $routeProvider;
app.filterProvider = $filterProvider;
app.provide = $provide;
// Register routes with the $routeProvider
});
})();someLazyController.js
angular.module('app').controllerProvider.resgister('SomeLazyController', function($scope)
{
$scope.key = '...';
});