iT邦幫忙

DAY 4
4

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列 第 4

[6]用MAN架構打造超人般的網頁應用程式:AngularJS - Controller/Scope

昨天我們知道了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!


上一篇
[5]用MAN架構打造超人般的網頁應用程式:AngularJS - Intro & Architecture
下一篇
[7]用MAN架構打造超人般的網頁應用程式:AngularJS - Routing
系列文
用MAN架構打造超人般的網頁應用程式:復仇者聯盟7

尚未有邦友留言

立即登入留言