摘要:[MAN鐵人賽]Day 06:AngularJS - Controller/Scope
A -> AngularJS - Controller/Scope
前言
是一篇我們知道了AngularJS是幹嘛的，這一章我們將從Controller與Scope來介紹AngualrJS的世界。
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的方式就可以指定變數內容過去做雙向設定
範例
這裡我們可以看到各Module的內部運作與在整體application的架構
各模組透過Controller 就可以指定到需要顯示或處裡的範圍，而這樣透過Controller顯示View的方式再加上View裡面的變數為物件導向的取出，這就是一個很容易理解的MVC運作模式。
這邊將上面的架構轉換成實際的程式碼即如下：
恩，從上面看來猴子的薪水果然比較低><
結語
從上面的說明與實際例子可以看到透過Controller與Scope的方式我們就可很簡單的分配與指定頁面上的程序與變數(就算指定一樣的變數名也不用害怕了)。但上面的例子很奇怪，大家有沒有發現哪邊有異狀呢？(不是程式面，猜對的有獎品歐～)Day-6 over!
