You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
***afs:** Gracefully handle duplicate emissions on modified/deleted ([#1825](https://github.com/angular/angularfire2/issues/1825)) ([76ff6c1](https://github.com/angular/angularfire2/commit/76ff6c1))
7
+
***core:** If an AngularFire observable was empty or threw, it could block Universal rendering ([#1832](https://github.com/angular/angularfire2/issues/1832)) ([36a8ff8](https://github.com/angular/angularfire2/commit/36a8ff8))
8
+
***core:** Fix for the Firebase ES export problems in Node ([#1821](https://github.com/angular/angularfire2/issues/1821)) ([f1014ee](https://github.com/angular/angularfire2/commit/f1014ee))
9
+
***storage:** Fix for zone issues on downloadURL and metadata, which blocked Universal rendering ([#1835](https://github.com/angular/angularfire2/issues/1835)) ([441607a](https://github.com/angular/angularfire2/commit/441607a))
10
+
11
+
12
+
### Features
13
+
14
+
***firestore:** Added a `get` Observable ([#1824](https://github.com/angular/angularfire2/issues/1824)) ([9f34be8](https://github.com/angular/angularfire2/commit/9f34be8))
Copy file name to clipboardExpand all lines: docs/deploying-angularfire-to-firebase.md
+14-6
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,28 @@
1
1
# 7. Deploy AngularFire to Firebase
2
2
3
-
### 0. Build your Angular project for prod
3
+
### 0. Build your Angular project for production
4
4
5
-
Before you can deploy your angular project, you need to build a version with your prod environment variables.
6
-
Make sure to add your production firebase configuraiton to the src/environments/environment.prod.ts before you build.
5
+
Before you can deploy your angular project, you need to build a version with your prod environment variables.
6
+
Make sure to add your production firebase configuraiton to the src/environments/environment.prod.ts before you build.
7
7
8
8
```bash
9
9
# build the angular project, creates a dist folder in your directory
10
10
ng build -prod
11
11
```
12
12
13
-
### 1. Run Firebase init
13
+
### 1. Initializing a Firebase project
14
14
15
15
You must initialize Firebase Hosting in order to deploy your application. In order to do this run the `firebase init` command.
16
-
This command prompts you to give the public directory. Choose the /dist directory created by the `ng build -prod`.
17
-
`firebase init` will also ask you if you want to overwrite your index file. Type `no` since your angular app includes a index file.
16
+
17
+
Note: If you haven't installed the Firebase CLI yet, run this command:
18
+
19
+
```bash
20
+
npm install --global firebase-tools
21
+
```
22
+
23
+
- This command prompts you to enter a public directory. Enter `dist` (generated by `ng build -prod`).
24
+
- The command will also ask you if you want to overwrite your index file. Type `n` since your Angular app includes a index file.
25
+
- This command also prompts you whether to configure the project as a single-page app. Enter `y` if you're using Angular Router or similar. Otherwise, enter `n`.
Copy file name to clipboardExpand all lines: docs/firestore/collections.md
+14-3
Original file line number
Diff line number
Diff line change
@@ -74,6 +74,7 @@ interface DocumentSnapshot {
74
74
There are multiple ways of streaming collection data from Firestore.
75
75
76
76
### `valueChanges()`
77
+
77
78
**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.
78
79
79
80
**Why would you use it?** - When you just need a list of data. No document metadata is attached to the resulting array which makes it simple to render to a view.
@@ -83,6 +84,7 @@ There are multiple ways of streaming collection data from Firestore.
83
84
**Best practices** - Use this method to display data on a page. It's simple but effective. Use `.snapshotChanges()` once your needs become more complex.
**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of `DocumentChangeAction[]`.
127
130
128
131
**Why would you use it?** - When you need a list of data but also want to keep around metadata. Metadata provides you the underyling `DocumentReference`, document id, and array index of the single document. Having the document's id around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `DocumentChangeAction` is useful for ngrx reducers, form states, and animation states.
@@ -132,6 +135,7 @@ export class AppComponent {
132
135
**Best practices** - Use an observable operator to transform your data from `.snapshotChanges()`. Don't return the `DocumentChangeAction[]` to the template. See the example below.
**What is it?** - Returns an Observable of the most recent changes as a `DocumentChangeAction[]`.
175
180
176
181
**Why would you use it?** - The above methods return a synchronized array sorted in query order. `stateChanges()` emits changes as they occur rather than syncing the query order. This works well for ngrx integrations as you can build your own data structure in your reducer methods.
177
182
178
183
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore.
**What is it?** - Returns an Observable of `DocumentChangeAction[]` as they occur. Similar to `stateChanges()`, but instead it keeps around the trail of events as an array.
218
225
219
226
**Why would you use it?** - This method is like `stateChanges()` except it is not ephemeral. It collects each change in an array as they occur. This is useful for ngrx integrations where you need to replay the entire state of an application. This also works as a great debugging tool for all applications. You can simple write `afs.collection('items').auditTrail().subscribe(console.log)` and check the events in the console as they occur.
220
227
221
228
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore.
There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `modified`. Each streaming method listens to all three by default. However, you may only be intrested in one of these events. You can specify which events you'd like to use through the first parameter of each method:
@@ -304,7 +314,8 @@ For example, a user updates the third item in a list. In a state based method li
304
314
305
315
To add a new document to a collection with a generated id use the `add()` method. This method uses the type provided by the generic class to validate it's type structure.
There are multiple ways of streaming collection data from Firestore.
69
71
70
72
### `valueChanges()`
73
+
71
74
**What is it?** - Returns an Observable of document data. All Snapshot metadata is stripped. This method provides only the data.
72
75
73
76
**Why would you use it?** - When you just need the object data. No document metadata is attached which makes it simple to render to a view.
74
77
75
78
**When would you not use it?** - When you need the `id` of the document to use data manipulation methods. This method assumes you either are saving the `id` to the document data or using a "readonly" approach.
76
79
77
80
### `snapshotChanges()`
81
+
78
82
**What is it?** - Returns an Observable of data as a `DocumentChangeAction`.
79
83
80
84
**Why would you use it?** - When you need the document data but also want to keep around metadata. This metadata provides you the underyling `DocumentReference` and document id. Having the document's id around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `DocumentChangeAction` is useful for ngrx reducers, form states, and animation states.
Copy file name to clipboardExpand all lines: docs/install-angular-cli-windows10.md
+18-15
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Installing angular-cli on Windows 10
1
+
# Installing Angular CLI on Windows 10
2
2
3
-
> There had been installation issues of angular-cli on Windows 10 system. Most of the time these errors are related to Python dependecies and node-gyp.
3
+
> There had been installation issues of `@angular/cli` on Windows 10 system. Most of the time these errors are related to Python dependecies and node-gyp.
To resolve this issue, make sure you're upgraded to latest version of **NPM** and try installing angular-cli. This seems to have worked on certain scenarios.
36
+
To resolve this issue, make sure you've upgraded to the latest version of **NPM** and try installing `@angular/cli` again. This seems to have worked on certain scenarios.
37
37
38
-
If the above doesn't worksthen the below steps should help. Please ensure all the commands are executed as an **Administrator**.
38
+
If the above doesn't workthen the below steps should help. Please ensure all the commands are executed as an **Administrator**.
39
39
40
-
### Steps:
40
+
## Steps:
41
41
42
-
### 1) Install node-gyp from [here](https://github.com/nodejs/node-gyp)
42
+
### 1) Install `node-gyp` from [here](https://github.com/nodejs/node-gyp) using NPM
43
43
44
-
```ts
44
+
```bash
45
45
npm install -g node-gyp
46
46
```
47
47
48
-
### 2) Install Windows build tool from [here](https://github.com/felixrieseberg/windows-build-tools)
48
+
### 2) Install Windows build tools from [here](https://github.com/felixrieseberg/windows-build-tools) using NPM
49
49
50
-
```ts
50
+
```bash
51
51
npm install --global windows-build-tools
52
52
```
53
53
54
-
*This will also install python
54
+
*This will also install Python
55
55
56
-
### 3) Install Angular-CLI
56
+
### 3) Install AngularCLI
57
57
58
-
npm install -g angular-cli
58
+
```bash
59
+
npm install -g @angular/cli
60
+
```
59
61
60
-
This should install angular-cli without errors.
62
+
This should install `@angular/cli` without errors.
61
63
62
64
#### Post this installation, follow the installation [guide](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to install AngularFire and everything should work as expected.
63
65
64
66
65
67
### Note:
66
-
When you start your app using "ng serve"in the console, you might still see the below errors. Despite these errors, the application should work as expected and should be able to talk to Firebase.
67
68
68
-
```ts
69
+
When you start your app using `ng serve`in the console, you might still see the below errors. Despite these errors, the application should work as expected and should be able to talk to Firebase.
70
+
71
+
```bash
69
72
ERROR in [default] C:\angularFire2Test\node_modules\angularfire2\interfaces.d.ts:12:34
Copy file name to clipboardExpand all lines: docs/rtdb/lists.md
+15-11
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ The `AngularFireList` service is not created by itself, but through the `Angular
6
6
7
7
The guide below demonstrates how to retrieve, save, and remove data as lists.
8
8
9
-
## Injecting the AngularFireDatabase service
9
+
## Injecting the `AngularFireDatabase` service
10
10
11
11
**Make sure you have bootstrapped your application for AngularFire. See the Installation guide for bootstrap setup.**
12
12
@@ -25,9 +25,7 @@ import { AngularFireDatabase } from 'angularfire2/database';
25
25
styleUrls: ['app.component.css']
26
26
})
27
27
exportclassAppComponent {
28
-
constructor(db:AngularFireDatabase) {
29
-
30
-
}
28
+
constructor(db:AngularFireDatabase) { }
31
29
}
32
30
```
33
31
@@ -74,35 +72,40 @@ export class AppComponent {
74
72
```
75
73
76
74
## `AngularFireAction` - Action based API
75
+
77
76
AngularFire provides methods that stream data back as redux compatible actions. This gives you extra horsepower when using libraries like Animations, ngrx, and ReactiveForms.
78
77
79
78
### `valueChanges()`
79
+
80
80
**What is it?** - Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.
81
81
82
82
**Why would you use it?** - When you just need a list of data. No snapshot metadata is attached to the resulting array which makes it simple to render to a view.
83
83
84
84
**When would you not use it?** - When you need a more complex data structure than an array or you need the `key` of each snapshot for data manipulation methods. This method assumes you either are saving the `key` for the snapshot data or using a "readonly" approach.
85
85
86
86
### `snapshotChanges()`
87
-
**What is it?** - Returns an Observable of data as a synchronized array of `AngularFireAction<DatabaseSnapshot>[]`.
87
+
88
+
**What is it?** - Returns an Observable of data as a synchronized array of `AngularFireAction<DatabaseSnapshot>[]`.
88
89
89
90
**Why would you use it?** - When you need a list of data but also want to keep around metadata. Metadata provides you the underyling `DatabaseReference` and snapshot key. Having the snapshot's `key` around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `AngularFireAction` is useful for ngrx reducers, form states, and animation states.
90
91
91
92
**When would you not use it?** - When you need a more complex data structure than an array or if you need to process changes as they occur. This array is synchronized with the remote and local changes in the Firebase Database.
92
93
93
94
### `stateChanges()`
94
-
**What is it?** - Returns an Observable of the most recent change as an `AngularFireAction`.
95
+
96
+
**What is it?** - Returns an Observable of the most recent change as an `AngularFireAction`.
95
97
96
98
**Why would you use it?** - The above methods return a singular `AngularFireAction` from each child event that occurs. `stateChanges()` emits changes as they occur rather than syncing the query order. This works well for ngrx integrations as you can build your own data structure in your reducer methods.
97
99
98
-
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of `AngularFireDatabase`.
100
+
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of `AngularFireDatabase`.
99
101
100
102
### `auditTrail()`
103
+
101
104
**What is it?** - Returns an Observable of `AngularFireAction[]` as they occur. Similar to `stateChanges()`, but instead it keeps around the trail of events as an array.
102
105
103
106
**Why would you use it?** - This method is like `stateChanges()` except it is not ephemeral. It collects each change in an array as they occur. This is useful for ngrx integrations where you need to replay the entire state of an application. This also works as a great debugging tool for all applications. You can simple write `db.list('items').auditTrail().subscribe(console.log)` and check the events in the console as they occur.
104
107
105
-
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFireDatabase.
108
+
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFireDatabase.
106
109
107
110
### Limiting events
108
111
@@ -133,6 +136,7 @@ The table below highlights some of the common methods on the `AngularFireList`.
133
136
|`remove(key: string?)`| Deletes the item by key. If no parameter is provided, the entire list will be deleted. |
134
137
135
138
## Returning promises
139
+
136
140
Each data operation method in the table above returns a promise. However,
137
141
you should rarely need to use the completion promise to indicate success,
138
142
because the realtime database keeps the list in sync.
0 commit comments