Visitar URL original
angularfire2/docs/1-install-and-setup.md at master · Odder/angularfire2 · GitHub
Skip to content

1-install-and-setup.md

Latest commit

 

History

History
135 lines (100 loc) · 3.39 KB

1-install-and-setup.md

File metadata and controls

135 lines (100 loc) · 3.39 KB
Raw

1. Installation and Setup

Getting started with AngularFire2 is easy with the 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 Webpack branch of the Angular CLI.

For the Broccoli/System.js branch see this set up guide

### 0. Prerequisites

You need the Angular CLI, typings, and TypeScript 2.0. TypeScript 2.0 is required for AngularFire2.

npm install -g angular-cli@webpack 
# or install locally
npm install angular-cli@webpack --save-dev
# make sure you have typings installed
npm install -g typings 
npm install -g typescript@2.0

1. Create a new project

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

npm install angularfire2 firebase --save

Now that you have a new project setup, install AngularFire 2 and Firebase from npm.

3. Setup @NgModule

Open /src/app/app.module.ts, inject the Firebase providers, and specify your Firebase configuration. This can be found in your project at the Firebase Console:

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 {}

4. 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):

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) {
    
  }
}

5. Bind to a list

In /src/app/<my-app>.component.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:

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.$value}}
  </li>
</ul>

6. Serve

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