Bring structure to your apps with the power of AngularJS. integrates seamlessly with existing Angular and apps.
JavaScript HTML Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist chore: update build Mar 23, 2015
docs-generation docs: add live examples for app flipper grid header image index modifier Sep 12, 2014
docs/unstable chore: update docs build Feb 9, 2015
famous-angular-docs @ 92d70e5 chore: update docs submodule Feb 21, 2015
famous-angular-examples @ ceaad83 style: fix linting for faDrawerLayout Feb 9, 2015
src fix: support class manipulation with ngAnimate + Angular 1.3 by retur… Mar 23, 2015
test feat: add DrawerLayout directive Feb 7, 2015
.bowerrc fix: add .bowerrc that specifies installation directory (fixes incons… Sep 22, 2014
.editorconfig Mode update from copy-paste Mar 24, 2014
.gitattributes Mode update from copy-paste Mar 24, 2014
.gitignore Tests: karma-coverage integration Sep 6, 2014
.gitmodules chore: remove unnecessary famous submodule Aug 8, 2014
.jshintrc chore: lint Jul 28, 2014
.travis.yml feat(travis): Add sudo: false to speed up build on travis Jan 29, 2015
AUTHORS add AUTHORS file Jun 20, 2014 chore: bump version to 0.5.0 Oct 11, 2014 docs: update and clean up README and CONTRIBUTING Dec 29, 2014
LICENSE add license May 19, 2014 Update Nov 10, 2015
bower.json chore: Bumping the version for thiat's commit Jan 30, 2015
changelog.js test: added tests for changelog.js & validateCommitMsg.js. Run with `… May 26, 2014
famous-angular-deck.pdf update build headers; update deck Jun 25, 2014
famous-angular.pdf add pdf readme Mar 28, 2014
gulpfile.js perf: added tasks to automate a handful of pre merge tasks Jan 22, 2015 Mode update from copy-paste Mar 24, 2014
karma.conf.js chore: update build; roll spec test reporter back to 'spec' Feb 9, 2015
package.json chore: Bumping the version for thiat's commit Jan 30, 2015
validateCommitMsg.js test: added tests for changelog.js & validateCommitMsg.js. Run with `… May 26, 2014 Build Status

This integration library is no longer supported by

Add interactions and animations to any AngularJS application and build applications with AngularJS.

Using F/A, you can:

  • Create apps using familiar AngularJS tools like controllers, directives, and services.
  • Bring rich animations to new or existing AngularJS apps.
  • Use HTML to declare UIs, complete with Angular's two-way databinding.
  • Easily integrate and AngularJS apps.

###Read More Project Site

###Download Starter Kit or bower install famous-angular

###Sample projects and generators


####Before you start, tools you will need:

  • Download and install git
  • Download and install nodeJS
  • Install bower npm install -g bower

####Inside of your app:

  • Run bower install famous-angular
  • Add the following to your index.html
  <script src="bower_components/famous/dist/famous-global.js"></script>
  <script src="bower_components/famous-angular/dist/famous-angular.js"></script>
  • Add<link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css"> to the <head> of your index.html
  • Add the famous.angular module to your Angular module list (e.g. in a main app.js file: angular.module('yourMainModule', ['famous.angular']))
  • And add an <fa-app style="height: 200px"><fa-surface fa-background-color="'red'">Hello world</fa-surface></fa-app> in one of your templates. If you see 'Hello world' on a red background, you should be good to go. Note: currently, the element that the <fa-app> is on must be display: block (like a <div fa-app> or a <p fa-app>, or just <fa-app>) and must have a defined height (like style="height: 200px" in this example.)

CDN Dependencies

Here are a few CDN URLs for and Famous-angular specific dependencies just in case you are not able to use bower or node for tooling in the app. You will still need to ensure that you have Angular 1.2.26 in your project as it is a dependency for Famous-Angular.



  • Feel free reach out for support on the Famous IRC channel on Freenode.
  • Please submit issues as Github issues.
  • Please create a CodePen forked from this pen for all of you code issues.


See for dev environment instructions and contribution guidelines.

##Get in touch

As mentioned above, please direct support questions to GitHub Issues so that community members can help answer questions as well as benefit from answers.

For anything else, tweet at @befamous.