Tuesday, November 27, 2012

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!

6 comments:

  1. Cool stuff. Thanks guys!

    Looks like I need to start using more controllers..

    ReplyDelete
  2. awesome... it's help me to learn about angular

    ReplyDelete
  3. Thanks for all those examples, very appreciated! I think it would be very greate if we could have an example with the html5Mode(true) for the pushState feature and FoodMe would be a good app for that.

    ReplyDelete
  4. These people have to be awarded! Really appreciated the knowledge sharing!
    Thanks!

    ReplyDelete

Note: Only a member of this blog may post a comment.