AngularJS 開發實戰 : 新手入門 - 課後感想

今天課程多以程式範例 (Coding)、實作來介紹 AngularJS.

保哥利用許多的練習題及循序漸進的教學方式,


讓學員更了解 AngularJS 的基礎、特性、...等.

像是有個很重要的觀念保哥有提到 :

• jQuery 是以 DOM 為基礎的操作模式, AngularJS 以物件模型為基礎的操作模式, 由 jQuery 跳脫至 AngularJS 需要花些時間去學習. 因為兩者所關注的點是不一樣的.

接觸了 AngularJS 就能夠簡單的將前端網頁的邏輯部分與顯示部分拆開實作了.

也因為 AngularJS 關注點分離的特性能夠讓開發人員只需要關注到自己需要關注的點上.

而不用浪費其他多餘的心力去思考其他事情.

還是老話一句,

並不是學了 AngularJS 或是 AngularJS 是個非常強大好用的框架就把所有開發都套用此框架...

必須符合「需求情境」, 「沒有最好但是有更適合」

這次練習範例的所有代碼全部都在 JSBin 上.

1. 建立 ng-app 應用程式，完成一次 ng-model 套用
2. 套用商品單價與購買數量，並顯示購買摘要資訊在頁面上。透過 ng-init 寫入 model 的預設值
3. 套用 filter 在所有數字類型的欄位上
4. 套用 ng-controller 並將預設值的設定都寫入 Controller
5. 實作購買超過九件自動打九折的功能
6. 加上｢加入購物車｣按鈕，並準備好一份擁有假資料的 $scope.carts Model
7. 加入「啟用偵錯」勾選項目，可切換是否顯示 carts 的 JSON 資料 ( ng-if , ng-show )
8. 實作「加入購物車」按鈕的 ng-click 事件，並且將輸入的資料加入到 $scope.carts Model 中
9. 實作購物車清單，透過 ng-repeat 輸出陣列資料到頁面表格上
10. 實作刪除購物車項目功能
11. 實作購物車清單加總金額功能
12. 實作批次刪除功能 & 實作勾選項目全選功能
13. 實作編輯購物車項目購買數量功能 ( 要有編輯與完成按鈕 )
14. 將各欄位加上排序功能
15. 在購物車清單中加上滑鼠光棒功能 & 在購物車清單中加上關鍵字搜尋功能
16. 完成【文章類別查詢】的 API 介接，取得資料並顯示在表格上
17. 請實作 Undo 與 Redo 功能 (無限次數)