 |
| 圖片為巨型麥哲倫望遠鏡 |
還記得第一篇寫的程式嗎？
＞提供貼心小連結：AngularJs 序章。改
這次我們把多餘的東西拔除，留下標題，讓我們來一步一步探索 AngualrJS 的奧妙吧！GO～
學習重點：
了解 AngularJS 的基本要素與各自的職責所在。
AngualrJS 的基本要素
先提供 Demo：
由這個 Demo 我們可以看到其中有幾個重點要素
在 MVC 架構中，Controller 用來綁定 View 與 Model 的重要控制器。（註1）
*註1：MVC 為 View、Model、Conroller 的縮寫。
使用方法：指定此部分要使用的 Controller：ng-controller = "demoCtrl"
ng-app
定義 AngularJS 可以作用的範圍，如果整個網站都使用 AngualrJS 做開發，一般來說使用於網頁的根元素，例如：HTML 或是 body 的 tag 中。但如果你想要在網頁部分使用 AngularJS，也可以利用此方式達到目的！
ng-controller
由於 AngularJS 是走 MVC 架構，ng-controller 就是一個控制器（Controller），用來綁定HTML（View）與 JavaScript（Model）。
*註1：MVC 為 View、Model、Conroller 的縮寫。
使用方法：指定此部分要使用的 Controller：ng-controller = "demoCtrl"
 |
| Hint：指定 Controller 與 function 的名稱需相同，AngularJS 才找的到對應的 Controller 來綁定喔！ |
在 AngularJS程式中都會出現 $scope，這是做什麼用的？
第一篇「AngularJS 序章。改」文章中有說過，AngularJS 是透過資料雙向綁定（Two-way Data Binding）來運作的，那麼這件事情的主角就是 $scope。所以 $scope 是一個模組（Model），作用於 View 與 Controller 之間，負責雙向資料綁定！
$scope 的構造：
最上層的 ng-app 有一個自己的 scope（稱為 $rootScope），而 ng-app 底下會有多個 ng-controller，然而每個 controller 也會有自己的 scope，各自不會互相影響。這樣講可能會有點抽象，我們直接看圖說故事：
因此，我們可以利用 scope 資料雙向綁定的特性，輕易的做到有彈性的網頁，只要在畫面上先綁好{{ AngualrJS 變數 }}，就可以在 JavaScript 中依照需求去改變。
重點複習
- AngularJS 的基本要素介紹
- ng-app
- ng-controller
- $scope
那麼，我們下次再見囉！