[AngularJS] ch01:Introduction to AngularJS 讀書筆記

書目資訊
* ch01 : Introduction to AngularJS
* 網址：AngularJS
[更新，文章有些error，可搭配errata觀看。]

說到 angularJS，身邊的朋友都已經 an 很久了，我現在正起步...，打算把英文原書慢慢看過，不想急著看...，到底會不會看完我也不能保證 :P。第一章內容還算客氣了，至少我還看得懂70%，而且只有 9 頁。可是講的觀念也夠多了。
希望大家能夠自己去發掘書中的內容跟表達的意思，畢竟這只是我的個人筆記（不是教學哦...只是筆記...），如果有錯誤就請糾正我唄！

第一章主要分成幾個部分

• Concepts 概念 
• MVC Pattern MVC架構
• Data Binding  資料綁定
• Dependency Injection(DI) 相依性注入
• HTML Directives HTML的 (Attritube) 的擴充
• 還有一個範例(Shopping Cart)

Concepts 概念

• AngularJS 可以說是一個具有 MVC 架構的 Framework。
• AngularJS 神奇的地方之處：

• 可以不用透過 HTML 的 id 或是 class 去附加任何的事件。
• 可以不用註冊事件也可以不用寫 callback。
• 使用的觀念跟過去所學的 jQuery 不太一樣，以前 jQuery 所學的觀念都是從抓到 DOM 的觀念開始...，而 Angular 給我的感覺是縱觀整個 Web Application，以及資料的部分，不單單只有 DOM selector / 事件綁定等等。
• Client-side Template 的觀念，個人覺得這裡要講的事情其實跟後面的 Data Binding 很像。

MVC架構

前面講到 MVC 最核心的精神就是 資料/試圖/控制器 ，分別處理資料 ( Model ); 頁面的邏輯 ( Controller ); 以及視圖 ( view )。

當要處理資料面時，controller 就會出來幫忙，做些回應，再跟 view 說，決定最後呈現給user的資料跟畫面。這樣子的 MVC 架構其實挺熟悉的，讓我想到 PHP Framework 像是 Codeigniter, Yii 好像也是差不多這樣子的運作方式。

然而，AngularJS 的 MVC 是這樣運作的：

對 AngularJS來說，View 的部分，就是指整個 DOM;

Controller 部分，指的是 JavaScript 的 Classes;

Model 部分，指的是 Object 的內容，key 跟 value 的對應。

圖片請看 docs.angularjs.org ：

http://docs.angularjs.org/guide/dev_guide.mvc.understanding_view

Data Binging 資料綁定
這個部分提到的事情還蠻妙的，想到過去 web 對於處理 HTML 顯示的部分，通常會是組字串的方式，不過我記得很久以前已經有一些 template engine 可以做到不用組字串的事情。

不過這也不重要了，在 AngularJS，將某個 UI（DOM） 綁在某個定義好的 JavaScript 屬性，就可以非同步的更新該 DOM 的內容，算了這裡有點難講，當我沒說好了...。

Angular 結合了 HTML template 的觀念，將結果組塞回去到該 HTML element，這也是他的特色之一，這種做法可以讓你的前端語言變個更純粹/乾淨。

Dependency Injection(DI) 相依性注入

參考網址：
http://docs.angularjs.org/guide/di
這個聽起來很抽象...

頁面上的 data binding 是透過 $scope 這個物件，來達到自動更新畫面的資料。

我們不用透過任何 function 去呼叫他，但有個唯一的要求是你一定要把 $scope 加到該
Constructor。但是，除了 $scope 之外，還有其他的，後面章節會介紹到。

Angular 的 dependency injection system，符合 Law of Demeter (低藕合) 的設計。

HTML Directives HTML的 (Attribute) 的擴充

使用 AngularJS 時你會在 HTML 元素加入很多他專屬的屬性 (Attribute)，像是 ng- 為首的 Attribute。

Directives 是一個可以讓你擴充 html attribute 屬性及功能的特性。

Angular 已經有很多現成的 Attribute 可以使用，讓你定義你的 view 該如何呈現，但是這些 Attribute 不一定是 HTML spec 有的。

你也可以自己擴充 HTML template 的功能，做你想做的事。

最後的部分是個簡單的練習，有興趣可以翻書來看:P

• ng-app 宣告 angular 可以控管的範圍。
• ng-controller 設定某個 controller 可以控制的範圍 (資料綁定...等等)。
• ng-repeat 在 ng-repeat 裡面的 Dom 會依資料的數量而重複呈現。
• {{item.title}} 透過{{ }}，angular 可以知道這裡要擺什麼資料，而且keep it in sync。
• <input ng-model="item.quatity"> ng-model 綁定輸入跟呈現的值。
• {{item.price | currency}}  這個 | (pipeline) 是做什麼的，後面章節應該會講到。