Angular 加法計算頁面簡單範例

本範例介紹如何使用Angular寫一個簡單的加法計算頁面。

首先使用Angular CLI建立一個angular專案。

在Angular CLI輸入ng generate component demo建立一個名Component元件名為DemoCompoment。

完成以上的src/app目錄結構如下：

src/app
│  app-routing.module.ts
│  app.component.css
│  app.component.html
│  app.component.spec.ts
│  app.component.ts
│  app.module.ts
│
└─demo
       demo.component.css
       demo.component.html
       demo.component.spec.ts
       demo.component.ts

把app.component.html內容修改如下。<app-demo></app-demo>即用來渲染DemoCompoment的位置。

app.component.html

<app-demo></app-demo>
<router-outlet></router-outlet>

因為要利用雙向繫結/雙向綁定(two-way binding)來接收<input>的輸入值，所以專案必須匯入FormsModule，所以打開app.modules.ts在@NgModule的imports陣列加入FormsModule。

AppModule (app.modules.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- 匯入FormsModule

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule // <-- 加上FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

打開demo.component.ts並在DemoComponent類別加入屬性x，y，result以及加法函式calculate()如下。

DemoComponent (demo.component.ts)

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  x = 0; // 接收<input [(ngModel)]="x"的輸入值
  y = 0; // 接收<input [(ngModel)]="y"的輸入值
  result = 0; // 在html template以插值符{{result}}顯示的結果值

  constructor() { }

  ngOnInit() {
  }

  /** 加法函式，計算 x + y */
  calculate() {
    this.result = this.x + this.y;
  }

}

把DemoCompoment元件的html template，也就是demo.component.html的內容修改如下。

demo.component.html

<input type="number" [(ngModel)]="x"/> + 
<input type="number" [(ngModel)]="y"/> = {{result}}
<button (click)=calculate()>Calculate</button>

完成後在Angular CLI輸入ng serve啟動專案結果如下，可以在輸入欄位會輸入數值並點擊Calculate按鈕計算相加結果。

參考：

• Angular 事件綁定(Event binding)簡單範例
• Angular 雙向綁定(two-way binding)簡單範例