Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

famous-angular

Famous31MPL v2.00.4.0-3

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.

readme

Famo.us/Angular

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 famous-angular@thomasstreet.com 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/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:

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 famous-angular@thomasstreet.com 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.

changelog

0.4.0 (2014-09-18)

Bug Fixes

  • deep-watch fa-options to support inline options declarations without digest errors (d6067018)
  • remove unnecessary exception when fa-container-surface's children are removed (422576a5)
  • invoke isolate.hide() when elements are destroyed (fixes, e.g. clean-up when transitioning states with ui-router) (269c6d64)
  • minification process (1a88a6b0)
  • Updated canvas and video surfaces to support new methods (b7c81aae)

Features

  • support removing children from fa-header-footer-layout (01fefee2)
  • add fa-option directive (221cf4e3, #193)
  • support piping to/from Modifiers (e.g. Draggable) with fa-pipe-to and fa-pipe-from (070bf026)
  • implement fa-draggable (a11c12dc)
  • add observe on faSize of faSurface (b621ff53)

Documentation

  • add live examples for surface, tap, touchend, touchmove, touchstart (d27595eb)
  • modified scrollview live examples, add sequential + surface live examples (66b8d3e3)
  • add live examples for pipefrom, rendernode, scrollview (8bb10f87)
  • add modifier live examples (21533a5c)
  • add live examples for app flipper grid header image index modifier (5783027a)
  • fix scope => $scope typos in famousAnimate.js (bb291703)
  • correct the documentation for sizing elements in a fa-header-footer-layout (7d0becbe, #196)
  • clarify global installation of bower in readme (d40a893b)

0.3.0 (2014-08-15)

Bug Fixes

  • expose .util on window for non-DI use (3820b783)
  • throw exception if fa-elements are added to fa-surface (60c8fe05)
  • make famous#getIsolate correctly manage cases where scope is null (175a775a)
  • support proper translate-z (and general 3D) behavior in Chrome (1f82bd97)
  • add check for isFaElement for animate leave (4d009c5d)

Features

  • implement fa-video-surface (9a07f11d)
  • ngClick decorated for fa-surface with touch (3e50b871)
  • add all mouseEvents (cbd875bc)
  • decorate ng-click to register on renderNode in fa-directives (968b09ac)
  • update famous-angular.css to support changes in Famo.us core (864bd8b8)
  • removed the requirejs dependency (c9d318f2)
  • add hide and show functionality on renderables (767fea86)

Performance Improvements

  • include the famous modules definition in $famous provider (12668f2a)

Documentation

  • fixed docs code interpreted by jekyll & angular (4993f169)
  • live demos (4b519241, #158)
  • update readme to describe how to get started without RequireJS (aa553e4c)

0.2.0 (2014-08-04)

Bug Fixes

  • faOptions in faGridLayout to work properly (99086406)
  • make addClass and removeClass return the correct element (enables ng-bind-html) (4c62288a)
  • make fa-grid-layout respect changes in ng-repeat index when updating (0410113d)
  • fix errors caused by empty class names getting applied to Surfaces via (4054c446)

Features

  • deprecate fa-animation (e50d3536)
  • run unit tests with PhantomJS (481a483c)
  • add fa-mouseover directive (b2d00d09)
  • support removing children from fa-flipper (f97e357d)
  • implement physics support by accepting Particles as fa-modifier attributes (32c8ebe9)
  • add timeline service to replace fa-animation (dd5494d1)
  • added faCanvasSurface (82295bf1)
  • support reflowing fa-grid-layout and fa-scrollview when fa-index changes (3a7d6ee4)
  • throw error objects (c0d3130a)

Documentation

  • update fa-modifier ng-doc with support for Particles (32f296db)
  • add link to starter kit zip in README (cd75fd43)
  • add link to Pivotal roadmap in README (b9599c1e)

0.1.0 (2014-07-13)

Bug Fixes

  • remove $timeout in faScrollView and use scope.$$postDigest instead (137f260f)
  • fix some cases where 'digest is already in progress' is thrown for fa-modifiers (f5d9fa01)
  • consolidating the sequencer into a single call, and modifying the destruction listener to run on scope.$id instead of scope (aa65be37)
  • track if the animation has been halted at the level of the element using the existing status data (a265623b)
  • defer unregistering sequenced items until their elements, not their scopes, are destroyed (8517838c)
  • defer execution of modifier blanking to the resolution of the animation queue (d5889834)

Features

  • enable setting perspective on an fa-app (Famo.us Context) (d99b39be)
  • fa-grid-layout options and update the GridLayout when changed (445707fb)
  • support $done callbacks for complex animations and conditional animation chains in the $animate event lifecycle (82bdfe0d)
  • restore coverage for ng-class manipulation, with and without ngAnimate (1cf7f151)
  • full and ngAnimate-compliant event lifecycle support for Famo.us/Angular (2f857868)

Documentation

  • fix naming typo in fa-flipper (6345ca76)
  • fix broken links to famous docs (56fad126)
  • add basic documentation for fa-flexible-layout (1a6794da)
  • clarifying and cleaning up famousAnimate.js documentation (93eec030)
  • cleaning up examples for $famousDecorator (3c74717d)
  • added a step for test (0bc9bdb0)
  • corrected command to start tests (4c92e30c)
  • ANIMATION_DURATION should be DURATION (f70264d8)

0.0.17 (2014-06-24)

Bug Fixes

  • fix edge cases where fa-surface#isClassable hits an undefined reference (d4b352d5)
  • make multiple ng-shows inside of an fa-surface behave as expected (5478f03b)
  • correctly remove ng-repeated fa-surfaces from fa-scroll-view and fa-sequential-layout (55328faf)

Features

  • implement fa-flexible-layout (7b3ffd76)
  • implement fa-properties on fa-image-surface, the same as on fa-surface (cee67e0c)
  • implement fa-properties on fa-surface; make ad hoc property declaration more generic (7c101d06)
  • add margin and padding properties to fa-surface (16842b23)
  • implement fa-container-surface (94998b7c)

Documentation

  • add CLA instructions to CONTRIBUTING.md (2954e26c)
  • add animation directive - edit: surf, grid, app, mod, pipe n more (bbb02889)
  • fix fa-pipe - add imagesurf, header, seq, flipper (70283d0c)
  • edit animation, modifier, tap - add imagesurface (7654d276)
  • edit scrollview touchend move start view (610191b5)
  • edit app, click, index, rendernode (f605521a)
  • edit faSurface (540b39b0)
  • edit fa-modifier (4ceb4464)
  • edit faAnimation + faScrollView (65a31257)
  • add click, tap, index (45c0d072)
  • add fa-app (2e21d736)
  • add rendernode (f651daa6)
  • add fa-transform + fa-transform-order (66d2923d)
  • add touchstart touchmove touchend (448efdcd)
  • add fa-pipe-from examples (b3a1f36c)

0.0.16 (2014-06-07)

Bug Fixes

  • fix bugs in fa-touchmove, fa-touchstart, fa-touchend (5babd640)

Features

  • implement fa-header-footer-layout (6b6338f7)
  • implement fa-sequential-layout directive (23429a66)

0.0.15 (2014-06-04)

Bug Fixes

  • handle multiple classes in fa-surface, both in class attribute and in ng-class (e48c187a)
  • allow $famous.find to return multiple elements (1a880727, #80)

Features

  • implement faFlipper directive (64c98b65)

Documentation

  • add scrollview examples + add headings modifier surface (4ea11ad7)
  • modifier surface scrollview progress examples (e5746674)

0.0.14 (2014-05-31)

Bug Fixes

  • fix 'undefined is not a function' error from angular-animate (022f8a75)

0.0.13 (2014-05-30)

Bug Fixes

  • reverting invocation order of faPipeFrom to its previous state (9485fdb3)
  • modified execution order for faPipeFrom was correct (3862a8a7)
  • fixing invocation order of unpiping in faPipeFrom (8dc41641)
  • modify fa-pipe-from and fa-pipe-to to unbind their event listeners when their scopes are destroyed (405e0d61)
  • ensure that fa-modifier $observe callbacks will always fire at least once. (c248ebd9)
  • reverting invocation order of faPipeFrom to its previous state (ed1dcfb3)
  • modified execution order for faPipeFrom was correct (291b7887)
  • fix fa-animation behavior when two animates are assigned to one field with non-overlapping domains (ab745093)
  • fixing invocation order of unpiping in faPipeFrom (8855f4fe)
  • make fa-animation work correctly without jquery (e844971d)
  • added changelog.js & validateCommitMsg.js to bower ignore list (4c97c1b8)
  • modify fa-pipe-from and fa-pipe-to to unbind their event listeners when their scopes are destroyed (4957f7f4)
  • make function-passing to fa-transform fields more reasonable (ef7ad8e3)

Features

  • adds support for ng-class on all surfaces :smile: (c869fb1e)
  • Added the changelog and release gulp tasks (a0406e1a, #62)
  • Added validation commit msg file (a3b57051)

Documentation

  • clearly stating what fa-pipe-to and fa-pipe-from are supposed to be doing (568d6d85)
  • clearly stating what fa-pipe-to and fa-pipe-from are supposed to be doing (8a9ba9ab)
  • added a link to the starter app (5e36d45d)
  • update contact info and change sample commit messages to imperative tense (843c9e82)
  • updated the list of accepted types in the commit messages (334bc7a6)
  • updated the contribute section to include the commits validation (442cb0c9)