AngularJS is like the missing Batarang on your utility belt of web development awesomeness. It gives you two-way data binding that's both easy to use and fast, a powerful directive system that lets you use create reusable custom components, plus a lot more. Express is an excellent webserver for Node.js that provides routing, middleware, and sessions. Incidentally, the two work quite well together!

In this tutorial, I'm going to walk through writing a simple blog app with Angular and Express. For this, I'm assuming basic knowledge of Angular and Node. If you're new to Angular, I highly recommend that you check out the AngularJS homepage first.

Anatomy of the App

This application is really divided into two parts: client, and server. The client runs on the web browser, and does asynchronous communication to the server. The server then retrieves and stores data for the client. For this app, we'll use AngularJS to build the client and Express to build the server.

An important note here is that while Jade lets you do interpolation via #\{someVar\}, we're going to reserve interpolation for AngularJS to take care of on the client so can take advantage of the two-way data binding that Angular provides. Nevertheless, Jade is an awesome HTML preprocessor, and takes a lot of the typing out of writing views.

The first few lines tell Express to wrap the boilerplate template in views/layout.jade around our view. Then we have a header, followed by a navigation bar, and finally a placeholder for Angular views.

Next, we'll add views for each of the basic functions: reading a list of short summaries of posts, reading a full-length post, editing a post, or deleting a post. Create a new file, views/partials/index.jade:

The controllers are all relatively straightforward: they make calls to $http to communicate with the server, and attach methods to the controller's scope to allow the corresponding view to make additional requests on a button click.

Let's look at EditPostCtrl alongside its view, views/partials/editPost.jade for example:

When the controller loads, it makes a request to /api/post/{{$routeParams.id}}, which it uses to populate $scope.title and $scope.text. Then, it attaches a method editPost to the local scope, which sends a POST request to the server which contains the id of the post to edit and the updated title and text. In editPost.jade, the input and textarea have ng-model attributes that setup data binding, and we attach $scope.editPost() to a button so that it fires when the button is pressed.

Building the JSON server with Express

Typically, you'd connect to some database and store/load your data from there, however for this example app I'm just going to use an in-memory object.

Express has an excellent way to respond with JSON rather than HTML through res.json).

The first route takes care of serving our main page that runs the angular app. The next route lets Angular load partials on demand. The following routes establish our JSON API, linking http://yourapp.com/api/posts to the posts route, http://yourapp.com/api/addPost to the addPost route, and so on.

Notice the :id on lines 12, 14, and 15: that's a parameter parsed out of the URL by Express. Why doesn't app.post('/api/post', api.addPost); on line 13 have that parameter, then? The reason is because it's better to do a POST rather than a GET to avoid cross-site scripting. In general, when requesting information, use GET, but when invoking some action, use POST.

Start up the app as we did with the skeleton earlier:

λ → node app.js

You should be able to add, update, read, and delete posts.

Conclusion

Writing apps with AngularJS and Express is both fun and easy. Both frameworks let you dive right into the business logic of your app without much boilerplate, so in just a few hundred lines, we're able to write a complete (albeit simple) app. Maintaining a clear distinction between client and server makes the app easier to maintain and test. In a future post, I'll cover how to test an app built on Angular and Express.

There are a lot of other possible improvements to this blog. You'll notice some flickering between loads. AngularJS provides ways to address this issue, but that's outside of the scope of this post. A real blog application would also probably want posts to have some notion of formatting, which is also achievable using some of Angular's more advanced features. I also hope to address these things in subsequent posts.

Questions

[2012.09.17] - @corydeppen asks: "Did you use $http instead of $resource for a specific reason? Are there cases where you would recommend one over the other?"

I certainly could have used $resource, but I chose to use $http in the tutorial because I thought it was the simpler of the two and would better help illustrate how all of the parts connected. In choosing which to use in your own app, I think it kind of depends your needs. If you are serializing/deserializing objects into/from a data store and doing CRUD-y things, $resource would likely be the way to go. If you have a more action/intent based API scheme, you might want to use $http instead. And you can certainly use both within the same app if it makes sense to you!