对angular实现延迟加载template和controller

1、在lib目录中添加 script.js 文件，并在index.html其他<script>之前引用之：

<script src="lib/script.js"></script>

该文件来自 https://github.com/ded/script.js/blob/master/dist/script.js 。

2、在app.js中增加全局函数LazyLoadTemplate()和LazyLoadJs()：

function LazyLoadTemplate(file) {
   return function () {
      return file;
   }
}

function LazyLoadJs(file) {
   return {
      deps: function ($q, $rootScope) {
         var d = $q.defer();
         $script(file, function () {
            $rootScope.$apply(function () {
               d.resolve();
            })
         });
         return d.promise;
      }
   }
}

3、在app.config()函数中开始处增加：

var app = angular.module("app");
app.controllerProvider = $controllerProvider;  // 主要是这个
app.compileProvider = $compileProvider;        // 以下这两个备用
app.filterProvider = $filterProvider;

注意，要在config()的参数列表中增加相应的$controllerProvider、$compileProvider 和 $filterProvider。

4、在路由表中修改需要动态加载的状态路由配置，例如：

$stateProvider.state('page1', {
   url: '/page1',
   templateUrl: LazyLoadTemplate('page1.html'),
   controller: 'Page1Ctrl',
   resolve: LazyLoadJs("page1.js")
});

提示：

(1) 把 templateUrl属性的值改为调用函数 LazyLoadTemplate()。

(2) 增加 resolve属性，其值为调用函数LazyLoadJs()。

5、在控制器所在JS文件中，修改控制器的定义方式：

angular.module('app').controllerProvider.register("Page1Ctrl", function ($scope) {
   $scope.title = "Page1";
});

提示：把原来的 controller() 函数调用改成 controllerProvider.register()。

6、从index.html中去掉对该控制器所在JS文件的引用，例如：

<!--<script src="page1.js"></script>-->

参考：

1、AngularJs中的延迟加载

2、script.js

巴特西

对angular实现延迟加载template和controller

最新文章

热门文章