CODEWITHSUNDEEP
javascriptangularjsangular-promisengrouteangularjs-ng-route
Angular Learner
Angular Learner

Reputation: 390

How to handle multiple resource calls on ngRoute view load in angular js

Need you're help in reducing the load time of the application. In our application we use ngroute and in ng-route we have resolve call. Once the resolve call is successful we are making other function calls. Each function call is individual resource call which gets data. Now please check the below code

$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);
        });
 }

Now if you see I have two functions which make promise calls and get the data. This is fine but issue lies with when the calls take time there's a delay in the data shown on the page.Going forward how to include multiple calls in the resolve function as I cannot keep on adding functions in it. Can somebody tell me how to change this resolve style? I need the info on page load I cannot change that but how to handle this multiple functions in resolve. Sorry for the long question but I had to precise on my question :)

Upvotes: 0

Views: 122

Answers (2)

georgeawg
georgeawg

Reputation: 48968

To execute all three data fetches in one resolve function, use $q.all:

$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);
}

The initData object will resolve with all three data sets before the view is rendered to DOM.

One of the things that sets the AngularJS $q Service apart from other promise libraries is that its $q.all method works with JavaScript object hashes (associative arrays).

Then in the controller:

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

Upvotes: 1

Ken
Ken

Reputation: 466

You are not using the promises to their full potential. If instead of having your two functions for loading data (getToolboxes() and getFamilyData()) set a local var to the promise, you could have them return the promises. Then in your init method, you could have the promises run in parallel using Promise.all().then().

Take a look at the documentation on promises provided by google, it really helped me figure out how to use promises to their full potential. https://developers.google.com/web/fundamentals/getting-started/primers/promises

Upvotes: 1

Related Questions