在鐵人賽的第五天總算要進入MAN架構的主軸之一-AngularJS
這篇將介紹一下AngularJS的內容跟架構，開始帶大家進入前端MVC的世界
用MAN架構打造超人般的網頁應用程式系列文章
用MAN架構打造超人般的網頁應用程式系列文章

AngularJS Intro

AngularJS 是一個由 Google所推出的 Client 端的JavaScript Framework框架，它直接延伸了現有的 HTML 架構，並且透過宣告式語法 (Directives) 直接拓展了 HTML 能力，將許多 AngularJS的 HTML 屬性很直覺的融入 HTML 之中，且透過雙向資料繫結 (Two Way Binding)的方式來讓我們用更少的程式來達到頁面呈現內容的修改或值的取得。

AngularJS 的框架屬於 MVC 設計模式，也將 控制器(Controller)與檢視(Views) 間切割的非常乾淨，而它所強調著「低耦合」以及「關注點分離」等特性也在讓我們能夠在邏輯上切得更加清楚，並且針對有需要的地方做最小幅度的修改。

相較於已經習慣jQuery 的人來說，從操控 DOM 物件來解決你的問題，轉換到 AngularJS 的習慣用 MVC 或 資料繫結的開發方式來對 DOM 進行操作是兩個截然不同的解決辦法，而在AngualrJS本身就有搭載一個jQuery lite的版本，如果你要使用jQuery或是將他換成最新版都可以，但如果你已經決定使用AngualrJS做你開發的主體了，那我會建議你盡量讓jQuery幫你解決視覺的問題就好，這樣比較可以切清楚MVC的架構，避免最後做出了一個四不像的架構。

完整的AnguarJS文件請參考，如果想更加瞭解AngualrJS建議兩篇文章可以參考一下

• 保哥：前端工程的極致精品： AngularJS 開發框架介紹
• Jason:[AngularJS] 我的前端 AngularJS 初體驗

AngularJS Architecture

AngularJS 火力展示

透過上面的架構我們大致上可以知道AngualrJS的運作方式，這邊直接做一個範例讓大家感受它的威力

線上實作範例

是不是很方便就可以透過two binding的方式取得資料做運算呢～！

這邊先引用 angular.js，接著在 body 標籤中加入 ng-app 的屬性，這樣當 angular.js 載入後自然會知道那個區塊是它要處理的範圍。

輸入方塊中加入一個 ng-model 屬性，並指定屬性值的名稱。這邊的屬性值你可以先把它當成是變數。在透過Angular 表達式(Angular Expressions)，語法為{{ expression }}，其中的 expression 就可以放入像是 ng-model 的屬性值(變數)，這邊也可以算最後我們放上公式或function都可預作，以上就一個AngularJS的運作案例。

結語

透過說明認識了AngularJS簡單的使用方式就可以大大改變我們前端原本複雜與冗長的寫法，而火力展示更是讓大家知道其實Single Page Application也不只是一把手槍而已，有可能可以成為網頁上的核子彈呢，Day-5 over!