Google Code Prettify

2017年4月6日 星期四

第一支 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 設定為"登入成功",不同就設定為"帳誤錯誤",測試的話會如下圖所示:

  2. Component 是 angular 程式中最小的組成元素,後續會深入說明,也會陸續說明其它的元素及功能。
看完這第一支程式,應該可以感受到用 angular 寫前端程式,和以前的寫法大不相同,要學習的東西恐怕不少? 事實是這樣沒錯! angular 的學習曲線是陡峭的!




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

姓名生日結婚年離婚年結婚年齡
松雪泰子1972/11/281998200426
松嵨菜菜子1973/10/13200128
內田有紀1975/11/162002200527
松隆子1977/6/10200730
長谷川京子1978/7/22200830
竹內結子1980/4/12005200825
廣末涼子1980/7/182003200823
安達祐實1981/9/142005200924
真木陽子1982/10/152008201526
上戶彩1985/9/14201227
宮崎葵1985/11/302007201122
滿島光1985/11/302010201625
市川由衣1986/2/10201529
1986/4/14 201529
上野樹里1986/5/25201629
北川景子1986/8/22201629
木村文乃1987/10/19201629
佐佐木希1988/2/8201729
榮倉奈奈1988/2/12201628
黑木梅沙1988/5/28201224
堀北真希1988/10/6201527
  • 堀北真希於2017/2/28宣布引退,將以家庭為重。