Giter Club home page Giter Club logo

famous-angular's Introduction

Famo.us/Angular

Famo.us/Angular is a library that brings Famo.us and AngularJS together. 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 embed existing Famo.us apps into AngularJS apps.

###Read more on the project page: Famo.us/Angular

This library is under active development and is currently in alpha. The library is at a point where you can create powerful apps, and a lot of the core API is reasonably stabilized, but some things are expected to change as the project moves forward. Contributors welcome! (see below)

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

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

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

As configured, you should be able to access the application at localhost:4000.

####To develop the library using the famous-angular-examples submodule

gulp dev

####To build the docs

gulp docs

####To view and build the docs site

gulp dev-site

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

Famo.us/Angular is being developed by Thomas Street in partnership with Famo.us, along with community support.

famous-angular's People

Contributors

andrelevi avatar graunked avatar ocombe avatar sate avatar skeller88 avatar zackbrown avatar

Watchers

 avatar

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.