等效于AngularJS中的Ember Fixture适配器

Question

Has anyone implemented something like the ember fixture adapter in AngularJS for mocking the backend during development?

I see that AngularJS has the $httpBackend for doing unit tests, but can this be used like the ember fixture adapter to run the actual application?

If there is nothing currently available, how could this be implemented in a way that allows for an easy transition between fixtures and an actual backend (for dev and prod environments)?

Answer 1

Personally I prefer using mockjax( https://github.com/appendto/jquery-mockjax ).

$.mockjax({
    url:  '/colors',
    dataType: 'json',
    responseText: {
    colors:[
      {
        id: 1,
        color: "red"
      },
      {
        id: 2,
        color: "green"
      },
      {
        id: 3,
        color: "blue"
      }
     ]
  }
});

Here's an ember example, but it'd work the exact same in angular.

http://emberjs.jsbin.com/OxIDiVU/73/edit

Answer 2

It turns out that AngularJS has two services called $httpBackend; one for unit testing, and the other one is meant for e2e testing or "backend-less" development. So you can do the following (adapted from the AngularJS docs )

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

//...

var myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']);
myAppDev.run(function($httpBackend) {
  phones = [{name: 'phone1'}, {name: 'phone2'}];

  // returns the current list of phones
  $httpBackend.whenGET('/phones').respond(phones);

  // adds a new phone to the phones array
  $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
    var phone = angular.fromJson(data);
    phones.push(phone);
    return [200, phone, {}];
  });
  $httpBackend.whenGET(/^\/templates\//).passThrough();
  //...
});

angular.bootstrap ($('html'), ['myApp', 'myAppDev']);

Make sure you include a refernce to the ng-mock library.

Here is a simplified working demo.