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.

Resolve promise before loading route in AngularJS

Sometime it’s needed to load data before loading view in application. AngularJS has option to implement same in place of routing.

We can say to AngularJS that before redirect to view, let’s complete the promise at first. 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 (nameService) {

                               return nameService.returnName();

                           }

               }

           }).

             otherwise({

                 redirectTo: '/'

             });

    }]);

You can notice that, “myroute” routing entry has taken resolve parameter which takes service as function argument. We will define the service now. Here is the implementation of service.

    app.service('nameService', function () {

        this.returnName = function () {

            return "Sourav Kayal";

        };

    });

Here is the controller which takes “message” as argument which will return by “resolve” in routing section.

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

        $scope.name = message;

    });

And once we run the application, we will see the name has returned to controller.