ngRouteで複数のリソースコールを処理する方法角度jsでロードする

Question

アプリケーションの読み込み時間を短縮するのに役立つ必要があります。私たちのアプリケーションでは、ngrouteを使用し、ng-routeで解決呼び出しを行います。解決呼び出しが成功すると、他の関数呼び出しが行われます。各関数呼び出しは、データを取得する個々のリソース呼び出しです。今すぐ下のコードを確認してください

$routeProvider.when('/friends/search', { 
    controller: 'FriendsSearchController', 
    controllerAs: 'fsvm', 
    templateUrl: 'friends/search/friends-search.html', 
    resolve: { 
     initFriendData: getFriendsList 
    } 
}); 

function init() { 
    if(initFriendData) { 
     if(initFriendData.success) { 
      getToolBoxes(); 
      getFamilyData(); 
     } 
    } 
} 
init(); 

function getToolboxes() { 
    var promise = friendLandingService.getUserInfo(); 
     promise.then(function (result) { 
      _this.userData = result.data; 
     }, function (error) { 
      console.log(error); 
     }); 
} 

function getFamilyData() { 
    var promise = friendLandingService.familyInfo(); 
     promise.then(function (result) { 
      _this.familyData = result.data; 
     }, function (error) { 
      console.log(error); 
     }); 
} 

私は約束をして、データを取得する2つの機能があります。これは問題ありませんが、呼び出しに時間がかかるときに問題があります。ページに表示されるデータに遅延があります。解決関数に複数の呼び出しを含める方法を説明します。誰かがこの解決スタイルを変える方法を教えてもらえますか？私はそれを変更することはできませんが、この複数の機能を解決する方法については、ページの負荷に関する情報が必要です。長い質問のため申し訳ありませんが、私は私の質問で正確にしなければなりませんでした:)

Answer 1

https://developers.google.com/web/fundamentals/getting-started/primers/promisesは、3件のすべてのデータが1つの解決機能にフェッチを実行するには、$q.allを使用します。ビューがDOMにレンダリングされる前に

$routeProvider.when('/friends/search', { 
    controller: 'FriendsSearchController', 
    controllerAs: 'fsvm', 
    templateUrl: 'friends/search/friends-search.html', 
    resolve: { 
     initData: ["$q", "friendLandingService" function($q,service) { 
      return initDataPromise($q, service); 
     })] 
    } 
}); 

function initDataPromise($q, service) { 
    var promiseHash = {}; 
    promiseHash.friendData = service.getFriendInfo() 
     .then(function(result) { 
     return result.data; 
    }); 
    promiseHash.familyData = service.getFamilyInfo() 
     .then(function(result) { 
     return result.data; 
    }); 
    promiseHash.userInfo = service.getUserInfo() 
     .then(function(result) { 
     return result.data; 
    }); 
    return $q.all(promiseHash); 
} 

initDataオブジェクトは、すべての3つのデータセットで解決されます。

AngularJS $q Serviceを他の約束ライブラリと区別するものの1つは、$q.allメソッドがJavaScriptオブジェクトハッシュ（連想配列）と連動することです。コントローラで次に

：答えを

app.controller("FriendsSearchController", ["initData", function(initData) { 
    this.friendData = initData.friendData; 
    this.familyData = initData.familyData; 
    this.userInfo = initData.userInfo; 
}]); 

Answer 2

あなたはその可能性を秘めた約束をしていません。データをロードするための2つの関数（getToolboxes（）とgetFamilyData（））の代わりに、ローカル変数をプロミスに設定すると、プロミスを返すことができます。次に、initメソッドで、Promise.all（）、then（）を使用して約束を並行して実行させることができます。

グーグルが提供する約束の文書を見てみると、約束どおりにその可能性を最大限に引き出す方法がわかりました。