title: How dynamically change API endpoint on Angularjs services based on the domain or host application
body: <p>I have MVC web application that use Angularjs and a Web API, both application are published in different domains. Everytime thet I commit code changes TFS publish both the MVC app and the Web API and using web.config transformation it change the web config connection and app keys to point to developer, production or testing.</p>
  
  <p>Now that I am using angular I have a service that point to the API endpoint to do something for instance the login.</p>
  
  <p>...</p>
  
  <pre><code>function loginService($http, $q) {
  
          var baseUri = "http://localhost/"
  
          var service = {
              login: login,
             ...
          };
  
          return service;
  
  
          function login(user, password) {
              var deferred = $q.defer();
              $http({ method: 'POST', url: baseUri + '/api/tokens',
  ...
  </code></pre>
  
  <p>As you can see the baseUri is set to localhost but I would like it have for the production environment something like  <code>var baseUri = "http://production/"</code> and for testing <code>baseUri = "http://testing/"</code>. SO the baseUri changes depend of what is being publish by TFS.</p>
  
  <p>Remember the the domain where the MVC application is hosted is different of the WebAPI so I cannot check the domain of the angular scope and build the base URI.</p>
  
  <p>Thank you</p>