Making angular HTTP call reusable

Question

In my controller.js, I have an HTTP GET request that I have to call when my page loads and when a user pulls to refresh.

The way I'm doing it right now is by duplicating the $http code. Is there a way to make this more reusable? I can't figure out how to move it to my services.js file and reference it in my controller so that it runs.

.controller('GamesCtrl', function ($scope, $http) {
  $http(
  {
      method: 'GET',
      url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
      headers: {
          'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
      }
  }).
  success(function (data) {
      $scope.data = data['results']['collection1'];
  });

  $scope.doRefresh = function() {
    $http(
          {
              method: 'GET',
              url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
              headers: {
                  'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
              }
          }).
          success(function (data) {
              $scope.data = data['results']['collection1'];
          })
     .finally(function() {
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
})

Use Services or Factories. Do not forget your add your services module to the main module if u seperated them. Also inject the service (e.g. UserService) in your controller. — Himmet Avsar
– Himmet Avsar, Commented Dec 20, 2014 at 17:09
How do I reference a service or factory in the controller? Do I need to? — beaconhill
– beaconhill, Commented Dec 20, 2014 at 17:12

deitch · Accepted Answer · 2014-12-20 17:13:14Z

The simple answer is, make a private function:


.controller('GamesCtrl', function ($scope, $http) {
  var doLoad = function() {
      $http(
      {
          method: 'GET',
          url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
          headers: {
              'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
          }
      }).
      success(function (data) {
          $scope.data = data['results']['collection1'];
      }).finally(function() {
       $scope.$broadcast('scroll.refreshComplete');
     });;
  };

  $scope.doRefresh = function() {
    doLoad();
  };

  doLoad();
})

A more detailed answer might be to extract it into a service:


.service('KimonoSvc',function($http) {
    return {
      get: function() {
         return $http(
         {
             method: 'GET',
             url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
             headers: {
                 'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
             }
         });
      }
    };
})
.controller('GamesCtrl', function ($scope, KimonoSvc) {
  var doGet = function() {
    KimonoSvc.get().
         success(function (data) {
             $scope.data = data['results']['collection1'];
         }).finally(function() {
          $scope.$broadcast('scroll.refreshComplete');
        });
  };
  $scope.doRefresh = function() {
    doGet();
  };

  doGet();
})

$scope.doRefresh = doLoad; and $scope.doRefresh = doGet;. No need for extra anonymous functions.
Yeah, I guess you could do that, and then call $scope.doRefresh() at the end of the controller. I like the separate functions, stylistically (named, not anonymous).
no you misunderstood me.. its fine to create a function .. just do not use another to apply it to the doRefresh. $scope.doRefresh = function() {doGet();}; could become $scope.doRefresh = doGet;
Oh, I see what you are saying. Yeah, I still prefer it as a wrapper, because I often find there is a need to wrap it in some kind of logic, or error-checking, etc. But if it is a straight pass-through, then, yeah, just $scope.doRefresh = doGet;

Collectives™ on Stack Overflow

Making angular HTTP call reusable

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related