Paramaterize the base URL in an Angular JS $resource

Another way you can tackle this is use a provider and config it in the config stage.

Here is an example of something similar I did a while back.

.provider('Environment', function () {
    var environments = {
        dev: {
            root: 'http://localhost',
            port: 3000,
            api: '/api',
            version: 'v1'
        }
    };
    var selectedEnv = 'dev';
    var self = this;

    this.setEnvironments = function (envs) {
        if (!Object.keys(envs).length)
            throw new Error('At least one environment is required!');

        environments = envs;
    };

    this.setActive = function (env) {
        if (!environments[env])
            throw new Error('No such environment present: ' + env);

        selectedEnv = env;
        return self.getActive();
    };

    this.getEnvironment = function (env) {
        if (!env)
            throw new Error('No such environment present: ' + env);
        return environments[env];
    };

    this.getActive = function () {
        if (!selectedEnv)
            throw new Error('You must configure at least one environment');

        return environments[selectedEnv];
    };

    this.getApiRoute = function () {
        var active = self.getActive();
        return active.root + (active.port ? ':' + active.port : '') +
            active.api + (active.version ? '/' + active.version : '');
    };

    this.$get = [function () {
        return self;
    }];
})

Then in the config phase:

.config(function (EnvironmentProvider) {

    EnvironmentProvider.setEnvironments({
        dev: {
            root: 'http://10.0.0.3',
            api: '/api',
            version: 'v1'
        },
        localonly: {
            root: 'http://localhost',
            api: '/api',
            version: 'v1'
        },
        prod: {
            root: 'https://myapp.mybackend.com',
            api: '/api',
            version: 'v1'
        }
    });

    //Set prod as the active schema
    EnvironmentProvider.setActive('prod');
});

Later in some controller/service/factory:

.factory('API',function($resource, Environment){
 return {
  User: $resource(Environment.getApiRoute() + '/users/:id', {id: '@_id'}),
  OtherResource: $resource(Environment.getApiRoute() + '/otherresource/:id', {id: '@_id'})
 }
});

Why not make use of the $location service?

For example, how about the following to handle the base url, and, if the application is running from localhost, include the port number? Additionally, be able to include either http or https based on the current URL?

var host = $location.host();
if (host === "localhost")
  host += ":" + $location.port();
var url = $location.protocol() + "://" + host + "/whateverElseYouWantInThePath";

and then use url where you need it?

From the Definition of resource,

• @param {string} url A parametrized URL template with parameters prefixed by : as in
• /user/:username. If you are using a URL with a port number (e.g.
• http://example.com:8080/api), you'll need to escape the colon character before the port
• number, like this: djResource('http://example.com\\:8080/api').

So you have to define your config.baseURL() as follows,

config.baseUrl = function(){
   return 'http://server.com\\:port/rest_part/';
}

Here is a horrible but working workaround. Instead of...

$resource(config.baseURL() + '/api/v2/foo/:id', {id: '@id'})

... which is only evaluated once, use an object that implements String-methods that ngResource evaluates before each request:

var url = {};
url.value = function() {return config.baseURL() + '/api/v2/foo/:id'};
url.split = function (separator,limit) { return url.value().split(separator,limit) };
url.replace = function (match, other) { return url.value().replace(match, other) };
url.toString = function() { return url.value(); }
$resource(url, {id: '@id'})