AngularJS: Performing $http request inside custom service and returning data

Question

I have defined a custom http service in angular that looks like this:

angular.module('myApp')
  .factory('myhttpserv', function ($http) {

  var url = "http://my.ip.address/"

  var http = {
      async: function (webService) {
          var promise = $http.get(url + webService, { cache: true }).then(function (response) {
            return response.data;
        });
          return promise;
       }
  };
  return http;
});

And I can access this service in my controller like so:

angular.module('myApp')
  .controller('myCtrl', function (myhttpserv) {

  var webService = 'getUser?u=3'

  myhttpserv.async(webService).then(function (data) {
      console.log(data);
  })

});

However I now need to streamline this process so that it is ALL contained inside the service with a static url and it simply returns the data. So that I can just call it in the controller like so:

 angular.module('myApp')
  .controller('myCtrl', function ($scope, myhttpserv) {

      console.log(myhttpserv.var1);
      console.log(myhttpserv.var2);
      etc...

});

I can't seem to tweak the service to get this functionality. Anyone know the correct way to do it?

Robin Rizvi · Accepted Answer · 2014-06-09T19:11:09.123

Option 1 - Use promise API

angular.module('myApp').factory('myhttpserv', function ($http) {
  return $http.get('http://my.ip.address/getUser?u=3', { cache: true });
});

Controller:

angular.module('myApp').controller('myCtrl', function ($scope, myhttpserv) {
     myhttpserv.then(function(response){
         console.log(response.data);
     });     
});

Option 2 - Using route resolve

angular.module('myApp', ['ngRoute']).config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/myCtrl', {
        templateUrl: 'myView.html',
        controller: 'myCtrl',
        resolve: {
        load: function (myhttpserv) {
            return myhttpserv;
        }
      });
  }]);

Service:

angular.module('myApp').factory('myhttpserv', function ($http) {
      var data = {};
      var url = "http://my.ip.address/";
      var promise = $http.get(url + 'getUser?u=3', { cache: true }).then(function (response) {
                data = response.data;
            });
      return data;
    });

Controller:

 angular.module('myApp')
  .controller('myCtrl', function ($scope, myhttpserv) {

      console.log(myhttpserv.data.var1);
      console.log(myhttpserv.data.var1);
      etc...

});

Option 3 - Use $interval service

angular.module('myApp').factory('myhttpserv', function ($http) {
  var data = {};
  var url = "http://my.ip.address/";
  var promise = $http.get(url + 'getUser?u=3', { cache: true }).then(function (response) {
            data = response.data;
        });
  return data;
});

Controller:

angular.module('myApp').controller('myCtrl', function ($scope, $interval, myhttpserv) {
      $scope.intervalPromise = $interval(function(){
          if (Object.keys(myhttpserv.data).length!=0)
          {
              console.log(myhttpserv.data);
              $interval.cancel($scope.intervalPromise);
          }
      }, 100);    
});

So I can't just get the service to return an object when the http call is finished and access that object from my controller in one line? — aadu, Jun 09 '14 at 18:22
You have to use promise.then or use a interval for that since we do not know when the ajax call will return. If you use angular router you can also configure the routing to happen and your controller to load only when specified promises (ajax requests) are resolved — Robin Rizvi, Jun 09 '14 at 18:23
Is it possible to integrate 'promise.then' into your answer so that the controller only loads when the request is resolved? — aadu, Jun 09 '14 at 18:28

AngularJS: Performing $http request inside custom service and returning data

1 Answers1

Linked