Code and Craft

A blog by Amy Cheng

First Impressions of Angular.js

A couple of weeks ago, I was evaluating client-side frameworks for an upcoming project. I knew the Javascript was going to be an effing mess; there would be tons of user interactions (hence DOM traversing and event binding). Code could get messy pretty quickly, I advocated the use for a client-side framework. Requirements the framework had to have include:

Angular.js was on my shortlist (the other being Backbone.js).

To properly evaluate both these frameworks, I built a very scaled down version of the app we would be building.

Here are some good things about Angular.js that caught my eye:

the positives

Scopes everywhere (Well, this be considered a negative too.) If you initialize a $controller or create a $directive (a kind of custom HTML element, similiar to Polymer in some respects), you create a scope. This forces you think of your code in an organized manner and in some ways forces you to do things right, like properly managing your global objects and what not.

Conventions and a lot of other stuff baked in I was impressed by how many features and functionality that I would normally import using plugins was baked in. Things like filters, form validation, routing, animation triggered by events, even DOM traversing (by way of jqlite) are baked in (you do need to import the respective Angular.js add-on though). Instead of third-party plugins, you can use "first-party" plugins.

Two-way Event Binding This was cool. If a view (HTML mark-up) relied on a data model of some sort, it would automatically update if the model changed, and vice versa. You don't need to manually update the view, somehow it happens automagically.

Test-driven Development Philosophy I liked this quote from the Angular.js homepage: "AngularJS was designed from ground up to be testable.". I got burned from frameworks that didn't consider testing in its design, and it made writing unit tests for my own code annoyingly troublesome.

Dependency Injection This trait(?) of Angular.js makes it easy to write and view your code as modules.

the negatives

Here are some BAD things about Angular.js that caught my eye:

big learning curve Angular.js has alot of its own conventions, wording, and features baked in; it will take a bit to get how Angular does things, especially if you're used to doing things a certain way (i.e. traversing the DOM with jQuery). On the one hand, you can build an app pretty quickly because Angular

Angular is directive driven, which means the logic steams from mark-up. If you just give in to how Angular does things, it would be easier.

HTML mark-up can get messy looking Since alot of Angular's magic is driven by directives and mark-up, you'll be writing ng-whatever as attributes in your HTML tags. It will get messy looking pretty quickly.

« My first Girls Who Code club meeting You get a $scope. You get a $scope. AND you get a $scope! »