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í)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注