<ahref="http://todomvcapp.meteor.com"data-source="http://meteor.com"data-content="Meteor is an ultra-simple environment for building modern websites.A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a>
</li>
...
...
@@ -235,6 +235,9 @@
<liclass="labs">
<ahref="https://github.com/tastejs/todomvc/blob/gh-pages/labs/architecture-examples/socketstream/readme.md"data-source="http://www.socketstream.org"data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream</a>
</li>
<liclass="routing labs">
<ahref="labs/architecture-examples/firebase-angular/"data-source="https://www.firebase.com"data-content="Firebase is a scalable realtime backend that lets you build apps without managing servers. Firebase persists and updates JSON data in realtime and is best used in combination with a JavaScrpt MV* framework such as AngularJS or Backbone.">Firebase + AngularJS</a>
"readme":"AngularFire\n===========\nAngularFire is an officially supported [AngularJS](http://angularjs.org/) binding\nfor [Firebase](http://www.firebase.com/?utm_medium=web&utm_source=angularFire).\nFirebase is a full backend so you don't need servers to build your Angular app!\n\nThe bindings let you associate a Firebase URL with a model (or set of models),\nand they will be transparently kept in sync across all clients currently using\nyour app. The 2-way data binding offered by AngularJS works as normal, except\nthat the changes are also sent to all other clients instead of just a server.\n\n### Live Demo: <a target=\"_blank\" href=\"http://firebase.github.io/angularFire/examples/chat/\">Simple chat room</a>.\n### Live Demo: <a target=\"_blank\" href=\"http://firebase.github.io/angularFire/examples/todomvc/\">Real-time TODO app</a>.\n\n[](https://travis-ci.org/firebase/angularFire)\n\nUsage\n-----\nInclude both firebase.js and angularFire.js in your application.\n\n```html\n<script src=\"https://cdn.firebase.com/v0/firebase.js\"></script>\n<script src=\"angularFire.js\"></script>\n```\n\nAdd the module `firebase` as a dependency to your app module:\n\n```js\nvar myapp = angular.module('myapp', ['firebase']);\n```\n\nYou now have two options.\n\nOption 1: Implicit synchronization\n----------------------------------\nThis method is great if you want to implicitly synchronize a model with Firebase.\nAll local changes will be automatically sent to Firebase, and all remote changes\nwill instantly update the local model.\n\nSet `angularFire` as a service dependency in your controller:\n\n```js\nmyapp.controller('MyCtrl', ['$scope', 'angularFire',\n function MyCtrl($scope, angularFire) {\n ...\n }\n]);\n```\n\nBind a Firebase URL to any model in `$scope`. The fourth argument is the type\nof model you want to use (can be any JavaScript type, you mostly want a\ndictionary or array):\n\n```js\nvar url = 'https://<my-firebase>.firebaseio.com/items';\nvar promise = angularFire(url, $scope, 'items', []);\n```\n\nUse the model in your markup as you normally would:\n\n```html\n<ul ng-controller=\"MyCtrl\">\n <li ng-repeat=\"item in items\">{{item.name}}: {{item.desc}}</li>\n</ul>\n```\n\nData from Firebase is loaded asynchronously, so make sure you edit the model\n*only after the promise has been fulfilled*. You can do this using the `then`\nmethod (See the\n[Angular documentation on $q](http://docs.angularjs.org/api/ng.$q)\nfor more on how promises work).\n\nPlace all your logic that will manipulate the model like this:\n\n```js\npromise.then(function() {\n // Add a new item by simply modifying the model directly.\n $scope.items.push({name: \"Firebase\", desc: \"is awesome!\"});\n // Or, attach a function to $scope that will let a directive in markup manipulate the model.\n $scope.removeItem = function() {\n $scope.items.splice($scope.toRemove, 1);\n $scope.toRemove = null;\n };\n});\n```\n\nSee the source for the\n[controller behind the demo TODO app](https://github.com/firebase/angularFire/blob/gh-pages/examples/todomvc/js/controllers/todoCtrl.js)\nfor a working example of this pattern.\n\nOption 2: Explicit synchronization\n---------------------------------- \nThis method is great if you want control over when local changes are\nsynchronized to Firebase. Any changes made to a model won't be synchronized\nautomatically, and you must invoke specific methods if you wish to update the\nremote data. All remote changes will automatically appear in the local model\n(1-way synchronization).\n\nSet `angularFireCollection` as a service dependency in your controller:\n\n```js\nmyapp.controller('MyCtrl', ['$scope', 'angularFireCollection',\n function MyCtrl($scope, angularFireCollection) {\n ...\n }\n]);\n```\n\nCreate a collection at a specified Firebase URL and assign it to a model in `$scope`:\n\n```js\n$scope.items = angularFireCollection(url);\n```\n\nUse the model as you normally would in your markup:\n\n```html\n<ul ng-controller=\"MyCtrl\">\n <li ng-repeat=\"item in items\">{{item.name}}: {{item.desc}}</li>\n</ul>\n```\n\nYou can bind specific functions if you wish to add, remove or update objects in\nthe collection with any Angular directive:\n\n```html\n<form ng-submit=\"items.add(item)\">\n <input type=\"text\" ng-model=\"item.name\" placeholder=\"Name\" required/>\n <input type=\"text\" ng-model=\"item.desc\" placeholder=\"Description\"/>\n</form>\n```\n\nYou can do the same with the `remove` and `update` methods.\n\nSee the source for the\n[controller behind the demo chat app](https://github.com/firebase/angularFire/blob/gh-pages/examples/chat/app.js)\nfor a working example of this pattern.\n\nDevelopment\n-----------\nIf you'd like to hack on AngularFire itself, you'll need\n[UglifyJS](https://github.com/mishoo/UglifyJS2) and\n[CasperJS](https://github.com/n1k0/casperjs):\n\n```bash\nnpm install uglifyjs -g\nbrew install casperjs\n```\n\nA Makefile is included for your convenience:\n\n```bash\n# Run tests\nmake test\n# Minify source\nmake minify\n```\n\nLicense\n-------\n[MIT](http://firebase.mit-license.org).\n",
"readmeFilename":"README.md",
"_id":"angular-fire@0.2.0",
"description":"AngularFire =========== AngularFire is an officially supported [AngularJS](http://angularjs.org/) binding for [Firebase](http://www.firebase.com/?utm_medium=web&utm_source=angularFire). Firebase is a full backend so you don't need servers to build your Angular app!",
*[AngularJS bindings for Firebase](http://github.com/firebase/angularFire)
Get help from other AngularJS users:
*[Firebase on StackOverflow](http://stackoverflow.com/questions/tagged/firebase)
*[Google Groups mailing list](https://groups.google.com/forum/?fromgroups#!forum/firebase-talk)
*[Firebase on Twitter](https://twitter.com/Firebase)
*[Firebase on Facebook](https://facebook.com/Firebase)
*[Firebase on Google +](https://plus.google.com/115330003035930967645/posts)
_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
## Implementation
Firebase provides a realtime persistence layer for JSON data. In this example,
we combine Firebase with AngularJS to create a collaborative TODO app where
the TODO items are persisted and updated in realtime.
There is very little difference between this app and the vanilla AngularJS
TODO app in how AngularJS is used. The only significant difference is the
use of [AngularFire](http://github.com/firebase/angularFire), which provides
an AngularJS service for persisting and updating TODO items in realtime.
