From 966bb8fcddf9623c454ae7a4e30a4753fca90460 Mon Sep 17 00:00:00 2001
From: Bram Borggreve <borggreve@gmail.com>
Date: Tue, 10 Jan 2017 03:12:57 -0500
Subject: [PATCH 1/2] chore(docs): add documentation to integrate AngularFire
 (WIP)

---
 .../stories/include-angularfire.md            | 152 ++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 docs/documentation/stories/include-angularfire.md

diff --git a/docs/documentation/stories/include-angularfire.md b/docs/documentation/stories/include-angularfire.md
new file mode 100644
index 000000000000..e5dc04d55886
--- /dev/null
+++ b/docs/documentation/stories/include-angularfire.md
@@ -0,0 +1,152 @@
+# Include AngularFire
+
+[Firebase](https://firebase.google.com/) is a mobile and web application platform with tools and infrastructure designed
+to help developers build high-quality apps.
+
+#### Create new project
+
+Create a new project and navigate into the project.
+
+```bash
+$ ng new my-app
+$ cd my-app
+```
+
+#### Install dependencies
+
+In the new project you need to install the required dependencies.
+
+```bash
+$ npm install --save angularfire2 firebase
+```
+
+#### Get Firebase configuration details
+
+In order to connect AngularFire to Firebase we need to get the configuration details.
+
+Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.
+
+- Log in to the [Firebase](https://firebase.google.com) console.
+- Create New Project or open an existing one.
+- Click `Add Firebase to your web app`.
+- From the modal window that pops up you copy the `config` object.
+
+```javascript
+  var config = {
+    apiKey: "your-api-key",
+    authDomain: "your-auth-domain",
+    databaseURL: "your-database-url",
+    storageBucket: "your-storage-bucket",
+    messagingSenderId: "your-message-sender-id"
+  };
+```
+
+#### Create FirebaseModule
+
+We need a way to store these configuration details in our app. We do this by creating a module.
+
+Create a new file `src/app/firebase.ts` with the content below and pass in the variables you retrieved from Firebase.
+
+```typescript
+import { AngularFireModule, AuthMethods } from 'angularfire2';
+import { FirebaseAppConfig } from 'angularfire2/interfaces';
+import { AuthConfiguration } from 'angularfire2/auth';
+
+const config: FirebaseAppConfig = {
+  apiKey: 'your-api-key',
+  authDomain: 'your-auth-domain',
+  databaseURL: 'your-database-url',
+  storageBucket: 'your-storage-bucket',
+};
+
+const authConfig: AuthConfiguration = {
+  method: AuthMethods.Popup,
+};
+
+export const FirebaseModule = AngularFireModule.initializeApp(config, authConfig);
+```
+
+#### Import FirebaseModule
+
+In `src/app/app.module.ts` we need to reference the FirebaseModule so it gets imported in our app.
+
+On the top of the file you import the module from the file created in the previous step. In the array of imports you
+reference the module.
+
+```typescript
+/* other imports */
+import { FirebaseModule } from './firebase';
+
+@NgModule({
+  ...
+  imports: [
+    ...
+    FirebaseModule
+  ]
+  ...
+})
+
+```
+
+
+# W.I.P.
+
+#### Use Firebase in your components
+
+```typescript
+import { Component } from '@angular/core';
+import { AngularFire, FirebaseListObservable } from 'angularfire2';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Firebase TODO';
+
+  public todos: FirebaseListObservable<any[]>;
+
+  constructor(
+    private af: AngularFire
+  ) {
+    this.todos = af.database.list('/todos');
+  }
+
+  addTodo(name) {
+    this.todos.push({ name: name.value, done: false });
+    name.value = null;
+  }
+
+  toggleDone(todo) {
+    this.todos.update(todo, { done: !todo.done });
+  }
+
+  removeTodo(todo) {
+    this.todos.remove(todo);
+  }
+}
+
+```
+
+
+```html
+<h1>
+  {{title}}
+</h1>
+
+<form (submit)="addTodo(name)">
+  <input type="text" #name placeholder="Name">
+  <button type="submit">Add</button>
+</form>
+
+<ul>
+  <li *ngFor="let todo of todos | async">
+    <span [ngStyle]="{'text-decoration': todo.done ? 'line-through' : ''}">
+      {{todo.name}}
+    </span>
+    <a href="#" (click)="removeTodo(todo)">Delete</a>
+    <a href="#" (click)="toggleDone(todo)">Done</a>
+  </li>
+</ul>
+```
\ No newline at end of file

From 22424f2b8fe65c79556454b2972caa5d2491721e Mon Sep 17 00:00:00 2001
From: Bram Borggreve <borggreve@gmail.com>
Date: Tue, 17 Jan 2017 21:16:19 -0500
Subject: [PATCH 2/2] chore(docs): update documentation to integrate
 AngularFire

---
 .../stories/include-angularfire.md            | 125 +++++-------------
 1 file changed, 32 insertions(+), 93 deletions(-)

diff --git a/docs/documentation/stories/include-angularfire.md b/docs/documentation/stories/include-angularfire.md
index e5dc04d55886..b20a449343ad 100644
--- a/docs/documentation/stories/include-angularfire.md
+++ b/docs/documentation/stories/include-angularfire.md
@@ -1,7 +1,8 @@
 # Include AngularFire
 
 [Firebase](https://firebase.google.com/) is a mobile and web application platform with tools and infrastructure designed
-to help developers build high-quality apps.
+to help developers build high-quality apps. [AngularFire2](https://github.com/angular/angularfire2) is the official 
+Angular library to use Firebase in your apps.
 
 #### Create new project
 
@@ -22,7 +23,7 @@ $ npm install --save angularfire2 firebase
 
 #### Get Firebase configuration details
 
-In order to connect AngularFire to Firebase we need to get the configuration details.
+In order to connect AngularFire to Firebase you need to get the configuration details.
 
 Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.
 
@@ -41,112 +42,50 @@ Firebase offers an easy way to get this, by showing a JavaScript object that you
   };
 ```
 
-#### Create FirebaseModule
+#### Configure the Environment
 
-We need a way to store these configuration details in our app. We do this by creating a module.
+These configuration details need to be stored in our app, one way to do this using the `environment`. This allows you to 
+use different credentials in development and production.
 
-Create a new file `src/app/firebase.ts` with the content below and pass in the variables you retrieved from Firebase.
+Open `src/environments/environment.ts` and add a key `firebase` to the exported constant:
 
 ```typescript
-import { AngularFireModule, AuthMethods } from 'angularfire2';
-import { FirebaseAppConfig } from 'angularfire2/interfaces';
-import { AuthConfiguration } from 'angularfire2/auth';
-
-const config: FirebaseAppConfig = {
-  apiKey: 'your-api-key',
-  authDomain: 'your-auth-domain',
-  databaseURL: 'your-database-url',
-  storageBucket: 'your-storage-bucket',
-};
-
-const authConfig: AuthConfiguration = {
-  method: AuthMethods.Popup,
+export const environment = {
+  production: false,
+  firebase: {
+    apiKey: 'your-api-key',
+    authDomain: 'your-auth-domain',
+    databaseURL: 'your-database-url',
+    storageBucket: 'your-storage-bucket',
+  }
 };
-
-export const FirebaseModule = AngularFireModule.initializeApp(config, authConfig);
 ```
 
-#### Import FirebaseModule
+To define the keys for production you need to update `src/environments/environment.prod.ts`.
 
-In `src/app/app.module.ts` we need to reference the FirebaseModule so it gets imported in our app.
+#### Import and load FirebaseModule
 
-On the top of the file you import the module from the file created in the previous step. In the array of imports you
-reference the module.
+The final step is to import `AngularFireModule` and initialize it using the parameters from the `environment`.
 
-```typescript
-/* other imports */
-import { FirebaseModule } from './firebase';
-
-@NgModule({
-  ...
-  imports: [
-    ...
-    FirebaseModule
-  ]
-  ...
-})
+Open `src/app/app.module.ts` and add the following lines on the top of the file, with the other imports:
 
+```typescript
+import { AngularFireModule } from 'angularfire2';
+import { environment } from '../environments/environment';
 ```
 
-
-# W.I.P.
-
-#### Use Firebase in your components
+To initialize AngularFire add the following line to the `imports` array inside the `NgModule`: 
 
 ```typescript
-import { Component } from '@angular/core';
-import { AngularFire, FirebaseListObservable } from 'angularfire2';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+@NgModule({
+  // declarations
+  imports: [
+    // BrowserModule, etc
+    AngularFireModule.initializeApp(environment.firebase),
+  ]
+  // providers
+  // bootstrap
 })
-export class AppComponent {
-  title = 'Firebase TODO';
-
-  public todos: FirebaseListObservable<any[]>;
-
-  constructor(
-    private af: AngularFire
-  ) {
-    this.todos = af.database.list('/todos');
-  }
-
-  addTodo(name) {
-    this.todos.push({ name: name.value, done: false });
-    name.value = null;
-  }
-
-  toggleDone(todo) {
-    this.todos.update(todo, { done: !todo.done });
-  }
-
-  removeTodo(todo) {
-    this.todos.remove(todo);
-  }
-}
-
 ```
 
-
-```html
-<h1>
-  {{title}}
-</h1>
-
-<form (submit)="addTodo(name)">
-  <input type="text" #name placeholder="Name">
-  <button type="submit">Add</button>
-</form>
-
-<ul>
-  <li *ngFor="let todo of todos | async">
-    <span [ngStyle]="{'text-decoration': todo.done ? 'line-through' : ''}">
-      {{todo.name}}
-    </span>
-    <a href="#" (click)="removeTodo(todo)">Delete</a>
-    <a href="#" (click)="toggleDone(todo)">Done</a>
-  </li>
-</ul>
-```
\ No newline at end of file
+#### Congratulations, you can now use Firebase in your Angular app!
\ No newline at end of file