Going Singular and Angular with your morning CoffeeScript
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.
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.
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 <ng-view> 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.