詳解angularjs利用ui-route異步加載組件
ui-route相比于angularjs的原生視圖路由更好地支持了路由嵌套,狀態(tài)轉(zhuǎn)移等等。隨著視圖不斷增加,打包的js體積也會(huì)越來越大,比如我在應(yīng)用里面用到了wangeditor里面單獨(dú)依賴的jquery就300多k。異步加載各個(gè)組件就很有必要。在這里我就以ui-route為框架來進(jìn)行異步加載說明。
首先看一下路由加載文件
angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) {
$stateProvider.state({
name: 'home.message',
url: '/message',
abstract: true,
templateProvider: ['resources', function (resources) {
return resources.template
}],
controllerProvider: ['resources', (resources)=> {
return resources.controller
}],
onEnter: ['resources', (resources)=>resources.css.use()],
onExit: ['resources', (resources)=>resources.css.unuse()],
resolve: {
resources: ()=> {
return new Promise(
resolve => {
require([], () => {
resolve({
css: require('./css/message_box.css'),
template: require('./html/message_box.html'),
controller: require('./js/message_box.js')
})
})
}
);
}
}
}
).state({
name: 'home.message.add_message',
url: '/add_message?isReply&toUid&title',
params: {isReply: null, toUid: null, title: null},
templateProvider: ['resources', function (resources) {
return resources.template
}],
controllerProvider: ['resources', (resources)=> {
return resources.controller
}],
onEnter: ['resources', (resources)=>resources.css.use()],
onExit: ['resources', (resources)=>resources.css.unuse()],
resolve: {
resources: ()=> {
return new Promise(
resolve => {
require(['./js/message.js'], () => {
resolve({
css: require('./css/add_message.css'),
template: require('./html/add_message.html'),
controller: require('./js/add_message.js')
})
})
}
);
}
}
}
)
}])
這個(gè)是路由狀態(tài)的一個(gè)聲明文件,name,url,param字段的方式不變,關(guān)鍵是看resolve這個(gè)部分。根據(jù)ui-route的resolve文檔,resolve是為了給state或者controller進(jìn)行自定義注入對象的。
下面是舉出文檔中關(guān)于resolve的例子:
$stateProvider.state('myState', {
resolve:{
// Example using function with simple return value.
// Since it's not a promise, it resolves immediately.
simpleObj: function(){
return {value: 'simple!'};
},
// Example using function with returned promise.
// This is the typical use case of resolve.
// You need to inject any services that you are
// using, e.g. $http in this example
promiseObj: function($http){
// $http returns a promise for the url data
return $http({method: 'GET', url: '/someUrl'});
},
// Another promise example. If you need to do some
// processing of the result, use .then, and your
// promise is chained in for free. This is another
// typical use case of resolve.
promiseObj2: function($http){
return $http({method: 'GET', url: '/someUrl'})
.then (function (data) {
return doSomeStuffFirst(data);
});
},
// Example using a service by name as string.
// This would look for a 'translations' service
// within the module and return it.
// Note: The service could return a promise and
// it would work just like the example above
translations: "translations",
// Example showing injection of service into
// resolve function. Service then returns a
// promise. Tip: Inject $stateParams to get
// access to url parameters.
translations2: function(translations, $stateParams){
// Assume that getLang is a service method
// that uses $http to fetch some translations.
// Also assume our url was "/:lang/home".
return translations.getLang($stateParams.lang);
},
// Example showing returning of custom made promise
greeting: function($q, $timeout){
var deferred = $q.defer();
$timeout(function() {
deferred.resolve('Hello!');
}, 1000);
return deferred.promise;
}
},
// The controller waits for every one of the above items to be
// completely resolved before instantiation. For example, the
// controller will not instantiate until promiseObj's promise has
// been resolved. Then those objects are injected into the controller
// and available for use.
controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){
$scope.simple = simpleObj.value;
// You can be sure that promiseObj is ready to use!
$scope.items = promiseObj.data.items;
$scope.items = promiseObj2.items;
$scope.title = translations.getLang("english").title;
$scope.title = translations2.title;
$scope.greeting = greeting;
}
})
我們可以看到resolve的對象是支持Promise的。
再回到我們之前的代碼templateProvider和controllerProvider我們注入了resources的模板對象和controller對象,onEnter和onExit注入了css模塊。
如果controller中依賴了服務(wù)怎么辦的?
resolve: {
resources: ()=> {
return new Promise(
resolve => {
require(['./js/message.js'], () => {
resolve({
css: require('./css/add_message.css'),
template: require('./html/add_message.html'),
controller: require('./js/add_message.js')
})
})
}
);
}
}
可以在require里面將服務(wù)注入,如代碼中的message.js。而為了將服務(wù)進(jìn)行異步加載我們不能用普通的.factory或者.service。而需要調(diào)用$provide.factory或者$provide.service
如果采用webpack進(jìn)行編譯打包的話就需要webpack.optimize.CommonsChunkPlugin的支持,這樣可以對js進(jìn)行拆分打包,達(dá)到異步加載js的目的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Angular之toDoList的實(shí)現(xiàn)代碼示例
本篇文章主要介紹了Angular之toDoList的實(shí)現(xiàn)代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Angular獲取手機(jī)驗(yàn)證碼實(shí)現(xiàn)移動(dòng)端登錄注冊功能
最近在使用angular來做項(xiàng)目,功能要求實(shí)現(xiàn)一是點(diǎn)擊按鈕獲取驗(yàn)證碼,二是點(diǎn)擊登錄驗(yàn)證表單。之前用jquery來做項(xiàng)目很好做,使用angular怎么實(shí)現(xiàn)呢?其實(shí)實(shí)現(xiàn)代碼也很簡單的,下面通過實(shí)例代碼給大家介紹下,需要的朋友參考下吧2017-05-05
Webpack 實(shí)現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實(shí)現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下2016-03-03
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12

