How can I extend the $http service in angular?

Question

Unfortunately, we're stuck running 1.2.26 (will upgrade to 1.2.28 when it's gemified).

In the meantime, how can I patch (heh) $http so that the short-hand patch method is available? I'm pretty new to the whole service/factory/module thing. I've done hours of searching and can't seem to figure it out.

myApp.factory('patchedHTTP', function($http, BasicService) {
  // $http['patch'] = function(url, data, config) {
  //   return $http(angular.extend(config || {}, {
  //     method: 'patch',
  //     url: url,
  //     data: data
  //   }));
  // };
  var extended = angular.extend(BasicService, {});
  extended.createShortMethodsWithData('patch');
  return extended;
});

Above is the best I've got... and it doesn't do anything XD

Patch is already avaible: https://code.angularjs.org/1.2.27/docs/api/ng/service/$http#patch — Fals, Sep 29 '15 at 20:56
1.2.27 is not gemified yet :) just want to patch this one little bit versus the whole thing. — Volte, Sep 29 '15 at 21:20

S.Klechkovski · Answer 1 · 2015-09-29T21:47:52.997

4

You can do this with an angular decorator.

A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service. For more information you can check angular documentation.

Example:

var app = angular.module('app');
app.decorator('$http', function ($delegate) {
  // NOTE: $delegate is the original service

  $delegate.patch = function () {
    // do the implementation here
  };

  return $delegate;
});

// usage
app.controller('SomeController', function($http) {
    $http.patch();
});

You can keep this decorator until you upgrade to some newer version and than just safely delete it.

edited Sep 29 '15 at 21:47

answered Sep 29 '15 at 20:54

S.Klechkovski

4,005
16
27

This is amazing. Thank you, you're quick! :) – Volte Sep 29 '15 at 21:18
I'm having trouble figuring out when/where to run this code. It can't seem to find my app instance. – Volte Sep 29 '15 at 21:32
Ok I figured it out. Had to use the config block. Do you want to update your answer to show this and then I'll select it as the answer :) – Volte Sep 29 '15 at 21:36
var app should be your module where you want the decorator registered. Example: var app = angular.module('app'); – S.Klechkovski Sep 29 '15 at 21:45
Yea, I put it right under my app declaration, and no good. :/ had to put it in the config block. – Volte Sep 29 '15 at 22:02
Interesting, I though I could bet on it working. But that is another issue that we need to solve, you can provide some more info about it. However, if it's fine for you to define it in the config phase then go with it. Thanks for mentioning that option. – S.Klechkovski Sep 29 '15 at 22:10

AWolf · Accepted Answer · 2015-09-29T23:08:06.870

The module.decorator has been added to the module API in version 1.4. That's why it is not working in 1.2.x.

Please find below a working demo or here at jsfiddle.

It took me a while to implement the patch method because I've missed to return the promise of $http. But now it should be working.

angular.module('patchDemo', [])
.config(function ($provide) {

    $provide.decorator('$http', function ($delegate) {
        // NOTE: $delegate is the original service
  $delegate.patch = function(url, data, config) {
            var paramsObj = angular.extend({}, config || {}, {
                method: 'PATCH',
                url: url,
                data: data
            });

            return $delegate(paramsObj);
        }
  
        return $delegate;
    });
})
.controller('MainController', MainController);

function MainController($http) {
    console.log($http.patch);
    //$http({method: 'PATCH', url: 'http://jsonplaceholder.typicode.com/posts/1', data: {title:'foo'}}); //>>>>>working long version of patch

    $http.patch('http://jsonplaceholder.typicode.com/posts/1', {
        title: 'foo'
    }).then(function(response) {
     console.log(response);
    });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.js"></script>
<div ng-app="patchDemo" ng-controller="MainController"></div>

How can I extend the $http service in angular?

2 Answers2