starwalker / ngswipe-demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Features

  • 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

About


Languages

Language:JavaScript 45.4%Language:HTML 35.7%Language:CSS 16.7%Language:ApacheConf 2.1%Language:Shell 0.1%