第一支 Angular 程式

上一篇「看見 Angular 的車尾燈」已經把開發環境搞定，這一篇要用它來寫一個簡單的程式，略微感受一下什麼是 Angular 程式。

程式很簡單，一開始的畫面會如下，輸入帳號、密碼後按【登入】，會出現成功或失敗的訊息。

為了不寫太多程式，這裡將直接修改之前建立專案時自動產生的範例程式。

• app.component.html

第一步先寫個 html 畫面，讓它可以產生如上面所示的畫面，修改 app.component.html如下:

<input type="text" [(ngModel)]="username" placeholder="UserName" />
<input type="password" [(ngModel)]="password" placeholder="Password" />
<input type="button" value="登入" (click)="clicked()" />
<span>{{message}}</span>

1. [(ngModel)] 是 angular 雙向資料綁定 (data binding) 的指令，為什麼有中括號又有小括號? 實際上在 angular 中 [] 中括號是將屬性值由 model 傳向 view，() 小括號用來表示事件，會將值由 view 傳向 model，當兩個都用就變成 two way data-binding。
2. {{message}} 這就是單向的資料綁定，將值由 model 傳向 view。
3. (click) 的 () 小括是事件的表示法，中間寫的就是事件的名稱，所以當使用者 click button 時，就會呼叫 clicked() function。
4. 資料綁定的方式，詳細如下:

• app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    username: string;
    password: string;
    message: string = '';
      
    clicked(event) {
        if (this.username === 'steven' && this.password === 'pass1234') {
            this.message = '登入成功';
        }
        else {
            this.message = '帳密錯誤';
        }
    }
}

1. 在 html 中的 (click)="clicked()" 指定了發生 click event 時要呼叫的 clicked() 就是紅色粗體字的這個 function，這裡把帳密寫死了，相同就把 message 設定為"登入成功"，不同就設定為"帳誤錯誤"，測試的話會如下圖所示:



Component 是 angular 程式中最小的組成元素，後續會深入說明，也會陸續說明其它的元素及功能。

看完這第一支程式，應該可以感受到用 angular 寫前端程式，和以前的寫法大不相同，要學習的東西恐怕不少? 事實是這樣沒錯! angular 的學習曲線是陡峭的!




【日本女星的結婚年齡】
最近佐佐木希宣佈婚訊，很多粉絲要心碎了，日本女星比起台灣的女人來，早婚的多，這裡整理一些目前仍活躍在螢光幕前，且在30歲前就結婚的名單。

姓名	生日	結婚年	離婚年	結婚年齡
松雪泰子	1972/11/28	1998	2004	26
松嵨菜菜子	1973/10/13	2001		28
內田有紀	1975/11/16	2002	2005	27
松隆子	1977/6/10	2007		30
長谷川京子	1978/7/22	2008		30
竹內結子	1980/4/1	2005	2008	25
廣末涼子	1980/7/18	2003	2008	23
安達祐實	1981/9/14	2005	2009	24
真木陽子	1982/10/15	2008	2015	26
上戶彩	1985/9/14	2012		27
宮崎葵	1985/11/30	2007	2011	22
滿島光	1985/11/30	2010	2016	25
市川由衣	1986/2/10	2015		29
杏	1986/4/14	2015		29
上野樹里	1986/5/25	2016		29
北川景子	1986/8/22	2016		29
木村文乃	1987/10/19	2016		29
佐佐木希	1988/2/8	2017		29
榮倉奈奈	1988/2/12	2016		28
黑木梅沙	1988/5/28	2012		24
堀北真希	1988/10/6	2015		27

• 堀北真希於2017/2/28宣布引退，將以家庭為重。