2016年4月7日 星期四

肆・跟著老師動吃動

圖片為【自由發揮 - GYM】歌曲MV，截自0:54秒
經過上一篇的洗禮，我們要開始跟著老師動吃動（重點誤），利用「目標」來學習 AngularJS 的各種使用方法與特性。


學習目標

使用 AngularJS 製作自己的待辦清單！如下圖：



是不是覺得很眼熟呢？還記得第二篇時練習思考的題目嗎？

Step.1 事前準備

由上一篇文章我們可以知道，要撰寫 AngularJS 的程式，一定要先做的事情：
  1. 定義 ng-app 範圍
  2. 定義 ng-controller 範圍
  3. 準備好對應 ng-controller 使用的JavaScript 程式
若不清楚的人可以看上一篇的內容＞參・從望遠鏡探索 Angular 星系的奧秘
這邊已經幫各位準備好，請安心服用～一頂 iPad 溫開水（大誤）

Step.2 整理需求

準備好 AngualarJS 的程式後，我們依照需求細分出需要處理的部分如下：
  1. 標題
  2. 會變動的副標題
    1. 會變動的部分給定「AngularJS 變數」
  3. 可調整的 Todo 列表
    1. 準備給列表使用的 Todo「資料」，Angular 自動產生列表畫面
    2. 刪除按鈕觸發
      1. 移除 Todo 列表「資料」，Angular自動調整列表畫面
      2. 更新變動副標題
    3. 點擊 checkbox 時觸發
      1. 更新變動副標題
＊此部分也在第二篇有提到過唷！

Step.3 Let's do it！

整理完需求，那麼就開始動手做吧！

需求一、標題：

由於標題不會變動，我們可以直接視為一個 AngularJS 參數，由 JavaScript 中給標題內容。
or 另一種作法：
或是直接寫死（註1）在 HTML 中，但這樣就沒辦法透過 AngularJS 來控制標題所顯示的內容！
註1：「寫死」：是 Programer 之間的經常用語，如果這個東西被寫死，會沒辦法依照後續的需求來變動，所以寫程式要盡量避免「寫死」的情況。

需求二、會變動的副標題：

由於有副標題有三個部分會依照資料作變動，則我們可以把這三個部分，分別綁上 AngularJS 變數，變數的計算由給另一個方法（function）來計算並更新這些變數。


需求三、可調整的 Todo 列表：

我們先準備一份預設的資料，型別為物件陣列（註1），當作是已經輸入好的待辦事項列表資料（此部分也可以由資料庫或是後端送過來前端，但這邊只討論前端部分，故先直接在js中寫死）。
註1：物件陣列（object array），顧名思義是一個陣列（array），每一個陣列元素中放著有相同屬性（property）的物件（object）。

自動處理資料列表的神器「ng-repeat」
語法：ng-repeat = 'item in dataList'，把 dataList 這個陣列給 ng-repeat，讓它來幫你處理資料重複產生，屬性掛在要重複的 HTML 標籤中（此處的用法類似 foreach 的用法）。

做到目前為止，你的程式應該會長的類似像這樣：


同理，依照 ng-repeat 的特性，被包在 ng-repeat 標籤之間的 HTML 標籤，也可以掛上 ng-model 來透過 AngularJS 控制！

利用 ng-repeat 的特性 來達到「完成/刪除」事項
接下來，我們利用複選框（checkbox）與按鈕（button），並且修改 dataList 的資料，來達到「完成事項」與「刪除事項」的功能！


到目前為止，你的程式碼應該會長的像是這樣：


好像有點樣子了，還有什麼要做呢？
我們來整理一下還有什麼功能沒做：
  1. 刪除待辦事項方法（function）
  2. 計算副標題變數方法（function）

方法（function）是什麼？要怎麼寫呢？
AngularJS 定義變數（property）與方法（function）的方式很類似，如下圖


如果要在方法裡面帶參數（Parameter），要怎麼做呢？
 很簡單，只要在「呼叫」跟「執行」的地方加上要帶的參數即可！


現學現賣，利用方才所學製作「刪除待辦事項」與「計算副標題變數」方法
寫到這邊，打通任督二脈的人，你的程式應該會類似這樣：


補充說明大補帖

圖片為周星馳導演的【功夫】
可能有點跳太快了，還沒學會走就想飛肯定會摔跤的，讓我們回頭看一下重點在哪，還不懂的人看完，就能跟著我們一起練蓋世神功了。（誤

ng-click 點擊事件

在ng-repeat中的刪除按鈕掛上 ng-click = 'delete($index)，ng-click 是 AngularJS 中的點擊觸發事件，用來觸發在js中已經定義好的刪除方法（delete），而傳進去的參數 $index 是 AngularJS 在 ng-repeat 中提供可使用的表示式（註2），可以直接在 ng-repeat 中使用，回傳值為此筆資料的 index（註1），此處我們作為方法（function）的參數傳入方法使用（註3）。

註1：引數（index）：由於ng-repeat中是接收陣列（array）資料，在陣列當中，index 表示資料在陣列中的第「n」項，其中  n 就是 index。

註2：ng-repeat 中可使用的表示式（expression）如下


＊編輯於2016/04/29，感謝 soft&share forum-angularjs版 jacky的糾正！

註3：AngularJS 的方法帶參數（Parameter）進入方法中使用


陣列元素移除（splice）

刪除方法中使用 $scope.dataList.splice(index, 1)，使用到 JavaScript 的陣列操作（array operations），splice 可以透過陣列引數（index）移除陣列中的元素。


迴圈（angular.forEach）

在「計算副標題變數功能」中使用到 angular.forEach，這是 AngularJs 中定義的跑迴圈方法，透過 AngularJS 來處理跑迴圈的方法。

＊補充：forEach 方法也可以使用 JavaScript 原生的 array,forEach，但如果給 forEach 的資料為空（null）或是未定義（undefined），原生的 array.forEach 並不會丟錯誤訊息，而 angular.forEach 會幫你處理這件事情。

重點複習


  • 使用 AngularJS製作一份待辦清單
  • js中物件（object）與陣列（array）定義
  • 神奇的 ng-repeat
  • 定義 AngularJS 的方法（function）
  • AngularJS 的點擊事件 ng-click
  • JavaScript 中的陣列操作 splice
  • AngularJS 中的迴圈 angular.forEach
那麼，我們下次再見囉！

延伸閱讀

AngularJS function conponent - https://docs.angularjs.org/api/ng/function
張貼者： 於