AngularJs中的延迟加载

        当你使用AngularJs中的routes/views模式建立大型网站或者应用的时候,把所有的自定义文件,如controllers和directives等在初始化时全部加载进来,确实不是一个好的办法。最好的方式是,初始化时仅仅加载所需要的文件。这些文件可能会依赖一个连接或者多个文件,然而它们仅仅被特定的route所使用。当我们切换route时,未被加载的文件将会按需加载。这不但能提高初始化页面的速度,而且可以防止带宽浪费。这篇文章,我将展示如何进行延迟加载。
下面有两个问题:
1.当application启动完成之后,针对一个module如何进行延迟文件的加载?
2.在application中,代替你选择的script加载器,应该在哪里进行实际的加载?

        问题1造成的原因是,在application启动以后,使用module API无法进行文件的注册。也就是说,如果你想在启动后的app中创建一个新的controller,如下:

angular.module('app').controller('SomeLazyController', function($scope)
{
    $scope.key = '...';
});
        那么当你使用ng-controller标签关联这个controller时,会产生下面的异常:
Error: Argument ‘SomeLazyController’ is not a function, got undefined
        目前,据我所了解,在启动后的application中注册文件,唯一的方法不是使用module API,而是使用AngularJs的第三方服务。

        第三方服务是由一些对象组成,这些对象用来创建和配置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
    });
})();
        然后就可以用下面的方法延迟注册controller:

someLazyController.js

angular.module('app').controllerProvider.resgister('SomeLazyController', function($scope)
{
    $scope.key = '...';
});
        但问题依然存在,我们在什么地方延时加载这些controller文件,来取代使用

你可能感兴趣的:(javascript)