A "Tail" of Building with AngularJS

When Google Chrome first launched (yes, way back in 2008) did you geek out when you saw how fast it was? It was great right? Then you checked out how it worked to make it so fast and presented to you was AngularJS.

Aside from being incredibly fast, AngularJS has a few other features to nerd out about, like how its completely self contained, a really lightweight framework (friendly to SEOs), comes with many preloaded scripts, and swaps in code asynchronously.  All around a framework we at Delphic have wanted to dive into for some time to truly experience its powers.

Then along came the “Class of 2014 Delphic Dogs” which proved to be the perfect candidate for an AngularJS build.  

We love our four legged friends at the office. We have 14 dedicated office dogs here at Delphic, and we wanted to create something visual and engaging to promote dog-friendliness at the office and show just how much our dogs are a part of the Delphic family.  There was discussion of a “composite” presentation and Doggy Resumes that were interactive and fun to navigate through.  Our development team was fully stacked with deliverables so we needed to build something that was dynamic yet didn’t require a full database to run.  Can you see where this is going already?

AngularJs proved itself to be an ideal fit for our scenario and desired functionality.  Also, given how lightweight it is it seemed like a great balance to the image heavy design component.  

Naturally, the first thing we had to do was have a doggie photo shoot. We wanted to show them in their best light, and have some uniformity so that in the composite the focus would be on the dogs and not on any distracting multicolored backgrounds or other objects.  Then, of course, were the dog interviews, since we needed to find out what their personalities were and create a story that would resonate with any office-goer.  We also needed designs that would be mobile and desktop friendly (thanks to Emily for cranking those out btw!)  After we had the necessary collateral, we got down to code.  The site was created in plain-old-jane HTML code. A landing list page and a detail page were developed statically. These were turned into templates for Angular to be used by the ngRoute module. ngRoute allows linking within our app with our templates. To get data to our templates, we worked with a static JSON file. Angular is built to work with RESTful services, but can also work with a static file!   Initially setting up AngularJS is quite a breeze, thanks to its lightweight framework, being preloaded with scripts, and ability to swap in data asynchronously.

On live production we realized one of the limitations of AngularJS, which is that without a dynamic database, if the JSON content took too long, the page would load without the imagery, ouch!  We realized that this only became an issue if someone came in to one of the detail pages first, such as Eddie’s profile. This is because the code mandated that the server cycle through the designated entry page and locate all the assets before it would serve them up, thus sometimes causing a page to display without the images.  With a little ingenuity and research we found a workaround to resolve this, though its one functionality that will be planned for in the future.

Angular is really easy to use, and it’s really useful for creating a dynamic app in a flash. Perfect for Front End Developers because if you know HTML and JS, you already know Angular. The workflow is also really nice. We can go from design -> dynamic code really easily, so webapps are developed quickly and efficiently. The basic usage also enforces good coding practices like model view controller (MVC), which is awesome for JS developers. We recommend you give it a try!

Do you love Angular too? Share this post, and let us know about the different projects you’ve used Angular for in the comments section below!

« Prev Article
Next Article »