建立 AngularJS 思考模式
「以資料架構來思考程式」如果把 JavaScript 比喻為「文字」,那麼 jQuery 就是「用字較為精簡的成語句子」,這樣的話 AngularJS 就是「七言絕句」。
所以用 AngularJS 撰寫時,以 JavaScript 為基礎,需要從「資料架構」來做思考的出發點。
讓我們從「目標」來著手練習
- 目標:做一個簡單的「Todo 列表」
Step1. 依照這個目標,我們可以把這個功能拆開
Step2. 所以,我們來列出所有要做的事情:
- 標題
- 會變動的副標題
- 會變動的部分給定「AngularJS 變數」
- 可調整的 Todo 列表
- 準備給列表使用的 Todo「資料」,AngularJS 自動產生列表畫面
- 刪除按鈕觸發
- 移除 Todo 列表「資料」,AngularJS 自動調整列表畫面
- 更新變動副標題
- 點擊 checkbox 時觸發
- 更新變動副標題
Final. 發現了嗎?
要做的部分都是跟「資料」相關,我們並不會直接碰到畫面上的 DOM 操作
以這個思考模式來設計程式,就是 AngularJS 的思考模式。
重點複習
- AngularJS 思考模式:「資料架構」
下集預告
下一集,介紹「AngularJS 基本要素」與「如何開始製作 Todo 列表」