Is it possible to use parameterized URL templates with angular $http service

Question

I'm using $resource for my RESTful api's and love the parameterized URL template for example 'api/clients/:clientId'

This works great for CRUD operations. Some of my api's however are just reports or read-only end points without the need for the full RESTful treatment. I felt it was overkill to use $resource for those and instead used a custom data service with $http.

The only drawback is I lose the parameterized URL templates. I would love to define a url like'api/clients/:clientId/orders/:orderId' and just pass { clientId: 1, orderId: 1 }. I realize I can build the url dynamically but was hoping $http supported the parameterized template and I just haven't found it yet.

All the best

UPDATE 7/5

The word I was missing in my searches is 'Interpolate'. More information comes up when I search for 'url interpolation in angular $http'. The short answer looks to be 'No' $http doesn't support url interpolation. There are a few fairly easy ways to accomplish this however.

1. Use $interpolate:

Documentation for $interpolate here

var exp = $interpolate('/api/clients/{{clientId}}/jobs/{{jobId}}', false, null, true);
var url = exp({ clientId: 1, jobId: 1 });

2. Write your own url interpolation function

Ben Nadel has a great post on this exact topic here.

3. Steal the functionality right out of angular-resource

Check out setUrlParams on Route.prototype in angular-resource.js. It is fairly straightforward.

Sample data service using $interpolate

(function () {
    'use strict';

    var serviceId = 'dataservice.jobsReports';

    angular.module('app').factory(serviceId, ['$http', '$interpolate', function ($http, $interpolate) {

        var _urlBase = 'http://localhost:59380/api';
        var _endPoints = {
            getJobsByClient: {
                url: 'Clients/{{clientId}}/Jobs',
                useUrlInterpolation: true,
                interpolateFunc: null
            }
        };

        // Create the interpolate functions when service is instantiated
        angular.forEach(_endPoints, function (value, key) {
            if (value.useUrlInterpolation) {
                value.interpolateFunc = $interpolate(_urlBase + '/' + value.url, false, null, true);
            }
        });

        return {
            getJobsByClient: function (clientId) {
                var url = _endPoints.getJobsByClient.interpolateFunc({ clientId: clientId });
                return $http.get(url);
            }
        };

    }]);

})();

Answer 1

To prevent this being "unanswered" when it has been answered ...

1. Use $interpolate:

Documentation for $interpolate here

var exp = $interpolate('/api/clients/{{clientId}}/jobs/{{jobId}}', false, null, true);
var url = exp({ clientId: 1, jobId: 1 });

2. Write your own url interpolation function

Ben Nadel has a great post on this exact topic here.

3. Steal the functionality right out of angular-resource

Check out setUrlParams on Route.prototype in angular-resource.js. It is fairly straightforward.

Sample data service using $interpolate

(function () {
    'use strict';

    var serviceId = 'dataservice.jobsReports';

    angular.module('app').factory(serviceId, ['$http', '$interpolate', function ($http, $interpolate) {

        var _urlBase = 'http://localhost:59380/api';
        var _endPoints = {
            getJobsByClient: {
                url: 'Clients/{{clientId}}/Jobs',
                useUrlInterpolation: true,
                interpolateFunc: null
            }
        };

        // Create the interpolate functions when service is instantiated
        angular.forEach(_endPoints, function (value, key) {
            if (value.useUrlInterpolation) {
                value.interpolateFunc = $interpolate(_urlBase + '/' + value.url, false, null, true);
            }
        });

        return {
            getJobsByClient: function (clientId) {
                var url = _endPoints.getJobsByClient.interpolateFunc({ clientId: clientId });
                return $http.get(url);
            }
        };

    }]);

})();