Skip to content

Commit 8f95852

Browse files
EdricChan03davideast
authored andcommitted
docs(): minor typo fixes (#1743)
1 parent a508ba8 commit 8f95852

12 files changed

+106
-61
lines changed

docs/deploying-angularfire-to-firebase.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
# 7. Deploy AngularFire to Firebase
22

3-
### 0. Build your Angular project for prod
3+
### 0. Build your Angular project for production
44

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.
77

88
```bash
99
# build the angular project, creates a dist folder in your directory
1010
ng build -prod
1111
```
1212

13-
### 1. Run Firebase init
13+
### 1. Initializing a Firebase project
1414

1515
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`.
1826

1927
### 2. Deploy your Project
2028

docs/firestore/collections.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ interface DocumentSnapshot {
7474
There are multiple ways of streaming collection data from Firestore.
7575

7676
### `valueChanges()`
77+
7778
**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.
7879

7980
**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.
8384
**Best practices** - Use this method to display data on a page. It's simple but effective. Use `.snapshotChanges()` once your needs become more complex.
8485

8586
#### Example of persisting a Document Id
87+
8688
```ts
8789
import { Component } from '@angular/core';
8890
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -123,6 +125,7 @@ export class AppComponent {
123125
```
124126

125127
### `snapshotChanges()`
128+
126129
**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of `DocumentChangeAction[]`.
127130

128131
**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 {
132135
**Best practices** - Use an observable operator to transform your data from `.snapshotChanges()`. Don't return the `DocumentChangeAction[]` to the template. See the example below.
133136

134137
#### Example
138+
135139
```ts
136140
import { Component } from '@angular/core';
137141
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -171,13 +175,15 @@ export class AppComponent {
171175
```
172176

173177
### `stateChanges()`
178+
174179
**What is it?** - Returns an Observable of the most recent changes as a `DocumentChangeAction[]`.
175180

176181
**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.
177182

178183
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore.
179184

180185
#### Example
186+
181187
```ts
182188
import { Component } from '@angular/core';
183189
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -214,13 +220,15 @@ export class AppComponent {
214220
```
215221

216222
### `auditTrail()`
223+
217224
**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.
218225

219226
**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.
220227

221228
**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore.
222229

223230
#### Example
231+
224232
```ts
225233
import { Component } from '@angular/core';
226234
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -260,15 +268,17 @@ export class AppComponent {
260268

261269
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:
262270

263-
#### Basic sample
271+
#### Basic example
272+
264273
```ts
265274
constructor(private afs: AngularFirestore): {
266275
this.itemsCollection = afs.collection<Item>('items');
267276
this.items = this.itemsCollection.snapshotChanges(['added', 'removed']);
268277
}
269278
```
270279

271-
#### Component Sample
280+
#### Component example
281+
272282
```ts
273283
import { Component } from '@angular/core';
274284
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
@@ -304,7 +314,8 @@ For example, a user updates the third item in a list. In a state based method li
304314

305315
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.
306316

307-
#### Basic Sample
317+
#### Basic example
318+
308319
```ts
309320
constructor(private afs: AngularFirestore): {
310321
const shirtsCollection = afs.collection<Item>('tshirts');

docs/firestore/documents.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,15 @@ interface DocumentSnapshot {
6868
There are multiple ways of streaming collection data from Firestore.
6969

7070
### `valueChanges()`
71+
7172
**What is it?** - Returns an Observable of document data. All Snapshot metadata is stripped. This method provides only the data.
7273

7374
**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.
7475

7576
**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.
7677

7778
### `snapshotChanges()`
79+
7880
**What is it?** - Returns an Observable of data as a `DocumentChangeAction`.
7981

8082
**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.

docs/firestore/querying-collections.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Queries are created by building on the [`firebase.firestore.CollectionReference`
1111
afs.collection('items', ref => ref.where('size', '==', 'large'))
1212
```
1313

14-
**Query Options:**
14+
### Query options
1515

1616
| method | purpose |
1717
| ---------|--------------------|
@@ -77,7 +77,7 @@ size$.next('large');
7777
size$.next('small');
7878
```
7979

80-
**Example app:**
80+
### Example app
8181

8282
[See this example in action on StackBlitz](https://stackblitz.com/edit/angularfire-db-api-fbad9p).
8383

@@ -156,9 +156,9 @@ export class AppComponent {
156156
}
157157
```
158158

159-
**To run the above example as is, you need to have sample data in you firebase database with the following structure:**
160-
161-
```json
159+
**To run the above example as is, you need to have sample data in your Firebase database with the following structure:**
160+
161+
```json
162162
{
163163
"items": {
164164
"a" : {
@@ -178,6 +178,6 @@ export class AppComponent {
178178
}
179179
}
180180
}
181-
```
181+
```
182182

183183
### [Next Step: Getting started with Firebase Authentication](../auth/getting-started.md)

docs/install-and-setup.md

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ cd <project-name>
1919

2020
The Angular CLI's `new` command will set up the latest Angular build in a new project structure.
2121

22-
### 2. Test your Setup
22+
### 2. Test your setup
2323

2424
```bash
2525
ng serve
2626
open http://localhost:4200
2727
```
2828

29-
You should see a message that says *App works!*
29+
You should see a message on the page that says *App works!*
3030

3131
### 3. Install AngularFire and Firebase
3232

@@ -76,7 +76,8 @@ import { environment } from '../environments/environment';
7676
export class AppModule {}
7777
```
7878

79-
#### Custom FirebaseApp Names
79+
#### Custom `FirebaseApp` names
80+
8081
You can optionally provide a custom FirebaseApp name with `initializeApp`.
8182

8283
```ts
@@ -91,14 +92,15 @@ You can optionally provide a custom FirebaseApp name with `initializeApp`.
9192
export class AppModule {}
9293
```
9394

94-
### 6. Setup individual @NgModules
95+
### 6. Setup individual `@NgModules`
9596

9697
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
97-
- AngularFirestoreModule
98-
- AngularFireAuthModule
99-
- AngularFireDatabaseModule
100-
- AngularFireStorageModule
101-
- AngularFireMessagingModule (Future release)
98+
99+
- `AngularFirestoreModule`
100+
- `AngularFireAuthModule`
101+
- `AngularFireDatabaseModule`
102+
- `AngularFireStorageModule`
103+
- `AngularFireMessagingModule` (Future release)
102104

103105
#### Adding the Firebase Database and Auth Modules
104106

@@ -128,7 +130,7 @@ import { environment } from '../environments/environment';
128130
export class AppModule {}
129131
```
130132

131-
### 7. Inject AngularFirestore
133+
### 7. Inject `AngularFirestore`
132134

133135
Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
134136

@@ -148,7 +150,7 @@ export class AppComponent {
148150
}
149151
```
150152

151-
### 8. Bind to a list
153+
### 8. Bind a Firestore collection to a list
152154

153155
In `/src/app/app.component.ts`:
154156

@@ -186,7 +188,7 @@ Open `/src/app/app.component.html`:
186188
ng serve
187189
```
188190

189-
Run the serve command and go to `localhost:4200` in your browser.
191+
Run the serve command and navigate to `localhost:4200` in your browser.
190192

191193
And that's it! If it's totally *borked*, file an issue and let us know.
192194

docs/install-angular-cli-windows10.md

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Installing angular-cli on Windows 10
1+
# Installing Angular CLI on Windows 10
22

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.
44
55
Something as below :
66

@@ -33,39 +33,42 @@ ngular-cli\node_modules\compression-webpack-plugin\node_modules\node-zopfli
3333
.......................
3434
```
3535
36-
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.
3737
38-
If the above doesn't works then the below steps should help. Please ensure all the commands are executed as an **Administrator**.
38+
If the above doesn't work then the below steps should help. Please ensure all the commands are executed as an **Administrator**.
3939
40-
### Steps:
40+
## Steps:
4141
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
4343
44-
```ts
44+
```bash
4545
npm install -g node-gyp
4646
```
4747
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
4949
50-
```ts
50+
```bash
5151
npm install --global windows-build-tools
5252
```
5353
54-
*This will also install python
54+
*This will also install Python
5555
56-
### 3) Install Angular-CLI
56+
### 3) Install Angular CLI
5757
58-
npm install -g angular-cli
58+
```bash
59+
npm install -g @angular/cli
60+
```
5961
60-
This should install angular-cli without errors.
62+
This should install `@angular/cli` without errors.
6163
6264
#### 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.
6365
6466
6567
### 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.
6768
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
6972
ERROR in [default] C:\angularFire2Test\node_modules\angularfire2\interfaces.d.ts:12:34
7073
Cannot find namespace 'firebase'.
7174

0 commit comments

Comments
 (0)