欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解angularjs利用ui-route異步加載組件

 更新時(shí)間:2017年05月21日 13:47:17   作者:chenatu  
本篇文章主要介紹了詳解angularjs利用ui-route異步加載組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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)證

    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)自定義組件的雙向綁定的兩種方法

    這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • angular2倒計(jì)時(shí)組件使用詳解

    angular2倒計(jì)時(shí)組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了angular2倒計(jì)時(shí)組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • AngularJS表格樣式簡(jiǎn)單設(shè)置方法示例

    AngularJS表格樣式簡(jiǎn)單設(shè)置方法示例

    這篇文章主要介紹了AngularJS表格樣式簡(jiǎn)單設(shè)置方法,結(jié)合實(shí)例形式分析了AngularJS結(jié)合bootstrap針對(duì)表格樣式的相關(guān)設(shè)置技巧,需要的朋友可以參考下
    2017-03-03
  • Angular之toDoList的實(shí)現(xiàn)代碼示例

    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)端登錄注冊(cè)功能

    Angular獲取手機(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-05
  • Webpack 實(shí)現(xiàn) AngularJS 的延遲加載

    Webpack 實(shí)現(xiàn) AngularJS 的延遲加載

    這篇文章主要介紹了Webpack 實(shí)現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • angular.extend方法的具體使用

    angular.extend方法的具體使用

    本篇文章主要介紹了angular.extend方法的具體使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • 淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)

    淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)

    本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解AngularJS中的http攔截

    詳解AngularJS中的http攔截

    這篇文章主要為大家詳細(xì)介紹了AngularJS中的http攔截,$http服務(wù)允許我們與服務(wù)端交互,有時(shí)候我們希望在發(fā)出請(qǐng)求之前以及收到響應(yīng)之后做些事情。即http攔截,需要的朋友可以參考下
    2016-02-02

最新評(píng)論