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

Question

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

score 1 · Answer 1 · answered Apr 21 '17 at 21:02

1

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

answered Apr 21 '17 at 21:02

Ken

466
2
7

Thanks for the answer, but I didn't understood one point in your answer "set a local var to the promise, you could have them return the promises." Can you explain this statement pls? – Angular Learner Apr 21 '17 at 22:05
Also Ken one last question lets say have I two routes and both of them carries same info on page load. Can we store the info which is loaded on one route and carry the same to other route so I don't need to make the calls again? – Angular Learner Apr 21 '17 at 22:10
1

To your first question, you do not seem to be using the promise conventionally. You are assigning the promise to a local var and then handling it. I am guessing this is done to get the promise to run without actually dealing with is asynchronously, but then your question is asking to make this run async so its confusing. To your second question, if the data is not updated between pages and can be cached locally without worrying about not having the latest, then you could use localStorage to hold the data between pages. Checkout localStorage.setItem() and localStorage.getItem(). – Ken Apr 21 '17 at 22:16

georgeawg · Accepted Answer · 2017-04-22T06:04:18.400

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

thanks for the answer. I will give it try and I will see if it increases the DOM loading. — Angular Learner, Apr 23 '17 at 09:35

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

2 Answers2