Oshop Project

>ng new oshop

Install firebase project

• Go to console.firebase.goodle.com to add new project

• Click 'Add Firebase to your web app' and copy config part

    apiKey: "AIzaSyBCWETH07QVNnhJ88EqXU4h28bTsyU5INg",
    authDomain: "oshop-tding.firebaseapp.com",
    databaseURL: "https://oshop-tding.firebaseio.com",
    projectId: "oshop-tding",
    storageBucket: "oshop-tding.appspot.com",
    messagingSenderId: "183689916792"

• add this to project environment.ts & environment.prod.ts (command +p)

  export const environment = {
  production: false
    firebase: {
      apiKey: "AIzaSyBCWETH07QVNnhJ88EqXU4h28bTsyU5INg",
      authDomain: "oshop-tding.firebaseapp.com",
      databaseURL: "https://oshop-tding.firebaseio.com",
      projectId: "oshop-tding",
      storageBucket: "oshop-tding.appspot.com",
      messagingSenderId: "183689916792"
    }
  };

• add firebase library

>npm i --save firebase@4.2.0 angularfire2@4.0.0-rc.1

• import firebase library to app.module.ts and add module to module imports

  import { AngularFireModule } from 'angularfire2';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import { AngularFireAuthModule } from 'angularfire2/auth';
  ...
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],

Installing Bootstrap 4

• install bootstrap4

npm i --save bootstrap@next --because current stable one is ver 3

• add css to style.css

@import "~bootstrap/dist/css/bootstrap.css";

• get bootstrap starter template

go to getbootstrap.com/docs/4.0/examples/start-template/ to get source

• copy body>nav till container add to app.component.html

• add body padding top

body{ padding-top: 80px; }

Extracting NavBar Component

• create new bootstrap nav bar component

ng g c bs-navbar

• copy nav bar code from app.component.html to bs-navbar.component.html

• change selector to ba-navbar in bs-navbar.component.ts

• add new bs-navbar tag to app.component.html

Create component

ng g c home
ng g c products
ng g c shopping-car
ng g c check-out
ng g c order-success
ng g c my-orders

ng g c admin/admin-products
ng g c admin/admin-orders

Define Router

• add RouterModule in app.module.ts

import { RouterModule } from '@angular/router';

// for normal user router
RouterModule.forRoot([
      { path: '', component: HomeComponent},
      { path: 'products', component: ProductsComponent},
      { path: 'shopping-cart', component: ShoppingCartComponent},
      { path: 'check-out', component: CheckOutComponent},
      { path: 'order-success', component: OrderSuccessComponent},
      { path: 'login', component: LoginComponent},
      { path: 'admin/products', component: AdminOrdersComponent},
      { path: 'admin/orders', component: AdminOrdersComponent}
    ])

• add in app.component.html

• modify bs-navbar change href to routerLink,

  routerLink="/shopping-cart"

Using ng-bootstrap

• Avoid to use bootstrap.js and JQuery, because they directly modify DOM

• ng-bootstrap.github.io install ng-bootstrap

• latest ng-bootstrap didn't work with Angualr4(using 1.0.0-beta.1)

npm install --save @ng-bootstrap/ng-bootstrap@1.0.0-beta.1

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

NgbModule.forRoot(),

• modify bs-navbar.component.ts add

  ngbDropdown ngbDropdownToggle ngbDropdownMenu css class

Deploy to Firebase

• check firebase firebase --version

• Install firebase sudo npm i g firebase-tools

• Login firebase firebase login

• Init firebase in oshop folder firebase init

• Choose host project & choose previous created oshop project

• setup firebase.json

  {
    "hosting":{
        "public": "dist"
    }
  }

• build project for production ng build --prod

• Deploy to firebase firebase deploy

Authendication - Implement Google Login

• import auth lib

  import { AngularFireAuth } from 'angularfire2/auth';
  import * as firebase from 'firebase';
  
  constructor(private afAuth: AngularFireAuth) { 
  afAuth.authState.subscribe(user => this.user =  user);
  }
  
  login() {
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

• Using afAuth.authStatus to get user information

Using Asyn to unsubsricbe firebase