title: Is it possible to use parameterized URL templates with angular $http service
body: <p>I'm using $resource for my RESTful api's and love the parameterized URL template for example <code>'api/clients/:clientId'</code></p>
  
  <p>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.</p>
  
  <p>The only drawback is I lose the parameterized URL templates. I would love to define a url like<code>'api/clients/:clientId/orders/:orderId'</code> and just pass <code>{ clientId: 1, orderId: 1 }</code>. I realize I can build the url dynamically but was hoping $http supported the parameterized template and I just haven't found it yet.</p>
  
  <p>All the best</p>
  
  <p><strong>UPDATE 7/5</strong></p>
  
  <p>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.</p>
  
  <p><strong>1. Use $interpolate:</strong></p>
  
  <p>Documentation for <code>$interpolate</code> <a href="https://docs.angularjs.org/api/ng/service/$interpolate">here</a></p>
  
  <pre><code>var exp = $interpolate('/api/clients/{{clientId}}/jobs/{{jobId}}', false, null, true);
  var url = exp({ clientId: 1, jobId: 1 });
  </code></pre>
  
  <p><br />
  <strong>2. Write your own url interpolation function</strong></p>
  
  <p>Ben Nadel has a great post on this exact topic <a href="http://www.bennadel.com/blog/2613-using-url-interpolation-with-http-in-angularjs.htm">here</a>.</p>
  
  <p><br />
  <strong>3. Steal the functionality right out of angular-resource</strong></p>
  
  <p>Check out setUrlParams on Route.prototype in <a href="https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js">angular-resource.js</a>. It is fairly straightforward.</p>
  
  <h3>Sample data service using $interpolate</h3>
  
  <pre><code>(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);
              }
          };
  
      }]);
  
  })();
  </code></pre>