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

Issue

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 🙂

Solution

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

Answered By – georgeawg

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.