用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
代碼如下:
<div ng-controller="MyPluginCtrl">
...
</div>
這樣改造就可以實現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退出去再進就不會去請求啦