Lots of things are happening in the JavaScript world: it’s moving so fast it’s difficult to keep up with it!

Angular-JS is an open-source MVC framework created by Miško Hevery and Adam Abrons in 2009 which has been bought and is now maintained by Google.

At first sight, nothing new: EmberJS has already been doing this for a long time, so what’s all the fuss about it ?

Magic Data-Binding

Much like EmberJS, AngularJS allows to bind parts of the interface to the data. The difference lies in how the data is linked and updated in the UI.

In EmberJS, the developer has to create special objects and use special methods to update the data so that EmberJS knows when and how to update the data:

<p>firstName: </p>

var person = this.get("model");
person.set('firstName', 'James');

While this works, the developer has to use special objects and special methods.

AngularJS takes a different approach: instead of having to define special objects, any object can be used as binding and the view will be magically updated:

<div ng-controller="MyCtrl">
  <p>firstName: !</p>
</div>

// within your controller
$scope.firstName = 'James';

Scope is Magic

AngularJS makes use of the concept of scope: any controller can have a given scope which is a JavaScript object on which you may attach any method or attribute. Any changes you make to this object will be magically reflected into your view.

I say magically but actually it’s a bit more complicated: for the framework to update your view, you have to make your changes in a special method called “apply”. The good thing is that most Angular methods already take care of this so you usually don’t have to worry about it: since these methods wrap your function calls inside apply, Angular will be aware of your changes without having to do anything.

When executing code outside AngularJS methods, you’ll have to manually wrap your callbacks into scope.$apply() calls. This can become quite complicated and this is an important concept of AngularJS so I recommend reading this article by Jim Hoskings: AngularJS and scope.$apply

A first app using AngularJS

Whenever I discover a new tool, I try to create a new project to familiar myself with the new library. A few years ago, I wrote a little app to experiment with CSS3/HTML5: the app simply fetched a photo feed from the popular 500px website and presented the user with nice CSS 3 effects (and even mp3 using the Audio tag: wow! ;)).

Converting this small application to AngularJS sounded like a good first project. The application makes use of Ajax, LocalStorage to store settings and some jQuery bindings for user interaction: not too complicated, nor too easy!

After a few afternoons I had most of the app rewritten: once you understand the AngularJS concepts, it’s really easy to get something working! The fact that DOM manipulation can be done using jQuery-like syntax and the numerous articles covering AngularJS also helped a lot.

Wrap up

You can see the demo here: angularjs-500px and the full source code can be found on GitHub

I also used the following very handy building/development tools while creating this project:

• Yeoman
• Bower
• Grunt
• NodeJS and Npm