-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
231 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,207 @@ | ||
| # These instructions are for the @next RC5 setup | ||
| We have yet to release the RC5 version to the main package because we are still testing it out. We recommend you try it by following the steps below. However, if you are still on RC4, you can refer to the older docs here: https://github.com/angular/angularfire2/blob/5720ebc48fddb2d1e75cd905fb534c4ed2e5c286/docs/1-install-and-setup.md | ||
|
|
||
| # 1. Installation and Setup | ||
|
|
||
| > Getting started with AngularFire2 is easy with the [Angular CLI](https://github.com/angular/angular-cli). Follow the 10 steps below to get started. Don't worry, we're always working to make this shorter. | ||
| **The setups below use the [Angular CLI](https://github.com/angular/angular-cli).** | ||
|
|
||
| **We recommend using the Webpack branch, [which you can see the guide here.](1-install-and-setup.md)** | ||
|
|
||
| ### 0. Prerequisites | ||
|
|
||
| ```bash | ||
| npm install -g angular-cli | ||
| npm install -g typings | ||
| ``` | ||
|
|
||
| ### 1. Create a new project | ||
|
|
||
| ```bash | ||
| ng new <project-name> | ||
| cd <project-name> | ||
| ``` | ||
|
|
||
| The Angular CLI's `new` command will set up the latest Angular build in a new project structure. | ||
|
|
||
| ### 2. Install AngularFire 2 and Firebase | ||
|
|
||
| ```bash | ||
| npm install angularfire2 firebase --save | ||
| ``` | ||
|
|
||
| Now that you have a new project setup, install AngularFire 2 and Firebase from npm. | ||
|
|
||
| ### 3. Include AngularFire 2 and Firebase in the vendor files | ||
|
|
||
| Open `angular-cli-build.js`. | ||
|
|
||
| Include AngularFire2 and Firebase in the `vendorNpmFiles` array: | ||
|
|
||
| ```js | ||
| /* global require, module */ | ||
|
|
||
| var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); | ||
|
|
||
| module.exports = function(defaults) { | ||
| return new Angular2App(defaults, { | ||
| vendorNpmFiles: [ | ||
| 'systemjs/dist/system-polyfills.js', | ||
| 'systemjs/dist/system.src.js', | ||
| 'zone.js/dist/**/*.+(js|js.map)', | ||
| 'es6-shim/es6-shim.js', | ||
| 'reflect-metadata/**/*.+(js|js.map)', | ||
| 'rxjs/**/*.+(js|js.map)', | ||
| '@angular/**/*.+(js|js.map)', | ||
| // above are the existing entries | ||
| // below are the AngularFire entries | ||
| 'angularfire2/**/*.js', | ||
| 'firebase/*.js' | ||
| ] | ||
| }); | ||
| }; | ||
| ``` | ||
|
|
||
| ### 4. Build | ||
|
|
||
| ```bash | ||
| ng build | ||
| ``` | ||
|
|
||
| Run a build and check the `/dist/vendor` folder for the `angularfire2` and `firebase` folders. | ||
|
|
||
| ### 5. System.js | ||
|
|
||
| Open `/src/system-config.ts`. Modify the file like below: | ||
|
|
||
| ```js | ||
| /** Map relative paths to URLs. */ | ||
| const map: any = { | ||
| 'firebase': 'vendor/firebase/firebase.js', | ||
| 'angularfire2': 'vendor/angularfire2' | ||
| }; | ||
|
|
||
| /** User packages configuration. */ | ||
| const packages: any = { | ||
| angularfire2: { | ||
| defaultExtension: 'js', | ||
| main: 'angularfire2.js' | ||
| } | ||
| }; | ||
| ``` | ||
|
|
||
| AngularFire 2 and Firebase need to be mapped with System.js for module loading. | ||
|
|
||
| ### 6. Set up @NgModule | ||
|
|
||
| Open `/src/main.ts`, inject the Firebase providers, and specify your Firebase configuration. | ||
| This can be found in your project at [the Firebase Console](https://console.firebase.google.com): | ||
|
|
||
| ```ts | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
| import { enableProdMode, NgModule } from '@angular/core'; | ||
| import { AppComponent, environment } from './app/'; | ||
| import { AngularFireModule } from 'angularfire2'; | ||
|
|
||
| // Must export the config | ||
| export const firebaseConfig = { | ||
| apiKey: "<your-key>", | ||
| authDomain: "<your-project-authdomain>", | ||
| databaseURL: "<your-database-URL>", | ||
| storageBucket: "<your-storage-bucket>" | ||
| }; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| BrowserModule, | ||
| AngularFireModule.initializeApp(firebaseConfig) | ||
| ], | ||
| declarations: [ AppComponent ], | ||
| Bootstrap: [ AppComponent ] | ||
| }) | ||
| export class MyAppModule {} | ||
|
|
||
| ``` | ||
|
|
||
| ### 7. Inject AngularFire | ||
|
|
||
| Open `/src/app/<my-app>.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know): | ||
|
|
||
| ```ts | ||
| import { Component } from '@angular/core'; | ||
| import { AngularFire, FirebaseListObservable } from 'angularfire2'; | ||
|
|
||
| @Component({ | ||
| moduleId: module.id, | ||
| selector: '<my-app>-app', | ||
| templateUrl: '<my-app>.component.html', | ||
| styleUrls: ['<my-app>.component.css'] | ||
| }) | ||
| export class <MyApp>Component { | ||
| constructor(af: AngularFire) { | ||
|
|
||
| } | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| ### 8. Bind to a list | ||
|
|
||
| In `/src/app/<my-app>.component.ts`: | ||
|
|
||
| ```ts | ||
| import { Component } from '@angular/core'; | ||
| import { AngularFire, FirebaseListObservable } from 'angularfire2'; | ||
|
|
||
| @Component({ | ||
| moduleId: module.id, | ||
| selector: '<my-app>-app', | ||
| templateUrl: '<my-app>.component.html', | ||
| styleUrls: ['<my-app>.component.css'] | ||
| }) | ||
| export class <MyApp>Component { | ||
| items: FirebaseListObservable<any[]>; | ||
| constructor(af: AngularFire) { | ||
| this.items = af.database.list('items'); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Open `/src/app/<my-app>.component.html`: | ||
|
|
||
| ```html | ||
| <ul> | ||
| <li class="text" *ngFor="let item of items | async"> | ||
| {{item.$value}} | ||
| </li> | ||
| </ul> | ||
| ``` | ||
|
|
||
| The `async` pipe unwraps the each item in the people observable as they arrive. The observable emits an array of items that automatically unwraps A structure like this: | ||
|
|
||
| ```json | ||
| [ | ||
| { | ||
| "$value": 'something', | ||
| "$key": '<the-key>' | ||
| }, | ||
| { | ||
| "$value": 'something else', | ||
| (...) | ||
| }, | ||
| ] | ||
| ``` | ||
|
|
||
| ### 9. Serve | ||
|
|
||
| ```bash | ||
| ng serve | ||
| ``` | ||
|
|
||
| Run the serve command and go to `localhost:4200` in your browser. | ||
|
|
||
| And that's it! If it totally borke, file an issue and let us know. | ||
|
|
||
| ###[Next Step: Retrieving data as objects](2-retrieving-data-as-objects.md) |
Oops, something went wrong.