AngularFire2 example!

<html>
  <head>
    <base href=".">
    <title>Angularfire2 Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.2?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <the-app>Loading...</the-app>
  </body>
</html>

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

import { Component } from '@angular/core';

import { AuthService } from './auth.service';

@Component({
  selector: 'the-app',
  template: `
    <div style="width: 100%; margin-top: 20px;">
      <a [routerLink]="['/projects']">Projects</a>
      <button (click)="login()" style="float: right;">Login</button>
    </div>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {

  constructor(private _auth: AuthService) {
  }
  
  login() {
    this._auth.login()
      .then(result => {
        console.log('AppComponent.login: Success! Navigate to project list!', result);
      });
      // Getting a typescript error when uncommented. Not sure why...
      // .catch(error: Error => {
      //   console.error('AppComponent.login: Error!', error);
      // });
  }
}

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Routes, RouterModule } from '@angular/router';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { AppComponent } from './app.component';
import { AuthService } from './auth.service';

import { ProjectsListComponent } from './projects/list.component';
import { ProjectsListService } from './projects/list.service';

const routes: Routes = [
  { path: 'projects', component: ProjectsListComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp({
      apiKey: 'AIzaSyDFbuKX0UeXje-PRAvwIymYo2jk-uGqMa4',
      authDomain: 'test-bc800.firebaseapp.com',
      databaseURL: 'https://test-bc800.firebaseio.com',
      storageBucket: ''
    }),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    RouterModule.forRoot(routes),
  ],
  declarations: [
    AppComponent,
    ProjectsListComponent,
  ],
  providers: [
    AuthService,
    ProjectsListService,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { ProjectsListService } from './list.service';

@Component({
  selector: 'app-projects',
  templateUrl: './app/projects/list.component.html', // Plunker pathing HACK!!!
})
export class ProjectsListComponent implements OnInit {

  constructor(
    private _router: Router,
    public projects: ProjectsListService
  ) { }

  ngOnInit() {
    console.log(`ProjectsListComponent.ngOnInit: Called!`, this);
  }

  goToDetailPage(clickedProject) {
    this.router.navigate(['projects', clickedProject.$key]);
  };
}

<h2>Projects List</h2>

<ul>
  <li *ngFor="let project of projects.list | async" (click)="goToDetailPage(project)">
    {{ project.projectTitle }}
  </li>
</ul>

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;

  constructor(private _firebaseAuth: AngularFireAuth) {
    this.user = _firebaseAuth.authState;
  }

  login(): Promise {
    return this._firebaseAuth.auth.signInWithPopup(new firebase.auth.EmailAuthProvider());
  }

  logout() {
    this._firebaseAuth.auth.signOut();
  }
}

import { Injectable } from '@angular/core';

import * as firebase from 'firebase/app';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

import { AuthService } from '../auth.service';

@Injectable()
export class ProjectsListService {
  list: FirebaseListObservable<any[]>;

  constructor(private _db: AngularFireDatabase, private _auth: AuthService) {
    this.onInit();
  }

  private onInit() {
    this._auth.user.subscribe(user => { this.onAuthStateChanged(user); });
    console.log('ProjectsListService.ngOnit: Executed!', this);
  }
  
  private onAuthStateChanged(state: firebase.User) {
    this.list = this._db.list(`/projectsList/${state.uid}`);
  }
}

(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    //map tells the System loader where to look for things
    map: {
      
      'app': './app',
      
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  
      'rxjs': 'npm:rxjs',
      'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
      'typescript': 'npm:typescript@2.3.4/lib/typescript.js',
      'angularfire2': 'npm:angularfire2',
      'firebase': 'npm:firebase@3.9.0',
    },
    //packages defines our app package
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      angularfire2: {
        main: 'angularfire2.js'
      },
      firebase: {
        main: 'firebase.js'
      }
    }
  });
})(this);