AngularJS

I have been playing with AngularJS and my humble opinion is that it is really nice (powerful and easy to learn). As part of my playing, I have been written the UI of my example from my previous post. Lets start with a small introduction, and then I will describe my implementation and some thoughts that will help to clarify why I think AngularJS is nice.

AngularJS is a fairly new Javascript framework and toolkit for building rich web applications. It use HTML as the template view, and JSON data as the model. And the orchestration of these two is done on a controller. Providing a MVC architecture. It is also a framework because AngularJS controls how your application is constructed, using dependency injection. Your controllers gets injected with your own objects or with AngularJS services. It is a toolkit because, among other things, it gives you a library to make http requests (and the combo comes with a mock library to make fake http requests for testing).

But non of the above are the most important things from AngularJS. The most important thing is the data binding. AngularJS comes with a small expression language to transform an HTML page in a template and an expression can be bound to data in order to be presented. Let’s see the following (non fully completed) example. First, we write an HTML template which contains an AngularJS expression (note that the expression is surrounded by {{ … }}).

<div ng-controller="MyController">
  <span>This is the message: {{message}}</span>
</div>

Here, the AngularJS expression is the variable message. Note also that we are defining a controller called MyController to act over that piece of template.
Now, we need to write the controller to bind some data to the message variable. This is written inside an AngularJS controller, as below:

function MyController($scope) {
 $scope.message = 'Hello World!';
}

As you might notice, the controller is a plain old javascript function. As part of the function signature, I’m telling AngularJS to inject the $scope object. The $scope is an AngularJS object. Then, I’m creating a property message in the $scope and assigning a value to it. $scope will be valid from the starting element where the controller was defined, in this case the div element, until the end of the element. Lastly, when I load my template in a browser, I will see the following output:

This is the message: Hello World!

Whenever the message value change, the view is updated. Which is great as I don’t have to deal with DOM manipulation. In addition, makes a pretty clean separation between models and views. You might grab from a server side end point, some JSON data and bind it to the $scope, to be presented.

Let’s move now to my example. The source code can be found here. Under the folder:

/WebContent: you will find all the AngluarJS HTML templates. Where in the template.html file you will see the layout of the UI. This is using another AngularJS feature called ngView. All the other html files are children of template.html.

/WebContent/js/tntbooks-controllers.js: is where I have defined my controllers. Note that the content of the file starts with angular.module. Yes… AngularJS has the concept of modules (nice, right?). So, what is this?

angular.module('tnt', ['tntBooks']).config...

tnt is the name of this module (note that this name match with the one defined on the template.html as part of the ng-app directive).

['tntBooks']: in brackets all the modules which this module depends on. In this case, tntBooks is a module I have defined.

And with .config… I’m defining the URIs of my site.

/WebContent/js/tntbooks-services.js: is where I have defined my module. So, first I’m defining the module:

angular.module('tntBooks', ['ngResource']);

with name tntBooks and I need the AngularJS module called ngResource. Which is used to make the http request to the Tnt server side end points. This module expose, as plain old javascript functions, the responsibilities of the Tnt book store back end. The controller’s functions consume this module decouple them from URI’s, query string params and http methods.

/WebContent/test/spec/tntbooks-controller-test.js: is where I have all my tests. Yes… AngularJS is designed to be tested. It provides mocks for your http requests and due to the framework injects the dependencies on the controller’s functions, write test code is simple. The tests are written using jasmine.

You might have found out that AngularJS is client-side. This means, among other things, that the markup is added to the JSON data once on the client. So, your back-end sends only data across the wire, not data plus HTML markup, having smaller pieces of chunks to be transmitted. It also decouples your front-end chosen technology from your back-end chosen technology.

From my (very) short experience with AngularJS (1.0.1) I found one item that might be nice to have it supported. Currently, you can only specify one layout for your application, while you might need more than one. For example, one for your free access pages and another one for your authenticated pages.

This is all for now. There are others very nice AngularJS features which I have not described here, like directives. I think this one requires another post.
I hope you can get something good from these notes and source code, at least to start looking into AngularJS in more detail.