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

　　這篇文章主要介紹了AngularJs根據訪問的頁面動態載入Controller的解決方案,需要的朋友可以參考下

　　用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 = {

　　controller: $controllerProvider.register,

　　directive: $compileProvider.directive,

　　filter: $filterProvider.register,

　　factory: $provide.factory,

　　service: $provide.service

　　};

　　app.asyncjs = function (js) {

　　return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {

　　var deferred = $q.defer();

　　var dependencies = js;

　　if (Array.isArray(dependencies)) {

　　for (var i = 0; i < dependencies.length; i++) {

　　dependencies[i] += "?v=" + v;

　　}

　　} else {

　　dependencies += "?v=" + v;//v是版本號碼

　　}

　　$script(dependencies, function () {

　　$rootScope.$apply(function () {

　　deferred.resolve();

　　});

　　});

　　return deferred.promise;

　　}];

　　}

　　});

　　代碼如下:

　　$routeProvider.when('/:plugin', {

　　templateUrl: function(rd) {

　　return 'plugin/' + rd.plugin + '/index.html';

　　},

　　resolve: {

　　load: app.asyncjs('plugin/controller.js')

　　}

　　});

　　到此只要把原來一個controller.js按模組拆分成多個js然後為route添加模組依賴便可提高載入速度,這個方法不僅僅可以用在controller按需載入,而且可以用在其他js模組,例如jquery.ui.datepicker.js這樣的日期選擇外掛程式,在需要日期選擇外掛程式的route節點加上

　　代碼如下:

　　$routeProvider.when('/:plugin', {

　　templateUrl: function(rd) {

　　return 'plugin/' + rd.plugin + '/index.html';

　　},

　　resolve: {

　　load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])

　　}

　　});

　　便可以了

 

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