@@ -4,146 +4,21 @@ AngularFire is an officially supported [AngularJS](http://angularjs.org/) bindin
44for [ Firebase] ( http://www.firebase.com/?utm_medium=web&utm_source=angularFire ) .
55Firebase is a full backend so you don't need servers to build your Angular app!
66
7- The bindings let you associate a Firebase URL with a model (or set of models),
8- and they will be transparently kept in sync across all clients currently using
9- your app. The 2-way data binding offered by AngularJS works as normal, except
10- that the changes are also sent to all other clients instead of just a server.
11-
12- ### Live Demo: <a target =" _blank " href =" http://firebase.github.io/angularFire/examples/chat/ " >Simple chat room</a >.
13- ### Live Demo: <a target =" _blank " href =" http://firebase.github.io/angularFire/examples/todomvc/ " >Real-time TODO app</a >.
14-
15- [ ![ Build Status] ( https://travis-ci.org/firebase/angularFire.png )] ( https://travis-ci.org/firebase/angularFire )
16-
17- Usage
18- -----
19- Include both firebase.js and angularFire.js in your application.
20-
21- ``` html
22- <script src =" https://cdn.firebase.com/v0/firebase.js" ></script >
23- <script src =" angularFire.js" ></script >
24- ```
25-
26- Add the module ` firebase ` as a dependency to your app module:
27-
28- ``` js
29- var myapp = angular .module (' myapp' , [' firebase' ]);
30- ```
31-
32- You now have two options.
33-
34- Option 1: Implicit synchronization
35- ----------------------------------
36- This method is great if you want to implicitly synchronize a model with Firebase.
37- All local changes will be automatically sent to Firebase, and all remote changes
38- will instantly update the local model.
39-
40- Set ` angularFire ` as a service dependency in your controller:
41-
42- ``` js
43- myapp .controller (' MyCtrl' , [' $scope' , ' angularFire' ,
44- function MyCtrl ($scope , angularFire ) {
45- ...
46- }
47- ]);
48- ```
49-
50- Bind a Firebase URL to any model in ` $scope ` . The fourth argument is the type
51- of model you want to use (can be any JavaScript type, you mostly want a
52- dictionary or array):
53-
54- ``` js
55- var url = ' https://<my-firebase>.firebaseio.com/items' ;
56- var promise = angularFire (url, $scope, ' items' , []);
57- ```
58-
59- Use the model in your markup as you normally would:
60-
61- ``` html
62- <ul ng-controller =" MyCtrl" >
63- <li ng-repeat =" item in items" >{{item.name}}: {{item.desc}}</li >
64- </ul >
65- ```
66-
67- Data from Firebase is loaded asynchronously, so make sure you edit the model
68- * only after the promise has been fulfilled* . You can do this using the ` then `
69- method (See the
70- [ Angular documentation on $q] ( http://docs.angularjs.org/api/ng.$q )
71- for more on how promises work).
72-
73- Place all your logic that will manipulate the model like this:
74-
75- ``` js
76- promise .then (function () {
77- // Add a new item by simply modifying the model directly.
78- $scope .items .push ({name: " Firebase" , desc: " is awesome!" });
79- // Or, attach a function to $scope that will let a directive in markup manipulate the model.
80- $scope .removeItem = function () {
81- $scope .items .splice ($scope .toRemove , 1 );
82- $scope .toRemove = null ;
83- };
84- });
85- ```
86-
87- See the source for the
88- [ controller behind the demo TODO app] ( https://github.com/firebase/angularFire/blob/gh-pages/examples/todomvc/js/controllers/todoCtrl.js )
89- for a working example of this pattern.
90-
91- Option 2: Explicit synchronization
92- ----------------------------------
93- This method is great if you want control over when local changes are
94- synchronized to Firebase. Any changes made to a model won't be synchronized
95- automatically, and you must invoke specific methods if you wish to update the
96- remote data. All remote changes will automatically appear in the local model
97- (1-way synchronization).
98-
99- Set ` angularFireCollection ` as a service dependency in your controller:
100-
101- ``` js
102- myapp .controller (' MyCtrl' , [' $scope' , ' angularFireCollection' ,
103- function MyCtrl ($scope , angularFireCollection ) {
104- ...
105- }
106- ]);
107- ```
108-
109- Create a collection at a specified Firebase URL and assign it to a model in ` $scope ` :
110-
111- ``` js
112- $scope .items = angularFireCollection (url);
113- ```
114-
115- Use the model as you normally would in your markup:
116-
117- ``` html
118- <ul ng-controller =" MyCtrl" >
119- <li ng-repeat =" item in items" >{{item.name}}: {{item.desc}}</li >
120- </ul >
121- ```
122-
123- You can bind specific functions if you wish to add, remove or update objects in
124- the collection with any Angular directive:
125-
126- ``` html
127- <form ng-submit =" items.add(item)" >
128- <input type =" text" ng-model =" item.name" placeholder =" Name" required />
129- <input type =" text" ng-model =" item.desc" placeholder =" Description" />
130- </form >
131- ```
132-
133- You can do the same with the ` remove ` and ` update ` methods.
134-
135- See the source for the
136- [ controller behind the demo chat app] ( https://github.com/firebase/angularFire/blob/gh-pages/examples/chat/app.js )
137- for a working example of this pattern.
7+ * Please visit [ AngularFire.com] ( http://angularfire.com ) for a
8+ [ tutorial] ( http://angularfire.com/tutorial ) ,
9+ [ a quickstart guide] ( http://angularfire.com/quickstart.html ) ,
10+ [ documentation] ( http://angularfire.com/documentation.html ) and more!*
13811
13912Development
14013-----------
14+ [ ![ Build Status] ( https://travis-ci.org/firebase/angularFire.png )] ( https://travis-ci.org/firebase/angularFire )
15+
14116If you'd like to hack on AngularFire itself, you'll need
14217[ UglifyJS] ( https://github.com/mishoo/UglifyJS2 ) and
14318[ CasperJS] ( https://github.com/n1k0/casperjs ) :
14419
14520``` bash
146- npm install uglifyjs -g
21+ npm install uglify-js -g
14722brew install casperjs
14823```
14924
0 commit comments