Very often, I was asked by my clients to develop a backend less AngularJS app. It happens frequently because the backend usually takes a lot of time to work before it can go production. The frontend, on the other hand, although it can be very complicated and there are a lot of techniques to implement but as soon as we have the first PSD files, we can start working page by page until finish. That’s why it’s common to develop a backend less AngularJS app and integrate real backend API later. Besides that, Single Page Application (SPA) makes it very easy  to separate frontend and backend.

This demand is real but I’ve struggled to find a good example on backend less AngularJS development on internet. Most of the articles I found only talk about using $httpBackend to mock your $http service. With me, this is ok but it is not enough. If our app need to update and delete data, if we only use $httpBackend our app can’t reflect changes when we create, update or delete data. So we need another approach. Let’s me show you my completed approach for backend less AngularJS development in this article.

Introduce backend less AngularJS Todo app

The todo app is very famous for any SPA developer, but this time we want to store todo data on backend server and we need to make our app working with new APIs. Our backend team are working the APIs but they can’t finish anytime soon yet so our frontend team need to create a backend less todo app. When backend team finish the APIs, this todo app should work properly without much changes.

In order to make our todo app simple, this app only has these features:

  • Display todo
  • Delete todo
  • Mark todo as completed

Other features like edit and show completed, deleted todo are not included in this version.

You can look at the demonstration our todo app at here: http://davidtran.github.io/angular-backendless/

Dependencies:

In this todo app, we gonna use these packages/dependencies:

  • AngularJS@1.4.8
  • Faker@3.0.1: this package is used to generate some fake data
  • angular-mocks@1.4.8 this package contains $httpBackend which is used to mock fake data to $http service
  • ngstorage@0.3.10 this package contains $localStorage which is used to store data on localStorage of the browser

Let’s use bower to install these packages. Be careful to use correct case of the package names, some packages has same name but different case, eg: faker and Faker are different packages.

Project structure:

backend less angular app project structure

We have 3 modules for this app:

  • app: this module is use to bootstrap our app
  • app.todo: this is the heart of our app. It has responsibility to display, update and delete our todo.
  • app.mockdata: mock http request, response request and generate some fake data.

Let’s go through each module in our app.

app:

This module just loads other modules in our app. There is nothing special so let’s take a look at the source code and move forward

app.js:

 

index.html:

 

app.todo

This is the heart of our application. We have 1 service and 1 controller for this module. We just develop it as it gonna to consume the real APIs. Let’s see each file in this module.

todoApi.service.js:

 

todoCtrl.controller.js:

 

todoApi will consume the APIs just like a real application. By this way, when we run our app in production, it still can make actual request the real APIs.

Let’s go to the app.mockdata to see how the whole backend less app works. This is the key module of this article.

app.mockdata

In this module, we load 2 third-party modules, they are:

  • ngMockE2E: this module provides $httpBackend which is required to mock http request.
  • ngStorage: this module provides $localStorage which we use to store todo data.

In this module, we use a mockTodoApi service to store, update, remove todo data. It looks like a mini backend but it doesn’t have to be complicated. A real backend may involve many logics behind but in this service we just use some simple function to modify data.

mockdata.js:

 

We mock the http request in this file – the module creation file. We use $httpBackend to mock each http request. For DELETE and PATCH methods, we use a simple regex to extract todo id from url, after that we use mockTodoApi service to return data.

mockTodoApi.service.js:

 

This service has almost same methods with todoApi service in app.todo. We make the method names similar to easy recognize the mock methods. It does handle some logic but should be very simple.

We use Faker to generate some initial data.

At this moment, our app is almost done. We can run our backend less app. When the backend team have finished the real APIs, you just need to remove app.mockdata module from dependencies of app.js and our app still works as expected. See the demonstration at here: davidtran.github.io/angular-backendless

In summary

When develop a backend less AngularJS app. You just need to develop the main module as it gonna consume real APIs, after that you develop the mock module which use $httpBackend, $localStorage to response the request from the main module. When your backend team finish the APIs, you remove mock module from the app.

Notice, this approach might require you to put some little effort to our application, but it could make your client happy. Happy coding !