哈囉大家好!
接下來要完成的部分就是主頁和紀錄填寫的部分~
前端的UI使用了BootStrap來幫忙美化(雖然看起來還是很陽春XD)
目前的設計是使用者透過Google Account登入按鈕登入後,會引導使用者到紀錄主頁,
之後這個主頁會顯示所有使用者建立的紀錄,點擊單獨的紀錄可以查看每筆紀錄的詳細內容。
透過指令建立records component:
ng g component components/records
ng g component components/add-new-record
之後在app-routing.module.ts檔中配置對應的route:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RecordsComponent } from './components/records/records.component';
import { AddNewRecordComponent } from './components/add-new-record/add-new-record.component';
const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'records', component: RecordsComponent },
  { path: 'add-new-record', component: AddNewRecordComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
我有寫一個共用的navbar讓其他頁面共用,在records component中可以透過Add按鈕切換到新增頁面:
<app-navbar></app-navbar>
<button type="button" class="btn btn-info" (click)="addNewRecord()">Add</button>
對應ts檔中,在constructor裡面注入Router服務來進行route切換:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-records',
  templateUrl: './records.component.html',
  styleUrl: './records.component.css',
})
export class RecordsComponent {
  constructor(private route: Router) {}
  addNewRecord() {
    this.route.navigate(['/add-new-record']);
  }
}
接著來設計新增紀錄的頁面:
<app-navbar></app-navbar>
<form class="mx-auto p-2">
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label"
      >Person who should pay🥹</label>
    <input
      type="text"
      class="form-control"
      id="itemTitle"
      aria-describedby="titleOfItem"
      placeholder="Enter title of item..."
    />
    <input
      type="text"
      class="form-control"
      id="price"
      aria-describedby="price"
      placeholder="Enter price of item..."
    />
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Person who paid😎</label>
    <input
      type="text"
      class="form-control"
      id="personWhoPaid"
      placeholder="Enter name here!"
    />
    <input
      type="text"
      class="form-control"
      id="paidPrice"
      placeholder="Enter how much u paid in total"
    />
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
目前先完成了最簡單的UI部分XD 明天要趁放假來趕一下進度了~
祝大家都能度過一個愉快的假期