meteor-famous-angular

Seamless Famo.us animations in any device and super-heroic AngularJS front-end MVW framework in your Meteor realtime distributed app.

Module License: Mozilla Public License 2.0

Added by: Sam Deering

GitHub

Repository

splendsome/meteor-famous-angular

Stats

Stars: 0

Watchers: 0

Forks: 0

Author

Splendsome
Splendsome

Module Description

Meteor + Famo.us + Angular = Splendsome

Splendsome brings Famo.us/Angular and Meteor together. Using Splendsome, you get:

  • Famo.us seamless cross-device rendering.
  • AngularJS modules, directives, controllers, services and scope.
  • Meteor distributed realtime collections.

Therefore, you can:

  • Create Famo.us components and animations using AngularJS directives.
  • Make AngularJS models synchronized worldwide through Meteor's client/cloud platform.
  • Focus in the application instead of boilerplate Ajax / REST management using $http, $resource or other.

Read more on the project pages:

These libraries are under active development. While it is possible to create powerful and stable apps, some things are expected to change as they move forward.

Quick start

  1. Install git sudo apt-get install git in Debian/Ubuntu or follow their instructions
  2. Install Meteor curl https://install.meteor.com | /bin/sh
  3. Install Meteorite npm install -g meteorite
  4. Create a new meteor app using meteor create myapp and/or navigate to the root of your new/existing app.
  5. Add ngMeteor package mrt add ngMeteor
  6. Add famono package mrt add famono
  7. Add splendsome package mrt add splendsome

Running (using Splendsome in your Meteor app)

To unleash the power of this fantastic combo, you need to:

  • Require splendsome
  • Use the angular module famous.angular as a dependency of your own angular module
  • Push your module into ngMeteor

Super easy:

if (Meteor.isClient)
{
  require('splendsome');
  angular.module('myModule', ['famous.angular']);
  ngMeteor.requires.push('myModule');
}

And you can start coding like this right away in your templates:

<template name="hello">

  <h1>Hello World!</h1>
  <p>{{ greeting }}</p>

  <input ng-model="text" />
  <p>[[ text ]]</p>

  <fa-app style="height: 200px">
      <fa-surface fa-background-color="'red'" fa-size="[108, 108]">
          Hello world
      </fa-surface>
  </fa-app>

</template>

In this example you have:

  1. a common Blaze / Spacebars live data template (read more)
  2. a simple usage of ngModel directive providing 2-way data binding (read more)
  3. a Famo.us/Angular Surface directive with 'Hello world' on a red background (read more)

Have fun!

Module stats last updated: 2016-10-16 15:00:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!