Angular $http.get with dynamic route?

Question

I'm fairly new to angular and I'm trying to understand how to query from a REST API using a scope variable to determine the URI that is being pulled in the get request.

Lets say I'm in my app.controller and it has a service that spits out an array of numbers.. and for the sake of making the code minimal, I'll skip to the important part:

$scope.currentCompanyId = '0001';

$http.get('/api/'+ $scope.currentCompanyId +'/c').
  success(function(data, status, headers, config) {
    $scope.cData = data;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

I know this is cheating because the $http.get is in the controller. I know it needs to be a factory of some kind.. but I have no idea how to pass the $scope.currentCompanyID to the get request and have it return the JSON. Furthermore, if $scope.currentCompanyID were to change to another number, say... '0002'.. how would the $scope.cData change to reflect the new query?

brianj · Accepted Answer · 2014-04-02 14:47:28Z

3

I don't think using $http in your controller is cheating - one reason for putting it into a factory/service is make it reusable. If you are only doing it in one place a service doesn't add much.

That being said, your service can return a function that takes a parameter:

app.factory("service", function($http) {
     return {
          getCompany: function(companyId) { ...make $http call and return data... }
     }
});

then in your controller:

service.getCompany($scope.currentComanyId).then(function(resp) {...})

answered Apr 2, 2014 at 14:47

brianj

3162 silver badges7 bronze badges

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

Comments

Brian Genisio · Accepted Answer · 2014-04-02 14:50:32Z

2

You should consider using Angular $resource because it handles a lot of your abstractions. Either way, if you want to make a new request based on changes in the scope variable, you can $watch it:

$scope.$watch('currentCompanyId', function() {
    if(!$scope.currentCompanyId) return;

    $http.get().success(); // replace with whatever mechanism you use to request data
});

answered Apr 2, 2014 at 14:50

Brian Genisio

48.2k17 gold badges129 silver badges170 bronze badges

1 Comment

sdawson26 Over a year ago

This made the most sense to me and worked immediately after the first try. Thanks!

SteamFire · Accepted Answer · 2014-04-02 14:47:57Z

0

Your request wont launch if currentCompanyId change... You need to lauch your request manually .

otherwise, it seem to be correct

answered Apr 2, 2014 at 14:47

SteamFire

4063 silver badges15 bronze badges

Comments

Alex Polyakov · Accepted Answer · 2014-04-02 14:50:39Z

Did you look at $resource service? http://docs.angularjs.org/api/ngResource/service/$resource - it is rather convenient way to REST requests, and docs have quite a few examples that should suit you well

About changing $scope.currentCompanyID - it seems that you need to create watch for this case:

scope.$watch('currentCompanyID', function(newValue, oldValue) {
      // do your update here, assigning $scope.cData with the value returned
      // using your code:
      $http.get('/api/'+ $scope.currentCompanyId +'/c').
         success(function(data, status, headers, config) {
            $scope.cData = data;
        }).
      error(function(data, status, headers, config) {
         // log error
         });
      });

MBielski · Accepted Answer · 2014-04-02 14:52:36Z

You simply need to pass the data in when calling your service. In your controller, you would need to include your service as a DI module and address it as so:

window.angular.module('myControllerModule', [])
     .controller('myController', ['$scope', 'myHTTPService', 
     function($scope, myHTTPService){
          $scope.currentCompanyId = 1;
          $scope.lookupPromise = myHTTPService.get($scope.currentCompanyId);
          $scope.lookupPromise.then(function(data){
               //things to do when the call is successful
          },function(data){
               //things to do when the call fails
          });
     }]);

In your service, you deal with that value like this:

window.angualr.module('myHTTPServiceModule', [])
     .factory('myHTTPService', '$http',
     function($http){

     function callHTTP(url){
          return $http.get('/api/' + url + '/c');
     }

     return {
          get: callHTTP
     };
});

Collectives™ on Stack Overflow

Angular $http.get with dynamic route?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related