$http && $resource Simple CRUD Sample

http://angularjs.org/

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.0.1/angular-mocks-1.0.1.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-resource-1.0.1.min.js"></script>
<script type="text/ng-template" id="/list.html">
{{message}}
<hr/>
   <a href="" ng-click="newCustomer()">New Customer</a>  
   <ul>
      <li ng-repeat="customer in customers"><a href="" ng-click="edit(customer._id)">{{customer.name}}</a>
        [<a href="" ng-click="delete(customer._id)">X</a>]</li>
   </ul>      
</script>

<script type="text/ng-template" id="/form.html">
<h3>{{customerOperation}}</h3>
<hr/>
<form name="customerForm">
  <p><label>OID</label>: <input type="text" name="oid" ng-model="customer._id" readonly="true" /></p>
  <p><label>Code:</label>:<input type="text" name="code" ng-model="customer.code" required="true" /></p>
  <p><label>Name:</label>:<input type="text" name="name" ng-model="customer.name" required="true" /></p>
  <hr/>
  <input type="submit" ng-click="save()" value="{{buttonLabel}}" /> <button ng-click="cancel()">Cancel</button>
</form>
</script>      

      
  <div ng-controller="MainCtrl">
    
    <button ng-click="listCustomers()">ListCustomers()</button>
    <button ng-click="cancel()">Cancel()</button>

    <table width="100%" border="1" cellspacing="0">
      <thead>
        <tr>
        <th width="50%">$http</th>
        <th>$resource</th>
        </tr>
      </thead>
      <tbody>    
      <tr>
        <td align="center">
          <input type="radio" name="callType" ng-model="callType" value="_$_HTTP_" />
        </td>
        <td  align="center">
          <input type="radio" name="callType" ng-model="callType" value="_$_RES_" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <ng-include src="view"></ng-include>          
        </td>
      </tr>  </tbody>
    </table>      
  </div>

JavaScript

angular.module('myApp', ['ngResource']);

var appMock = angular.module('appMock', ['myApp', 'ngMockE2E']);
appMock.run(function($httpBackend) {
    
    var customerList = [ 
        { _id: 123213, code: 'C1', name: 'Customer A'},
        { _id: 234234, code: 'C2', name: 'Customer B'},
        { _id: 322223, code: 'C3', name: 'Customer C'}];


  function findCustomerIndexById(id) {
    if (!id) return null;
    var index = -1;
      
    for(var i = 0; i < customerList.length; i++) {
      var o = customerList[i];
      if (id == o._id) {
        index = i;
        break;
      }   
    }
    
    return index;
  }

  $httpBackend.whenGET("partials/partial1.html").respond("GET Called 1");
  $httpBackend.whenGET("partials/partial2.html").respond("GET Called 2");  
  $httpBackend.whenGET(/\/api\/customers(\/\d*)*/).respond(function(method, url, data, headers) {      
    var parts = url.replace("/api/customers", "").split("/");
    if (parts.length != 2) {
        return [200, customerList.slice()];        
    }
    
    var id = parts[1];
    
    var index = findCustomerIndexById(id);
    
    if (index != -1) {
      return [200, customerList[index]];
    }
    
    return [404, "NOT-FOUND"];
  } );
  
  //$httpBackend.whenGET(/\/api\/customers/).respond(200, customerList.slice());

  
  $httpBackend.whenPOST("/api/customers").respond(function(method, url, data, headers) {
    console.log("POST -> " + url);
    var o = angular.fromJson(data);    
    o._id = new Date().getTime(); 
    customerList.push(o);    
    return [200, "Success"];
  } );
  
  $httpBackend.whenPUT(/\/api\/customers(\/\d*)*/).respond(function(method, url, data, headers) {
    console.log("PUT -> " + url);  
    
    var o = angular.fromJson(data);
    var index = findCustomerIndexById(o._id);

    if (index != -1) {
      customerList[index] = o;
      return [200, 'SUCCESS!!'];
    }
    
    return [404, 'NOT-FOUND!!'];
  } );
  
    
 ...