2016年3月29日 星期二

從 AngularJS 思考模式起手


建立 AngularJS 思考模式

「以資料架構來思考程式」

如果把 JavaScript 比喻為「文字」,那麼 jQuery 就是「用字較為精簡的成語句子」,這樣的話 AngularJS 就是「七言絕句」。


所以用 AngularJS 撰寫時,以 JavaScript 為基礎,需要從「資料架構」來做思考的出發點。

讓我們從「目標」來著手練習

  • 目標:做一個簡單的「Todo 列表」

Step1. 依照這個目標,我們可以把這個功能拆開



Step2. 所以,我們來列出所有要做的事情:

  1. 標題
  2. 會變動的副標題
    1. 會變動的部分給定「AngularJS 變數
  3. 可調整的 Todo 列表
    1. 準備給列表使用的 Todo「資料」,AngularJS 自動產生列表畫面
    2. 刪除按鈕觸發
      1. 移除 Todo 列表「資料」,AngularJS 自動調整列表畫面
      2. 更新變動副標題
    3. 點擊 checkbox 時觸發
      1. 更新變動副標題

Final. 發現了嗎?

要做的部分都是跟「資料」相關,我們並不會直接碰到畫面上的 DOM 操作
以這個思考模式來設計程式,就是 AngularJS 的思考模式。

重點複習

  • AngularJS 思考模式:「資料架構」

下集預告

下一集,介紹「AngularJS 基本要素」與「如何開始製作 Todo 列表」

那麼,我們下次見囉!

資料來源