setup firebase

README.md

@@ -5,3 +5,35 @@ Sample Angular 2 project created with angular CLI with firebase integrated using
 Project generated with [angular-cli](https://github.com/angular/angular-cli)
 * run `npm install`
 * start local server with `npm start`
+
+Sample db imports in folder `_resources`
+
+**Don't forget to change db rules** 
+```
+{
+  "rules": {
+    ".read": "auth != null",
+    ".write": "auth != null"
+  }
+}
+```
+into
+```
+{
+  "rules": {
+    ".read": "true",
+    ".write": "true"
+  }
+}
+```
+
+**Add your firebase keys into `./src/app/app.module.ts`**
+```
+// Must export the config
+export const firebaseConfig = {
+  apiKey: '<your-key>',
+  authDomain: '<your-project-authdomain>',
+  databaseURL: '<your-database-URL>',
+  storageBucket: '<your-storage-bucket>'
+};
+```

_resources/items.json

@@ -0,0 +1,18 @@
+[
+  {
+    "body": "body one",
+    "name": "name 1"
+  },
+  {
+    "body": "body two",
+    "name": "name 2"
+  },
+  {
+    "body": "body three",
+    "name": "name 3"
+  },
+  {
+    "body": "body four",
+    "name": "name 4"
+  }
+]

package.json

@@ -20,7 +20,9 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
+    "angularfire2": "^2.0.0-beta.7",
     "core-js": "^2.4.1",
+    "firebase": "^3.6.9",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"

src/app/app.component.html

@@ -1,3 +1,9 @@
 <h1>
   {{title}}
 </h1>
+
+<ul>
+  <li class="text" *ngFor="let item of items | async">
+    {{item.name}}
+  </li>
+</ul>

src/app/app.component.ts

@@ -1,10 +1,17 @@
 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 = 'app works!';
+  items: FirebaseListObservable<any[]>;
+
+  constructor(private af: AngularFire) {
+    this.items = af.database.list('/items');
+  }
 }

src/app/app.module.ts

@@ -5,14 +5,25 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 
+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({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    AngularFireModule.initializeApp(firebaseConfig)
   ],
   providers: [],
   bootstrap: [AppComponent]