Last Updated Apr 14, 2013 — Enterprise Agile Planning expert
Going Singular and Angular with your morning CoffeeScript
Enterprise Agile Planning
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.