Developing Single Page Web Applications with AngularJS

Anyone who has experience developing a Single Page Application (SPA) with naked jQuery or raw JavaScript knows that doing so involves a lot of work for basic UI functions like keeping your Model and View in sync. You end up with hundreds or even thousands of lines of JavaScript devoted to basic functionality, before you can even begin writing your application logic. This is why teams of developers have put tremendous effort into making a variety of JavaScript application frameworks. You can take your pick from BackboneJS, EmberJS, AngularJS and others. Each has its own advantages, but for this post I’ll just be talking about what AngularJS brings to the table.

There’s a few key features that make AngularJS distinct from the alternatives. A big one is that Angular templates are written in HTML using directives (HTML5 data elements or custom attributes) for its template functionality. For example, if you have a list element that you’d like to repeat for each entry in an array, you use an ng-repeat directive on that list element like so:

• {{ cookie.name }} : {{ cookie.description }}

Assuming you have an array called cookies with elements that contain both a name and description, you will get a list as you might imagine from the above in AngularJS

Angular will do automatic data binding as well, if the cookies array gets updated in your model, the view will automatically update. That means adding, removing or changing any of the elements in your model is automatically reflected to the user.

This is just a very basic introduction to some of the functionality AngularJS has on offer. For a more comprehensive overview I recommend checking out the official AngularJS site which contains detaield documentation as well as a number of videos.