昨天我們知道了AngularJS是幹嘛的，這一章我們將從Controller與Scope來介紹AngualrJS的世界。
用MAN架構打造超人般的網頁應用程式系列文章
用MAN架構打造超人般的網頁應用程式系列文章

Binding

開始介紹Controller與Scope前我們要先介紹一下繫結，

一般來講資料地呈現可概分為三種：

• 單一讀取(One-Way Data Reading)

將值只顯示在指定的地方，值若有修改指定的地方不會有任何異動

• 單一繫結(One-Way Data Binding)

將值綁定到指定的地方，值若有修改指定的地方也會對應修改，但指定的地方修改不會修改到值的內容

• 雙向繫結(Two-Way Data Binding)

將值綁定到指定的地方，值若有修改指定的地方也會對應修改，而指定的地方修改也會修改到值的內容

這邊也直接放官方的解說圖：

Controller

這邊要介紹的ngController就是類似一個控制器的角色，負責指定要透過哪一個控制器來倒操作該區域物件，而使用方式只要宣告一個 function 就馬上可以用了，而且 function 裡面的參數還會經由 AngularJS 自動注入物件如 $scope、$http等，使用如下：

 <ANY ng-controller="{expression}">
...
</ANY>

其他ngController的宣考可以參考保哥的關於 AngularJS 控制器 (ngController) 的多種宣告方法

Scope

簡單來講Scope就是指定的變數，它可以是某一個物件的某個值，也可以直接設值

<input type="text" ng-model="someObj.prop1">

這邊透過ngModel的方式就可以指定變數內容過去做雙向設定

範例

from

這裡我們可以看到各Module的內部運作與在整體application的架構

各模組透過Controller 就可以指定到需要顯示或處裡的範圍，而這樣透過Controller顯示View的方式再加上View裡面的變數為物件導向的取出，這就是一個很容易理解的MVC運作模式。

這邊將上面的架構轉換成實際的程式碼即如下：

範例

恩，從上面看來猴子的薪水果然比較低><

結語

從上面的說明與實際例子可以看到透過Controller與Scope的方式我們就可很簡單的分配與指定頁面上的程序與變數(就算指定一樣的變數名也不用害怕了)。但上面的例子很奇怪，大家有沒有發現哪邊有異狀呢？(不是程式面，猜對的有獎品歐～)Day-6 over!