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-09 19:11:09Z

17

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

edited Jun 9, 2014 at 19:11

answered Jun 9, 2014 at 18:18

Robin Rizvi

5,2134 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aadu Over a year ago

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?

Robin Rizvi Over a year ago

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

aadu Over a year ago

Is it possible to integrate 'promise.then' into your answer so that the controller only loads when the request is resolved?

Robin Rizvi Over a year ago

Please rate/mark as answer if it answers your question

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related