Home Blog First impressions with the JavaScript framework AngularJS


First impressions with the JavaScript framework AngularJS

Posted by fusionbox on March 21, 2013, 6 p.m.

Our company's standard JavaScript framework has been Backbone for a while now.  The small size of the source, and lack of assumptions have left the room like to use it however we choose. Backbone's Model and Collection API works in ways that I expect and overall have been a pleasure to work with.  I work with Django on a daily basis, and have very little trouble switching gears between Django and Backbone models.

I recently started experimenting with AngularJS for a new project.  I have never entirely wrapped my brain around backbone Views and despite many well documented examples and tutorials, I never quite know where to start.  The lack of 'batteries included' has been a barrier, and I find myself paralyzed with options, unsure which direction to go.
Enter AngularJS.  Angular is as big in all the ways that Backbone is not, and where backbone leaves you room to choose your desired implementation, Angular does not.  The jury is still out on exactly how I feel about this.
I've only just begun exploring Angular and am yet to get very deep under the hood.  Here are a few things of my experiences thus far.
HTML is your template language.  Angular introduces its own attributes which are referred to as directives.  In the documentation, Angular say "directives are ways to teach HTML new tricks".  My impression thus far is that this is really cool, and it may be a bad idea.
In jQuery or Backbone, you would use a selector to get the html element you wish to bind to, and then bind a callback to a `click` event.  With Angular, you still have the same callback, but the binding syntax lives within your HTML.
<a click="doit()">Do Thing</a>
This expressive syntax has been very appealing, eliminating tracing my way around javascript code to find where I bound to whatever element/action to some callback.   These directives make it easy to look at the DOM and quickly see what it is going to do.  In this case, click events on this anchor tag will call the `doit` function on your controller.
The data bindings are equally cool.  

The value is {{ foo }}

<input model="foo" />

See it in action here
The double-curly template syntax will be familiar to many django developers.  In this example, Angular will automatically bind the `foo` property of my controller to both the value of the input via the `ng-model` directive, and the text within the `p` tag.  These two values remain in sync with each other without further action on my part.  
I've only started to scratch the surface of how powerful this can really be, though I admit I haven't done enough to find many of the downsides.
Speaking of downsides, I am disappointed in the tools Angular provides for ajax and server communication.  They don't seem to be very configurable (not a big surprise), and they set some significant constraints on the format of your data.

To get in touch with Fusionbox's Denver office to talk about your web development project, get in touch here.