Ship it Day 5: AngularJS Front-End

Published in Uken Games

It was decided not too long ago that Ship it Days on the Services team would be moved from monthly to every other Friday and they sure do come up fast now. In order to help focus some of our ideas, this particular Ship it Day has a theme. Everyone on the team is going to work on a new project that our Devops engineer has been spearheading. It’s an internal system for effective deployment and easy scaling. In many respects it is very similar to Heroku in that you are able to push to a repository to deploy a new version of your code and you can choose how many instances of your application that you want to run at any time (dyno scaling).

There were a few different areas that were mentioned that could use some improvement but one that I decided to tackle was to rewrite the front-end to use AngularJS. As it stands, the UI is a simple Rails CRUD application. The lead developer on the project wanted to make the entire application API driven so that it could be reused for other things including a command line client application. AngularJS seems to be all the rage at Uken lately with it being used on an increasing number of new projects. I figured this would be a good opportunity for me to try my hand at it.

I had already read quite a bit about Angular and certainly liked what they were trying to do. Creating complex javascript applications never really clicked with me and I had even tried other lightweight frameworks like Backbone. Overall, I found the process of converting the basic Rails application to Angular to be quite straightforward. There were a few trip ups along the way including getting confirmation popups working for destructive actions and getting alert messages to show after performing actions but almost everything fell into place. Toward the end of the day, I was working on a part of the application that would require creating a nested view structure. I quickly learned that the angular-route would not do quite what I wanted out of the box. I think I will have to look into ui-router to address that problem since a lot of people seem to recommend that.

By demo time, I had not quite finished wiring all of the different actions up the backend but I felt that I had made good progress. I think I will continue trying to finish this up in my off time to ensure that it sees production soon!

P.S. For anyone looking to learn about Angular, I would definitely recommend checking out the Egghead videos. They are really easy to follow and well explained.

Written By

Andrew Halligan

Published November 14, 2013