PIcking Your Javascript Mobile Framework: Part 10 - AngularJS

AngularJS is a Google product. As with many things coming out of that company, it can be a little prejudiced and quirky. It also has to live with the fact the company has about a dozen Javascript frameworks running around, so it’s never clear which one is going to get most love.

What is special about Angular is that it tries to live within the confines of the HTML, giantly souped up. In particular, elements in the DOM are tagged with Angular attributes (all starting with the prefix “ng”). The Angular runtime then goes in and magically does things with those attributes.

My favorite section of the app, the display of the single todo item, looks like this in the Angular example:

<div class="view">
    <input class="toggle" type="checkbox" ng-model="todo.completed">
    <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
    <button class="destroy" ng-click="removeTodo(todo)"></button>
</div>

Notice the attributes, ng-model, ng-dblclick, ng-click. The first one ties the value of the checkbox to the model’s completed attribute. The second one is an event handler that will invoke the function editTodo() on double click. The third one will of course invoke removeTodo() on single click (of the delete button).

In additional to fairly trivial JS, there is a single Javascript file that runs the show, todo.js in the controllers directory. As you see, this is already a fundamentally different approach than in Ampersand (our first contender): there the model was center stage and the controller squeezed out. Here it’s all about control(lers).

It’s actually a single controller. There is no separation between the item and the collection, or between the todo list and the session state. I am not sure if that’s a philosophical choice or a practical one, but tend to lean on the latter, since the framework clearly supports more than once controller.

In summary, Angular feels a little like magic. You tag something in your HTML and mysteriously all sorts of things happen to it. The interesting thing is that this benefits those that already have HTML that doesn’t do anything magic, but it seems not to solve the problems of people that know how to imbue HTML with magic.

In other words, Angular seems to be the kind of product that outlived its raison d’etre: meant to imbue static pages with life, it now has to prove it’s also a solution for pages that were meant to be alive from the get-go.