AngularJS 學習筆記（一) - 概括與基本特色實做

有感於各種Framework的興起，而選定了一個具 MVC 概念的前端JS框架來學習，希望搭配其HTML擴充標籤（各種  ng- 屬性）的特性，還有其雙向資料鏈結（Two ways data-binding），來加速網站開發且讓HTML與JS邏輯透過其MVC架構來分割乾淨。

• AngularJS 框架定義與運作

From angularjs.org

AngularJS是一款開源 JavaScript函式庫，由Google維護，用來協助單一頁面應用程式運行，而根據 wiki 其目的在於透過MVC模式 (MVC) 功能增強基於瀏覽器的應用，使開發和測試變得更加容易。

引入AngularJS的library

透過引入其涵式庫取得其附加自定義的HTML標籤屬性（以 ng - 開頭），借由尊從這些自定義屬性，將頁面的輸入和輸出透過 Javascript variable 方式互相綁定，而這些JS變數可是使用者自行設置，或者從靜態、動態JSON資源獲得。

• AngularJS 擴充 HTML 

1. AngularJS藉由一系列的 ng-directive 擴充HTML

ng-app directive 定義其AngularJS application的範圍。

ng-model directive 將 HTML controls(input,select,textarea)的值連結（bind）為 application data。

ng-bind drective 將 ng-model 定義的 application data 連結（bind）到 HTML view。
ng-init directive 用來初始化 AngularJS application variables.

而 two-ways data binding 也就是下面的範例所呈現的方式，當我輸入值，同時會反映在HTML的view上，這就是 ng-model,ng-bing相互運作的結果。

2. AngularJS 的 expression 用法

與 ng-bing 功能，一樣顯示 ng-model 的另一種 Output Data 的方法。
Syntax's rule : {{ data }}.
Expression 是 AngularJS 的特色之一，因其除了 output data 之外，也可修飾、過濾資料。

結果顯示

3. 一支簡易的 todo List

• 參考

1. Wiki - AngularJS
2. W3School - AngularJS Tutorials
3. 前端工程的極致精品： AngularJS 開發框架介紹