AngularJS Example Applications

Folks often ask us where they can find source for apps that cover more techniques than the examples on angularjs.org or the tutorial.  If this is your question, then this post is for you!

FoodMe

As part of our tutorial session for Devoxx 2012, we built this simulated take-out food ordering application.

Project URL: https://github.com/IgorMinar/foodme
What you can learn:

• Several examples of writing directives
• Multiple views
• Filtering and sorting lists
• Using local storage
• Setting up Testacular to continuously run unit tests

Angular Fun

This one is for you CoffeeScript fans out there.  Though it's a demo app, it has many of the features you'd want in a skeleton for many real apps you'd want to create.  Nice job, Cary Landholt! 

Project URL: https://github.com/CaryLandholt/AngularFun
Stable snapshot:  https://github.com/CaryLandholt/AngularFun/tags (v1.0.0.zip)
What you can learn:

• Form validation
• Writing filters
• Handling server error codes
• Retrieving data from web services Twitter and GitHub
• Using Angular with NodeJS, CoffeeScript, RequireJS, Grunt, LESS and Jasmine

TextDrive

Want to build native-looking apps using Chrome?  TextDrive is a great place to start.  Vojta Jína (the author) and Brad Green (Angular eng manager) did a Hangout video with the Chrome Apps Office Hours on this.  For another take on the same application, you can also check out this post from Google Apps team and this Google Drive tutorial which walks through building an Angular app against the Drive APIs.

Project URL: https://github.com/GoogleChrome/textdrive-app
What you can learn:

• Using Angular to create an app around a third-party editor view (ACE editor)
• Structuring your app with thin controllers and rich services
• Switching between Chrome storage and local storage as appropriate for persistence
• Writing Chrome apps using Angular

wReader

If you're looking to build an app with high curb-appeal, look no further.  wReader is another Chrome platform app that looks and feels like native desktop apps.  It is hard-wired to browse the Google Chromium blog, but it could easily be repurposed as a skeleton for other uses. Try it live here.


Project URL: https://github.com/GoogleChrome/wReader-app
What you can learn:

• Using directives to implement keyboard shortcuts
• Observing and reacting to view scrolling
• Using local storage

For more examples, please be certain to visit builtwith.angularjs.org.  You can search by the tag 'Open Source' to find more apps with source available.  And when your app is ready, please submit it for the world to see!