No description or website provided.

Angular Reader

Live Demo

Video Demo of Animation

Angular reader is a simple Atom feed reader app that shows off some new features in AngularJS, and generally shows off the simplicity of building apps with Angular.

The app is a proof-of-concept, and a little rough around the edges. It should work with most Atom feeds, but may break if it has trouble parsing.

Getting Started

(Requires node, grunt, bower)

$ npm intall
$ bower install
$ grunt server


  • Animation (new!)
    • Add Feed
    • Read a full article
    • Swipe to next/prev article
    • Edit feeds
  • Swipe (new!)
    • Swipe to delete
    • Swipe to go to next/prev article
  • Filter
    • Plaintext
    • Truncate
  • Directive
    • Carousel (contributed from @revolunet)
    • Feed List
    • Add Feed Form (with datalist HTML5 component)
    • Article Preview
  • Service
    • Feed Manager w/localStorage
    • Articles w/Atom parsing
    • Recommended Feeds

Animation Examples

As of Angular 1.1.4, Angular provides a simple directive to declaratively manage JavaScript and CSS3 animations of other directives

Add Feed Form

The left column of the main view of the application provides an area to add a new feed to the reader. In this simple directive, we're using:

  • An HTML5 datalist with an ng-repeat directive to recommend feeds while typing.
  • Animating the "add feed" link and the form itself while showing/hiding, using ng-animate and ng-show.
  • Declarative form validation, using ng-pattern and ng-required.

See the code: template