Angular Start
===

## 建立新的專案

ng new mystore

## 得到專案初始化結構

請到以下GITHUB空間下載檔案

https://github.com/lala-lee-jobs/mystore

下載後 覆蓋原本 index.html、style.scss、app.component.html 的內容

然後使用 ```ng serve``` 啟動 http://localhost:4200/


## 拆分元件、ngFor、ngIf、Data Bindng

* 把 .app-top-bar 區塊 抽離成 元件

https://github.com/lala-lee-jobs/mystore/commit/54a34a572dbc2ec7752c6df0dc0a672a699f9021

* 把 product 區塊 抽離成元件

https://github.com/lala-lee-jobs/mystore/commit/b662a916d26293263da6fb4d0f79b9a24c08c74a

* 增加 products 陣列 到 app-product-list 元件

https://github.com/lala-lee-jobs/mystore/commit/95d4cb0de049445ad1cc7f3f1338767691c9e914

* 使用 ngFor 顯示商品清單-列出商品名稱

https://github.com/lala-lee-jobs/mystore/commit/4d30a9375ca187147b3fb1c7cb19d0fafe063204


* 新增一個a元素，並使用屬性繫結語法，把該連結的title設定成該商品的名字

https://html.com/attributes/a-title/

https://github.com/lala-lee-jobs/mystore/commit/cabd9d75b910c5e5642da927c02a8100291d0e36


* 新增商品說明。在 p 標籤上，使用 `*ngIf` 指令，顯示商品描述資訊。

https://github.com/lala-lee-jobs/mystore/commit/7bb25ead6fca95c509dc9b91a735e21911fc336a


* 新增一個Share按鈕，使用click事件繫結到程式碼的share方法

https://github.com/lala-lee-jobs/mystore/commit/c4874bea53e00727662a232c9a639b36e9264947


> 在這個過程中，你已經學會了 Angular 範本語法的五個常用特性：
> *ngFor
> *ngIf
> 插值 {{}}
> 屬性繫結 []
> 事件繫結 ()

## @Input

* 建立一個 product-alert 元件，使用 @Input 輸入 product 的值，當價格高於 700 元時會出現 Notify Me Button

https://github.com/lala-lee-jobs/mystore/commit/db796d05f0eeed18d575a5649b5c8d4cc6774817


## @Output

* 當按下Notify Me按鈕時，把 product-alert 元件的 click 事件繫結到商品列表元件的 onNotify() 方法

https://github.com/lala-lee-jobs/mystore/commit/d9b651401e95bcb7a1f192ce8cd12a56bd1a84fd