Blog

- October 14, 2015

Mobile and front-end developers are fond of Backend-as-a-Service solutions to quickly setup the server infrastructure for their application. You need to deliver an app to your customer, and you’re more on the client-side of the story, so diving into the arcane of backend development, application deployment and server administration can be seen as a painful chore to you. Fortunately, there are some nice services like APISpark that can greatly alleviate the pain!

Material Design looks great and AngularJS is awesome… And they can be used together with Angular Material! That is fan-tas-tic!
Let’s have some fun with these technologies. We will build our own material application: another Todo app? No! A Contacts app!

First of all, let’s see the Material starter project to see how to handle AngularJS and Material for a web application. Actually, you can see an online version here.

angularjs-project1angularjs-project2

To run it on your computer, you can start with their getting started section. Then, you realize this is a list of contacts without any editing capability available. But you want to be able to edit the contacts.

You can tweak the code and get this result here.

angularjs-project3angularjs-project4

The code is available on GitHub. Alright, this is nice but they are still mockup contacts. You want your own contacts and persist them for real. Let’s get a backend for this: APISpark.

Log into the platform, use the quickstart wizard to create your API with sample data. These data includes the entity Contact, nice! Now, you can copy the endpoint, the credentials and update the code of the Contacts service of your app to get, post, put and delete your contacts.

For example:

angularjs-project5

Also, you notice that the sample contacts do not have the avatar attribute. No problem, let’s update the model:

Go to the entity store, add the attribute ‘avatar’ to Contact and redeploy the store (“Deploy” button).

angularjs-project6

Then go to the api and re-deploy the API as well.

Now, you can go back to your app and start fill in the avatar for each of your contacts.
Tadaa! You have your contacts app with the latest web technologies. Enjoy!

Also, you can view the final result here and fork the code from here.

angularjs-project7angularjs-project8

In a short time frame, you’ve been able to make your contacts app real, by taking advantage of APISpark, as a backend for your nice Material and AngularJS frontend. You can focus on the user interactions, the logic flow of the app, and coming up with a pretty sexy UI, rather than becoming an experienced server-side developer with admin skills to top it all. Now, go play with the app!