This is the message

Getting into AngularJS

Daniel Tate
Wednesday 25 March 2015


The definition:

AngularJS is a structural framework for dynamic web applications. AngularJS lets you express your application's components clearly and succinctly.

We thought it would be a good time to do some research into one of the most popular front end frameworks around, so we decided to dive in.

I looked for some introductory tutorials online, eventually finding a great guide which was very easy to follow along here: codeschool.com/courses/shaping-up-with-angular-js. Be aware the Code School tutorial is using a previous version so your mileage may vary. AngularJS itself also has a tutorial on their website although I think this one will be a little more difficult to follow if you are a beginner docs.angularjs.org/tutorial. Once the tutorials were done it was time to plan the project.

We chose to change the way the blog pages were working on the Frontend site. Originally we had static HTML pages being served for each post. We also had another static page that has the same HTML content with an extra class which toggles the content area or listings depending on its state. This was to account for mobile usability.

AngularJS would solve this inflated way of doing things. Our updated AngularJS solution now uses one core template for the page, one template for a listing item and one for a post. The listing items and posts are reused and repeated frequently so this set up was optimal.

After following the tutorial, the core application was up and running all within a short time frame. I only encountered slight issues when I encountered subjects that weren’t covered in the Code School tutorial. Situations which were not covered but were needed for this project included stateful URLs for history, managing the content of the first load or bringing in unsanitized HTML content.

A huge benefit of AngularJS is the way it treats data. Our new set up includes, a core template, a list of posts for navigation and the post itself.

Core template

We load data that represents the blog post including the title, content, author and date published. The data loaded fills the templates where applicable

Content data

This prevents reloads on the page which in turn saves us reloading the CSS, JavaScript and images, which significantly speeds up the experience.

A comparison of the two approaches shows us the difference Angular makes by cutting down these resource requests.

First we see the standard practice with a white blank screen inbetween, second we see snappy page loads and a over all smoother experience.

Below a comparison between angular and a standard setup after the initial load.

Resources

AngularJS is now a mature framework with thousands of people using it to build and deploy web apps on production servers.

I had very little trouble with the application and definitely recommend AngularJS for this kind of work, it speeds up development and reduces repeated code which is always a positive.

These resources are either maintained by active community members or Google’s angular team themselves. Using these project structures will help you maintain quality code in line with AngularJS philosophies. I recommend using one of these sources to start building your project:

github.com/angular/angular-seed
github.com/yeoman/generator-angular
github.com/Swiip/generator-gulp-angular

Check out: builtwith.angularjs.org/ for some examples of projects built with AngularJS. Loads of useful resources are avaliable on their website here: angularjs.org

 

Getting into AngularJS