對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