Angular: Initial Thoughts

So I've embarked on some "spare time" in playing with and analyzing some of the popular single-page web frameworks out there.  This past month I've been playing with angular.  There's a lot to this framework, so I'll use this post to give an an overview on what I tried and share some initial thoughts.

What I did...

Starting from the angular seed app, I created an extremely simple app that combined a grid and a form.  Below is a screenshot.  I used bootstrap for a basic screen setup and style.  For the grid, I used ng-grid from the angular ui suite project.  For the form I just used some basic angular forms and validation.

SampleAngular

A nice way of doing MVC

Angular views are completely declarative, defined in html.  Because of this, the angular controllers have no direct dependencies on their views.  This is a welcome difference from the MVP pattern we've used in GWT, where the presenter layer acts as glue between model and view and references to both.  Angular makes unit test more straightforward because of this.

Its Nicely Declarative with HTML

In Angular you lay out complex widgets on your screen in html as opposed to programmatically adding things to the DOM.  This allows for a more visual view of how the screen is laid out, as well as cuts down on the amount of code you have to write to do so.  Also, since your layout is html, its easy to supply your favorite complementary CSS technology, such as Less or Sass.  In my example I used bootstrap to define the screens with no problem.

More importantly, if you have a UX design team that works with programmers to create web applications, it creates a really clean separation between markup and code, allowing UX to contribute directly to great screen designs in technologies they are familiar with.

The Model is automatically wired in

Angular widgets allow you to specify a model object, which can be any javascript object set within the scope.  Any changes to the model get automatically updated in the DOM, and vice-versa, without the developer explicitly coding observer patterns.

For example, take ng-grid used in the example the data grid is configured by creating a gridOptions object, which takes a model and selections array.  Any update to these arrays results and updates to the UI:

app.controller('MyCtrl1', ['$scope',function(sc) {  
sc.mySelections = [];  

sc.myData = [{name: "Moroni", age: 50},  
{name: "Tiancum", age: 43},  
{name: "Jacob", age: 27},  
{name: "Nephi", age: 29},  
{name: "Enos", age: 34}];  

sc.gridOptions = {  
data: 'myData',  
columnDefs: [{field:'name',displayName:'Name'},{field:'age',displayName:'Age'}],  
jqueryUIDraggable: true,  
selectedItems: sc.mySelections,  
multiSelect: false  

};  
…  
}]);  

In the html you simply supply the name of the gridOptions object:

<div class="gridStyle" ng-grid="gridOptions"/>  

 

The form elements in the example also make use of the mySelections object, so that any update in the field gets updated in the model (and vice-versa):

<input type="text" class="form-control" id="name" ng-model="mySelections[0].name" placeholder="Enter Name"/>  

It has a mechanism to create new reusable assets

A major requirement for web frameworks is the ability to create reusable assets.  When you develop for multiple complex apps over a similar domain, there tends to be overlap in complex widgets.  Angular allows you to create reusable assets as DOM elements through its concept of "directives".  Its a nice way to define reuse assets, making it easy for people to use in various apps.  All you have to do is import the component and drop it into html.

Providing a clean reuse mechanism is a big deal for shops that use the same technology over multiple projects.  Check out more on how to do directives here: http://docs.angularjs.org/guide/directive

Awesome Automated Test Capability

Angular is well suited for test because of its separation of view from controller, and its use of dependency injection. It integrates well with Karma, a web application test harness.  Karma essentially spawns a web server.  When you point your supported browsers at the web application (or tell Karma to start them), your tests get executed and reported.  You can also tell it to run whenever files are saved.  Here's a nice, in depth article on testing with angular: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html.  Combined with a behavior driven technology such as Jasmine or Mocha and Chai creates a readable and effective test solution.

So that's Angular.  I like it, and I easily can see why its quickly gaining popularity. While in my current job I use some of angular's patterns in my current GWT code, such as dependency injection and declarative views, I really like the way its done in Angular, especially the auto-wiring around the model.  I'm inspired to start playing in my "day" job to replicate some of the slickness.   I also really like the unit test harness and look forward to using it more.

Next up, Ember.