Famo.us/Angular is an AngularJS-driven framework for building Famo.us apps.
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 on the project page: Famo.us/Angular ###Or download the starter kit: famous-angular-starter-kit.zip
##Project Roadmap
https://www.pivotaltracker.com/n/projects/1119890 Contact [email protected] if you want to claim tasks or contribute to the roadmap.
##Running (For using F/A in your Angular app)
####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/requirejs/require.js"></script>
<script>
//set requirejs's base to where the famous lib folder lives
require.config({baseUrl: 'bower_components'});
</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', 'ui.router', 'ngAnimate'])) - 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 set height (likestyle="height: 200px"in this example.) Future versions will not have these requirements.
####Build off of the starter app To get started even faster, try the famous-angular-starter seed project, with everything already in place. The starter app has a powerful gulp-based workflow, which includes live reloading and Jade/HAML support.
##Running (For developing or contributing to the library)
####Before you start, tools you will need
####First time:
git clone https://github.com/thomasstreet/famous-angular.git
npm install
npm install -g gulp
####Thereafter: Install the frontend dependencies inside of your example folder.
cd famous-angular-examples
bower install
cd ..
npm start
Npm start will use gulp to concatenate files into famous-angular.js, which is built into the app folder. It will also watch for changes inside app and livereload as necessary.
Then open http://localhost:4000.
####To develop the library using the famous-angular-examples submodule
gulp dev
####To build the docs
gulp docs
####To run tests Ensure that you have the karma command line interface installed. 'npm install -g karma-cli'
`karma start'
##Support
Please submit issues as Github issues or reach out for support on the Famous IRC channel on Freenode
##Contributing
We would love to have community contributions and support! A few areas where could use help right now:
- Writing tests
- Elaborating on documentation
- Creating examples for the docs
- Bug reports and/or fixes
- Continuing to wrap Famo.us layouts and views into directives [advanced]
If you want to contribute, please submit a pull request, or contact [email protected] for more information.
Please read the contribution guidelines in CONTRIBUTING.md
Famo.us/Angular is being developed by Thomas Street in partnership with Famo.us, along with community support.