詳解angularjs利用ui-route異步加載組件
ui-route相比于angularjs的原生視圖路由更好地支持了路由嵌套,狀態(tài)轉(zhuǎn)移等等。隨著視圖不斷增加,打包的js體積也會(huì)越來越大,比如我在應(yīng)用里面用到了wangeditor里面單獨(dú)依賴的jquery就300多k。異步加載各個(gè)組件就很有必要。在這里我就以u(píng)i-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)行自定義注入對(duì)象的。
下面是舉出文檔中關(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的對(duì)象是支持Promise的。
再回到我們之前的代碼templateProvider和controllerProvider我們注入了resources的模板對(duì)象和controller對(duì)象,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的支持,這樣可以對(duì)js進(jìn)行拆分打包,達(dá)到異步加載js的目的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11AngularJS表格樣式簡(jiǎn)單設(shè)置方法示例
這篇文章主要介紹了AngularJS表格樣式簡(jiǎn)單設(shè)置方法,結(jié)合實(shí)例形式分析了AngularJS結(jié)合bootstrap針對(duì)表格樣式的相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-03-03Angular之toDoList的實(shí)現(xiàn)代碼示例
本篇文章主要介紹了Angular之toDoList的實(shí)現(xiàn)代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12Angular獲取手機(jī)驗(yàn)證碼實(shí)現(xiàn)移動(dòng)端登錄注冊(cè)功能
最近在使用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)代碼也很簡(jiǎn)單的,下面通過實(shí)例代碼給大家介紹下,需要的朋友參考下吧2017-05-05Webpack 實(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