Add Famo.us interactions and animations to any AngularJS application and build Famo.us applications with AngularJS.
Using F/A, you can:
- Create Famo.us apps using familiar AngularJS tools like controllers, directives, and services.
- Bring rich Famo.us animations to new or existing AngularJS apps.
- Use HTML to declare Famo.us UIs, complete with Angular's two-way databinding.
- Easily integrate Famo.us and AngularJS apps.
###Read More Project Site
###Download
Famo.us/Angular Starter Kit
or
bower install famous-angular
###Sample projects and generators
- Famo.us/Angular Starter Project
- fa-boilerplate starter repo *(community maintained)
- Famo.us/Angular CodePen template
- Famo.us/Angular Yeoman Generator *(community-maintained)
- Flickrous — a simple Flickr example app
- Famo.us/Angular Homepage Source Code
##Installation
####Before you start, tools you will need:
####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.angularmodule 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 (likestyle="height: 200px"in this example.)
Here are a few CDN URLs for Famo.us 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.
Famo.us:
- http://code.famo.us/famous/latest/famous-global.js
- http://code.famo.us/famous/latest/famous.js
- http://code.famo.us/famous/latest/famous.css
Famous-Angular:
- http://code.famo.us/famous-angular/latest/famous-angular.js
- http://code.famo.us/famous-angular/latest/famous-angular.css
##Support
- 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.
##Contributing
See CONTRIBUTING.md 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.