Angular: Using fake backend

http://angularjs.org/

by manoj

HTML

<script src="http://code.angularjs.org/1.1.1/angular.js"></script>
<script src="http://code.angularjs.org/1.1.1/angular-mocks.js"></script>
<h3>Example of $httpBackend error when POSTing. Example forked from this fiddle: http://jsfiddle.net/vojtajina/DQHdk/</h3>
<p>Note: the original fiddle also produces the result of this fiddle when one tries to POST</p>

<br />
<button ng-click="addPhone()">Add a phone via POST</button><br />
Watch the console for errors.

<ul>
  <li ng-repeat="phone in phones">{{phone.name}}</li>
</ul>

CSS

h3 {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 15px;
}

JavaScript

var app = angular.module('myApp', ['ngMockE2E']);

// define our fake backend
app.run(function($httpBackend) {

  var phones = [{name: 'phone1'}, {name: 'phone2'}]; 
  
  $httpBackend.whenPOST('/phones').respond(function(method, url, data, headers){
    console.log('Received these data:', method, url, data, headers);
    phones.push(angular.fromJson(data));
    return [200, {}, {}];
  });
  
  $httpBackend.whenGET('/phones').respond(function(method,url,data) {
    console.log("Getting phones");
    return [200, phones, {}];
  });
});


// a controller
function Main($scope, $http) {
  
  $scope.update = function() {
    $http.get('/phones').success(function(data) {
      $scope.phones = data;
    });
  };
 
  $scope.addPhone = function(){
    $http.post('/phones', {'name':'New Phone'}).success(function() {
      $scope.update();
    });
  };
  
  $scope.update();
}