@@ -4,146 +4,21 @@ AngularFire is an officially supported [AngularJS](http://angularjs.org/) bindin
4
4
for [ Firebase] ( http://www.firebase.com/?utm_medium=web&utm_source=angularFire ) .
5
5
Firebase is a full backend so you don't need servers to build your Angular app!
6
6
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!*
138
11
139
12
Development
140
13
-----------
14
+ [ ![ Build Status] ( https://travis-ci.org/firebase/angularFire.png )] ( https://travis-ci.org/firebase/angularFire )
15
+
141
16
If you'd like to hack on AngularFire itself, you'll need
142
17
[ UglifyJS] ( https://github.com/mishoo/UglifyJS2 ) and
143
18
[ CasperJS] ( https://github.com/n1k0/casperjs ) :
144
19
145
20
``` bash
146
- npm install uglifyjs -g
21
+ npm install uglify-js -g
147
22
brew install casperjs
148
23
```
149
24
0 commit comments