Angular: Using fake backend

http://angularjs.org/

by Varun Krishna P

HTML

<script src="http://code.angularjs.org/0.10.6/angular-0.10.6.js"></script>
<script src="http://code.angularjs.org/0.10.6/angular-mocks-0.10.6.js"></script>
<h3>Simple example of using $httpBackend mock on jsfiddle</h3>


<a ng:click="switchTpl()">switch tpl</a> (current tpl: {{template[current]}})<br />
<ng:include src="template[current]"></ng:include>
<hr />

<button ng:click="loadPassword()">load from angularjs.org (JSONP)</button><br />
Password: {{promise.data.password}}

CSS

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

JavaScript

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

// we want to use $httpBackend mock
app.config(function($provide) {
  $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});

// define our fake backend
app.run(function($httpBackend) {
  // do not bother server, respond with given content
  $httpBackend.whenGET('template1.html').respond(200, 'just some content', {header: 'one'});
  // you can specify only content, it will respond with 200 status code
  $httpBackend.whenGET('template2.html').respond('Another content');
  // do real request
  $httpBackend.whenJSONP().passThrough();
});


// a controller
function Main($http) {
    this.current = 0;
    this.template = ['template1.html', 'template2.html'];
    
    this.switchTpl = function() {
        this.current = (this.current + 1) % this.template.length;
    };
    
    
    this.loadPassword = function() {
        this.promise = $http.jsonp('http://angularjs.org/generatePassword.php?callback=JSON_CALLBACK');
    };
}