Angular $httpBackend faker

<!DOCTYPE html>
<html ng-app="demo">
<head>
  <title>Angular http faker - demo</title>
  <link rel="stylesheet" href="http://getskeleton.com/dist/css/skeleton.css">
</head>
<body ng-controller="MainCtrl">
  <div class="container">
    <h1 class="section-heading">Angular http faker</h1>
    <div class="row">
      <div class="one-half column">
        <h4>[GET]</h4>
        <ul>
          <li ng-repeat="obj in getData">
            {{obj.id}} <br/>
            {{obj.title}} <br/>
            {{obj.completed}} <br/>
          </li>
        </ul>

        <h4>[POST]</h4>
        <ul>
          <li ng-repeat="post in postData">
            {{post | json}}
          </li>
        </ul>
      </div>
      <div class="one-half column">
        <h4>[PUT]</h4>
        <ul>
          <li ng-repeat="put in putData">
            {{put | json}}
          </li>
        </ul>

        <h4>[DELETE]</h4>
        <ul>
          <li>
            {{deleteData}}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-mocks.js"></script>
  <script src="angular-http-faker.js"></script>
  <script src="data.js"></script>
  <script>
  /*global angular*/
  var demo = angular.module('demo', ['httpFaker']);

  demo.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('/api/todos').success(function (data) {
      $scope.getData = data;
    });

    $http.post('/api/todos', {
      title: 'Item coming from POST request',
      completed: true
    }).success(function (data) {
      $scope.postData = data;
    });

    $http.delete('/api/todos/2').success(function (data) {
      $scope.deleteData = "DELETE Completed";
    });

    $http.put('/api/todos/2', {
      title: 'Title changed',
    }).success(function (data) {
      $scope.putData = data;
    });

  }]);
  </script>
</body>
</html>

# Angular http faker
https://github.com/enricolucia/angular-http-faker

A Backend less http requests faker useful to be injected in plunker or jsfiddle projects.

Demo here: http://embed.plnkr.co/qGKhRdrVFFMkvC2R2048

### Available HTTP requests
 - GET
 - POST
 - PUT
 - DELETE

### Tech

Angular-http-faker uses the following tools/library:

* [AngularJS] - HTML enhanced for web apps!
* [Angular-Mocks] - Testing related angulary library


### Installation

 * Include angular-http-faker.js to your html
 * Customize data.js according to what your http requests should behave like
 * Include data.js to your html after angular-http-faker.js
 * Add as a dependency to your app `httpFaker`
 * Start to use your $http request as you wish

### Development

Want to contribute? Great, fork it or contact me!

License
----

MIT


**Free Software, Hell Yeah!**
[Angular-Mocks]:https://docs.angularjs.org/api/ngMock/object/angular.mock
[AngularJS]:http://angularjs.org

/*global angular*/

angular.module('httpFaker', ['httpFaker.data'])

  .config(['$provide', function( $provide) {
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
  }])
  .run(['$httpBackend', 'httpData', function($httpBackend, httpData) {
    var localData = httpData.response;

    $httpBackend.whenGET(httpData.apiUrl).respond(200, localData);

    $httpBackend.whenPOST(httpData.apiUrl).respond(function(method, url, data, headers) {
      var newItem = JSON.parse(data);
      newItem.id = localData.length;
      localData.push(newItem);

      return [201, newItem];
    });

    $httpBackend.whenPUT(httpData.apiActionUrl).respond(function(method, url, data, headers) {
      var item = JSON.parse(data);
      for (var i = 0,l = localData.length; i < l; i++) {
        if (localData[i].id === item.id) {
          localData[i] = item;
          break;
        }
      }

      return [200, item];
    });

    $httpBackend.whenDELETE(httpData.apiActionUrl).respond(function(method, url, data, headers) {
      var regexGroup = httpData.apiUrl + "/(\\d+)";
      var regex = new RegExp(regexGroup, "g");

      var id = regex.exec(url)[1]; // First match on the second item.

      for (var i = 0, l = localData.length; i < l; i++) {
        if (localData[i].id === id) {
          var index = localData.indexOf(localData[id]);
          localData.splice(index, 1);
          break;
        }
      }

      return [204];
    });

    $httpBackend.whenGET(new RegExp(httpData.ignoreUrl)).passThrough();
  }]);

/*global angular*/
angular.module('httpFaker.data', [])
  .factory('httpData', [function () {
    return {
          // Your Fake GET data to be returned.
          response: [
            {
              id: 0,
              title: 'Finish fake backend',
              completed: true
            },
            {
              id: 1,
              title: 'Finish fake backend',
              completed: false
            },
            {
              id: 2,
              title: 'Finish fake backend',
              completed: true
            }
          ],
          // Your Fake api url.
          apiUrl: '/api/todos',
          // Your Fake api PUT DELETE url to match.
          apiActionUrl: /^\/api\/todos\/\d+$/,
          // File extensions to be ignored and issue a real http request.
          ignoreUrl: '.html'
      };

  }]);