title: Change the base URL for a resource
body: <p>I'm using Angular to consume a RESTful API on the same application. I have a $resource setup for the <code>contacts</code> resource at <code>http://sample-site.com/api/contacts</code></p>
  
  <p>This is great and it works, however I need to interact with the basic CRUD of <code>/api/contacts</code> on different pages of the application.</p>
  
  <p>For example, I need to interact with contacts again at another page on web app hosted at <code>http://sample-site/friends/{friend-id}</code>. However when I try to use my contact resource on that page, the url to the resource is appended to the <strong>current</strong> URL:</p>
  
  <p>GET | <code>http://sample-site/friends/1/api/contact</code></p>
  
  <p>but what I really need is to GET | <code>http://sample-site/api/contact</code> on that resource on that page.</p>
  
  <p>Is there a way to configure a resource to define a different base URL other than in relation to the current page?</p>
  
  <p>This is my attempt to change the base URL inside the resource:</p>
  
  <pre><code> .factory('ContactRest', ['$resource', '$location', function($resource, $location) {
      var host = $location.host()
  
      return $resource('https://:url/:action', {}, {
      // Normal CRUD actions
      query: { 
          url : host,
          action : 'api/contact',
          method : 'GET',
          isArray : true,
      }
   }]);
  </code></pre>
  
  <p>Which makes <code>https://sample-site/friends/1/sample-site/api/contact</code>. Regardless of how I define the $resource, just keeps appending any URL's to the base URL. I need to change the very base of the URL.</p>