04.interaction-with-component.md

Interaction with Components

Data Binding

在 angular 中， data binding 是在寫一個 webapp 不可或缺的重要機制，不同於以往 pure JavaScript 在 HTML DOM & JavaScript 支間資料的傳遞操作，data binding 使得撰寫起來更快更方便。

picture from https://angular.io/guide/architecture#!#data-binding

上面這張是官方網站的介紹圖，總共有四種機制，前三種屬於 One-way data binding，第四種是 Two-way data binding

• interpolation

使用兩個大括號把 component 中的變數包起來，直接嵌入 HTML 中，DOM 就會顯示變數的值

• property binding

使用中括號將 DOM 元素的屬性包住，後面就可以接 component 中的變數

• event binding

如同 pure JavaScript 一般，同樣擁有事件的 binding

• Two-way data binding

當我們有一個 DOM 元素，需要接受 component 的資料，當有更新的時候也需要通知 component，我們可以利用上面的 One-way data binding 來達成想要的功能，但同樣的也可以使用更簡潔的 Two-way data binding

Next: 05 Http Module