詳解angularjs利用ui-route異步加載組件
ui-route相比于angularjs的原生視圖路由更好地支持了路由嵌套,狀態(tài)轉(zhuǎn)移等等。隨著視圖不斷增加,打包的js體積也會越來越大,比如我在應(yīng)用里面用到了wangeditor里面單獨依賴的jquery就300多k。異步加載各個組件就很有必要。在這里我就以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') }) }) } ); } } } ) }])
這個是路由狀態(tài)的一個聲明文件,name,url,param字段的方式不變,關(guān)鍵是看resolve這個部分。根據(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)用之表單及其驗證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗證的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11Angular獲取手機驗證碼實現(xiàn)移動端登錄注冊功能
最近在使用angular來做項目,功能要求實現(xiàn)一是點擊按鈕獲取驗證碼,二是點擊登錄驗證表單。之前用jquery來做項目很好做,使用angular怎么實現(xiàn)呢?其實實現(xiàn)代碼也很簡單的,下面通過實例代碼給大家介紹下,需要的朋友參考下吧2017-05-05Webpack 實現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下2016-03-03淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12