I’ve long been fascinated by the plethora of JavaScript libraries and frameworks that began to flood the web around 2005. While it’s a given that jQuery has become ubiquitous in the general/purpose DOM/manipulation and AJAX spaces, the battle for the MV* space is not yet over, nor is the battle for the best way to do single page applications (SPA). In fact, because there are so many options, Addy Osmani and Sindre Sorhus put together a great site to help you sort through the options: http://todomvc.com/. It uses the also ubiquitous Todo app, implemented with thousands of different JavaScript libraries to help you compare and contrast. (Ok, dozens)

Google’s AngularJS: built for the web and for extensibility

In this post, you’ll learn the basics of creating responsive, single page application’s with Google’s well/designed, well/supported, and increasingly popular AngularJS. Here’s how AngularJS is described on its home page:

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web/applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.
AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

Sample app: Let’s Eat

With that in mind, let’s whip up our recipe for our simple responsive SPA. We’ll use CoffeeScript and Node.js to achieve this. In later posts, we’ll cover more advanced topics related to building apps with AngularJS.
Now, suppose you wanted to build a simple menu page / app for a restaurant, or maybe just for your own household. The stories are simple enough:

As a diner, I want to see a list of items available for Breakfast, Lunch, and Dinner.
When I browse a menu, I can see item names, prices, and how many calories are in them.

That’s enough to get started with. You can see the app in its current state over at Github.io: Let’s Eat. Thanks goes to Atlanta students Daniel Aldrich and Michael Azogu for their initial designs using Twitter Bootstrap on this the week before I adapted it for AngularJS.

Base page

This is adapted from the official AngularJS tutorial, an excellent set of step/by/step examples for building an Android device catalog. As you can see, we use Twitter Bootstrap for styling and layout. That’s awesome, and that is part is also included in the official tutorial. I added the file responsive/tables.css, which I got from Chris Coyer, as highlighted here by Simon Elvery. This is used to make the table headings flip to become vertical when the browser window gets too thin, or when it’s rendered on a mobile device that doesn’t have a large resolution.
[gist id=5385819 file=index.html]

Make the table flip the column headings to become vertical when too small

This technique is really awesome. First, here’s the file partial/menu.html. As you’ll see in a second, this file is used to render the data for a menu into the placeholder we saw above.
[gist id=5385819 file=menu.html]
Now, notice in this CSS how the technique uses the attr() call to fetch the data/title attribute from the tag. That’s crazy. I didn’t even know you could do that!
[gist id=5385819 file=responsive/tables.css]

Using AngularJS Controllers, Routers, and $http to make this a Single/Page/App

AngularJS has a number of core concepts and classes that will help you build your apps in a very structured, highly testable way. But, I’ll leave the fine/grained details to the tutorial I linked above. The next sample shows all the code I needed to get this done so far. I learned a lot from Andrew Weir’s fine blog post on building single page apps with AngularJS.
Notice that we set up some routing to handle the /menu/:meal pattern, and hand off its processing to the RouteController. This simply looks up some menu data that we stored inside the $rootScope and applies it to its own $scope. You can read more about scopes in the Angular documentation, but just know that once we assign a value to $scope, that property is no accessible in the curly braces we used in the HTML templates.
[gist id=5385819 file=controllers.coffee]

Fetching data with $http

You might be wondering how we get the $scope, $http, and other arguments sent to our controllers. This is through Angular’s dependency injection support, which allows you to inject several built/in services or objects, and you can make our own. In our example, we use $http to fetch some JSON data for the meal types. Here’s what the data file looks like so far. Yes, some of the items sound disgusting, but they’re all nutritious.
[gist id=5385819 file=mealMenus.json]
Enjoy! Stay tuned for updates and more sophisticated examples, as well as instructions for running a simple local Node based web server to play around with the code.