AngularJS: Where can I see $httpBackend responses in my browser directly?

Question

My background is not in web development so my terminology might be off, apologies.

In short, I have trouble figuring out where $httpBackend is serving data. This question is as much about finding a fix as it is about understanding better how $httpBackend works in general. Here more details.

I am creating a single page app with AngularJS. As seeder I'm using the AngularJS "Phone Catalog" sample project from their website, which uses npm and bower.

I will need the app to access some RESTful web services, which for the time being I want to mock. I came across ngMockE2E, which I am now using. So instead of just loading the main app.js in my index.html, I am now loading devapp.js as well, which has my app and ngMockE2E as dependencies: var devapp = angular.module('devapp', ['app', 'ngMockE2E']);.

Within devapp I mock my web service like so:

devapp.run(function($httpBackend) {
    var items = [{{"id": 1, "price": 5}, {"id": 2, "price": 10}}];

    $httpBackend.whenGET('/json/items').respond(items);

    // let all other requests through to app
    $httpBackend.whenGET(/^\w+.*/).passThrough();
});

Now when I run my app and I build services that send $http calls to /json/items, it all works fine.

But I'd like to see the output in my actual browser. For some reason I can't seem to find the URL!

My index.html kicks in when I go to localhost:8000/app/, and most addresses for my partials look like localhost:8000/app/#/login and so on. But where do I have to go to get the JSON form my fake $httpBackend?

I tried localhost:8000/json/items which gives me "Not Available", and localhost:8000/app/#/json/items or localhost:8000/app/json/items, which just sends me to my index.html with no partials loaded, and I've tried every combination I could think of.

Answer 1

The point of $httpBackend is to Fake the HTTP backend for Unit Testing. You aren't actually trying to Test the backend, though. The goal is to be able to test any method that uses the $http service and return the fake data instead of the real server data.

from the Angular.js Documentation:

When an Angular application needs some data from a server, it calls the $http service, which sends the request to a real server using $httpBackend service.

Essentially, the $httpBackend.whenGET() function is a hook into the $http service, which gets evaluated before any calls to your server get processed. Any time you make a call using $http, it will get sent back fake data if it matches the route rule you provided. This allows you to write your controllers as you normally would, test them, then remove the fake data stub without affecting the controller that was tested.

Put another way, the $httpBackend service doesn't handle any routes, or return any data directly, it instead changes the way that $http responds back to other modules. In order to verify that you are indeed getting back fake data, you would need to create an actual service to respond to a route which would make an $http request to that data endpoint.