This post is part of an ongoing series which will attempt to demonstrate and explain the Crunchinator. Each post will describe a different part of the technology behind the Crunchinator, and hopefully each will be useful as a stand-alone tutorial.

While we might have known how we wanted to visualize data with the Crunchinator, we were not so certain on how to interact with these visualizations or the schema our API would use to serve the data to our Angular application. After a few discussions, we decided that quickly iterating over a handful of UI/UX proposals would be the best way for us to understand how the Crunchinator would be used.

Not wanting to wait for our backend developers to finish scraping Crunchbase data and building up the endpoints we thought we needed at the time, the frontend team decided to explore faking API responses without a backend. Unchaining the interface from the API during development would allow for the frontend team to quickly change endpoint schemas to fit their needs without having to distract the backend developers from creating their scraping and data normalization system.

Setting up a fake Backend

The Angular mocking module, ngMockE2E, can be leveraged to create a fake backend during development. However, in order to use the mocking modules, you must include angular-mock.js to your app. To do this, simply add the following right under your include for Angular:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-mocks.js"></script>

Now that you have access to the mocking services, let’s create a fake backend for a TODO list application. We’ll be doing all of our backend faking in a file called apiFaker.js. Include this script underneath the angular-mock.js include.

<script src="/path/to/js/apiFaker.js"></script>

Our app will have a single endpoint tasks, which should return a list of tasks with a title and a dueDate.

Using Angular’s $provide.decorator() we are able to intercept the creation of other services which allows us to override or modify them. In our example, line 11 decorates $httpBackend with various methods from the ngMockE2E module. The subsequent run block creates a backend definition for ‘GET’ requests on the /tasks URL which responds with our defined task list. This example can be extended to randomly create and serve data with tools such as Faker. Or handle other HTTP methods such as POST requests.

Sometimes we have to be real

Let’s say we’re a bit further along in our TODO list application’s development. We can now do all the CRUD actions to a task on a real API, but we just got tasked to add messaging system. Once again, the backend people are working hard creating the server-side system for this feature, but the frontend team really wants to start on their share of work.

Luckily, we can modify our apiFaker.js to serve fake messages while still maintaining the real functionality for tasks by using passThrough() instead of respond() on our backend definitions.

$httpBackend registers your backend definitions in the order they’re declared. It will also try and match the requests in that order as well. If the catch-all passThrough() definitions are declared above the message definition, all requests will attempt to hit the real API.

Hopefully this technique helps you to streamline your front-end development moving forward. If you have any questions don’t hesitate to ask in the comments.