AngularJs根據造訪的頁面動態載入Controller的解決方案_AngularJS

用Ng就是想做單頁應用(simple page application),就是希望站內所有的頁面都是用Ng的Route,盡量不用location.href,但是這樣的webapp好處是很多,但是美中不足的是當你的webapp隨著時間的推移,用戶變多,功能變得更豐富,controller也變得越來越多,你不得不把所有的controller當作全局模組進行加載,以使得在站內任何一個頁面中按F5刷新後能route到任何一個其他頁面,而不會發生找不到controller的錯誤,加載所有的controller使得在手機端上,頁面的首次打開速度變慢,今天我就和大家分享我是怎麼改善這個缺點的,實作Controller的模組化載入

app.js

複製程式碼 程式碼如下:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service
  };
});

在route時阻塞一下去加載需要的js,加載成功後再繼續,不知道$script是什麼的同學請點http://dustindiaz.com/scriptjs

複製程式碼 程式碼如下:

$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

複製程式碼 程式碼如下:

app.register.controller('MyPluginCtrl', function ($scope) {
  ...
});

 index.html

複製程式碼 程式碼如下:

  ...

這樣改造就可以實現route時動態去加載這個route所依賴的js,但是一般我們的webapp中route都有很多,每個都要寫那麼一堆代碼,既難看又難於維護,我們不妨再優化一下

app.js

複製程式碼 程式碼如下:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    控制器：$controllerProvider.register，
    指示：$compileProvider.directive，
    過濾器：$filterProvider.register，
    工廠：$provide.factory,
    服務：$provide.service
  };
  app.asyncjs = 函數 (js) {
        return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {
            var deferred = $q.defer();
            var dependency = js;
            if (Array.isArray(相依性)) {
                for (var i = 0; i                    且依賴項[i] = "?v=" v;
                }
            } 其他 {
                dependency = "?v=" v;//v是版本號碼
            }
            $script(依賴項, 函數 () {
                $rootScope.$apply(function () {
                    deferred.resolve();
                });
            });
            返回 deferred.promise;
        }];
    }
});

複製程式碼程式碼如下：

$routeProvider.when('/:plugin', {
  templateUrl: 函數(rd) {
    return 'plugin/' rd.plugin '/index.html';
  },
  解：{
    載入：app.asyncjs('plugin/controller.js')
  }
});

到這裡只要把原來一個controller.js按模組分割成多個然後js為路由添加模組依賴速度依靠提高負載，這個方法可以用在控制器多層加載，而且可以用在其他js模組,例如jquery.ui.datepicker.js這樣的日期選擇插件,在需要日期選擇插件的路由節點加上

複製程式碼程式碼如下：

$routeProvider.when('/:plugin', {
  templateUrl: 函數(rd) {
    return 'plugin/' rd.plugin '/index.html';
  },
  解：{
    載入：app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
  }
});

便可以了

PS:$script可以對需要載入的js進行判斷，如果之前已經載入了就會直接回傳成功，只有在第一次進入日期選擇介面時才會去請求jquery.ui.datepicker。 js退出去再進去就不會去請求啦