prefix $http url

Question

I can't seem to find an answer to what seems like a reasonable question.

I am using the $http service to call web services for all of my app. All of the server API is hosted at a particular address. Is there any way in which I can get $http to always prefix the provided URL with the API server?

For example, if my API is at http://myAPi/API/, I would like to be able to call:

$http.get("User")...

as opposed to:

$http.get("http://myAPI/API/User")

And Angular prefixes the request with the server address. The aim is to not have the URL spread throughout the app.

Is there a way to achieve this with Angular?

possible duplicate of Using a Relative Path for a Service Call in AngularJS — Stewie
– Stewie, Commented Jun 18, 2013 at 11:23
The possible duplicate details what I currently have - essentially the server location stored in a variable of some kind and prefixed manually to each call. I'm looking for a way for the prefix to be automatically prefixed, if this is possible. — jwest
– jwest, Commented Jun 18, 2013 at 11:55

Jim Vercoelen · Accepted Answer · 2016-05-03 16:42:30Z

6

It's an old question but I made a solution some time ago

angular
  .module('app')
  .config(function ($httpProvider) {
    $httpProvider.interceptors.push(apiInterceptor);
   });

// api url prefix
var API_URL = 'http://localhost:8080/';

function apiInterceptor ($q) {
  return {
    request: function (config) {
      var url = config.url;

      // ignore template requests
      if (url.substr(url.length - 5) == '.html') {
        return config || $q.when(config);
      }

      config.url = API_URL + config.url;
      return config || $q.when(config);
    }
  }
}

answered May 3, 2016 at 16:42

Jim Vercoelen

1,0772 gold badges15 silver badges43 bronze badges

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

Comments

Lukus · Accepted Answer · 2013-08-29 07:12:19Z

5

Since $http doesn't have a built-in way of handling this case (other than editing the angular.js source code), you can either wrap your $http in a service:

apiService.get('user'); //where the service defines the $http call and builds the URL

... or simply create an angular constant:

angular.module('myApp', []).constant('apiPrefix', 'http://myAPI/API/')

$http.get(apiPrefix + 'User')

Either way would result to "not have the URL spread throughout the app".

answered Aug 29, 2013 at 7:12

Lukus

1,0481 gold badge11 silver badges11 bronze badges

Comments

Guiguidu42 · Accepted Answer · 2013-11-25 14:48:47Z

-1

It's possible to add an interceptor to the http provider.

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config || $q.when(config);
    }
}

Then you register your interceptor.

$httpProvider.interceptors.push('myHttpInterceptor');

You just have to edit the config :)

answered Nov 25, 2013 at 14:48

Guiguidu42

1

1 Comment

Utopik Over a year ago

Be careful doing that, templates are intercepted too. You don't want to load /api/my_template.html

Collectives™ on Stack Overflow

prefix $http url

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related