Combine multiple promises and load before loading view AngularJS

It’s very common in application where we need to combine multiple promises to load and bind data in controller. 

In this article we will combine promise using “$q” service, which is well known in Angular environment.  Here is the implementation.

var app = angular.module('App', ['ngRoute']).

    config(['$routeProvider', function ($routeProvider) {

       

        $routeProvider.when('/myroute', {

               templateUrl: '../app/template.html',

               controller: 'myController',

               resolve: {

                   message: function (resultService) {

                       return resultService;

                   }

               }

           });

    }]);

    app.service('resultService', function ($http , $q) {

       

        var first = $http({ method: 'GET', url: '../Home/ReturnValue' });

        var second = $http({ method: 'GET', url: '../Home/ReturnValue' });

        return $q.all([first, second]).then(function (results) {

            return {

                first: results[0].data,

                second: results[1].data

            };

        });

    });

Please, have a look that we are combining both HTTP call using “$q” an returning result as a single object.

The object is getting return by resolve function which is defined in route. As the service is getting call in resolve of route , the data will get load before loading the view.

Here is the controller for the route.

    app.controller('myController', function ($scope, message) {

        $scope.time1 = message.first;

        $scope.time2 = message.second;

    });

Here is the output of the application.