How to dynamically change $http service URL in AngularJS?

Question

I am using angular $http service to get/post the data. Currently all the services using common URL to retrieve the data. Now I have requirement where I want to switch between the 2 URLs based on specific condition. So what will be the best approach to implement this functionality seamlessly without making many changes into existing service code?

Note - I don't want to write identification logic at each services.

I created sample example to explain the problem. In example currently I am using TEST_FILE1 from constant service as URL but i want to switch between TEST_FILE1 and TEST_FILE2 based on specific condition say based on random number returned from randomNumberService. Sample Example - Sample Plunkar Any help appreciated!

app.constant('RESOURCES', (function() {
  return {
    TEST_FILE1: 'test.json',
    TEST_FILE2: 'test1.json',
  }
})());

app.factory('myService', function($http, RESOURCES) {
  return {
    async: function() {
      return $http.get(RESOURCES.TEST_FILE1); //1. this returns promise
    }
  };
});

app.factory('randomNumberService', function() {
  return {
    getRandomNumber: function() {
      return Math.floor((Math.random() * 6) + 1);
    }
  }
});

GG. · Accepted Answer · 2016-04-16 14:17:58Z

1

To not repeat the URL choice logic everywhere, then you have to move it in an other factory.

app.factory('identification', function (RESOURCES, randomNumberService) {
    return {
        getUrl: function () {
            var randomNumber = randomNumberService.getRandomNumber();
            var url = randomNumber > xxx ? RESOURCES.TEST_FILE1 : RESOURCES.TEST_FILE2;
            return url;
        }
    };
});

app.factory('myService', function($http, identification) {
  return {
    async: function() {
      return $http.get(identification.getUrl());
    }
  };
});

app.factory('randomNumberService', function() {
  return {
    getRandomNumber: function() {
      return Math.floor((Math.random() * 6) + 1);
    }
  }
});

edited Apr 16, 2016 at 14:17

answered Apr 16, 2016 at 13:49

GG.

22k14 gold badges93 silver badges133 bronze badges

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

4 Comments

Sumit Deshpande Over a year ago

Thanks for the answer! But I specifically mentioned that I am not looking URL identification logic at the individual service level in that case I have to mimic same logic into all my services.

Sumit Deshpande Over a year ago

Thanks CG! Appreciate!

GG. Over a year ago

Your welcome! Would appreciate if you could upvote the answer. :)

Sumit Deshpande Over a year ago

Please edit your answer so that identification will have dependency of RESOURCES and remove RESOURCES from myService to make it correct...Thanks :)

Collectives™ on Stack Overflow

How to dynamically change $http service URL in AngularJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related