Code Monkey home page Code Monkey logo

famous-angular's Introduction

Famo.us/Angular Build Status

Famo.us/Angular is an AngularJS-driven framework for building Famo.us apps.

###Read More Project Site

###Download Famo.us/Angular Starter Kit or bower install famous-angular

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.

##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

  • 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', '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 (like style="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

  • Download and install git
  • Download and install nodeJS

####First time: git clone https://github.com/thomasstreet/famous-angular.git

npm install

npm install -g gulp

####Thereafter: Clone the submodules and install the frontend dependencies inside of your example folder.

git submodule update --init --recursive

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.