深入研究 Angular - phoebe pan
Download as PPTX, PDF•1 like•977 views
本文讨论了 AngularJS 的设计理念、核心特性及其应用。AngularJS 是 Google 开发的前端 JavaScript 框架，支持单页面应用，具备双向数据绑定、模块化和指令等特性。文中还深入探讨了使用 AngularJS 开发 CRUD 应用的实用技巧及其优缺点。
![HTML 增強／表單
• a
– ng-href
• select
– ng-option
– ng-selected
– ng-multiple
• ng-open
（details/summary）
• img
– ng-src
– ng-srcset
• form
– ng-form （允許巢狀表單）
– ng-submit
• input
– ng-disabled
– ng-readonly
• input[email]
• input[number]
• input[text]
• input[url]
• input[checkbox] , input[radio]
– ng-checked
– ng-value](https://image.slidesharecdn.com/angular-phoebepan-150526144641-lva1-app6892/85/Angular-phoebe-pan-22-320.jpg)
深入研究 Angular - phoebe pan
- 2. 今天會講什麼？ • AngulsarJS 是什麼？ • 學習 AngularJS 的一些背景條件 • AngulsarJS 設計概念 • AngulsarJS 版本差異 • AngularJS 四大核心特性 • 實作開發快速入門 AngulsarJS • 實作 CRUD 基本網頁應用 • 結論
- 3. AngularJS 是什麼？ • Google 傾力打造的前端 javaScript 框架 • 透過 宣告式語法 (Directives Syntax) 擴展了 HTML，它不僅僅是一個 javaScript 框架，核心其實是對 HTML 標籤的增強 • AngularJS 對單頁面應用的支持非常好（SPA） • 不適合 - 只有單純頁面互動特效 • 適合 - CRUD 類型的網站專案 / 後台 例如: mail, 行事曆 • 讓應用類型網頁的開發/測試變的容易
- 4. 學習 AngularJS 的一些背景條件 • 必須要了解 – HTML、CSS、Javascript • 最好能懂 – 自動化測試 – 行為驅動開發 – 測試驅動開發 • 不是那麼重要的 – jQuery – Python – PHP – Database
- 5. AngularJS 設計概念 AngularJS 設計者的初衷是想看看是否有可能讓 Web 設計師（非開發者）只 使用 HTML 標籤來創建簡單的應用程序。隨著時間的推移，AngularJS 演變 成了一個全面的開發框架！ • 使用雙大括號{{}}語法進行數據綁定； • 使用 DOM 控制結構來實現迭代或者隱藏 DOM 片段； • 支持表單和表單的驗證； • 能將邏輯代碼關聯到相關的 DOM 元素上； • 能將 HTML 分組成可重用的組件。
- 6. AngulsarJS 版本差異 • 1.2 版本前 Demo#1.2 • 1.3 版(穩定版) Demo#1.3 – 不支援 IE8 – (ng-controller 用法改變！) 。先建立模組，之後在模組內才包含函式名稱。 • 2.0 (preview) – 語法不一樣，基本上可以當成不同的 Framework – 效能大大改善，Mobile 上效能期望可以跟原生 APP 媲美 – 引進 ES6 語法 – Components 元件概念 vs (React.js) – 完全改用 TypeScript 開發
- 7. AngularJS 四大核心特性 • MVW • 模組化 (Module) • Directive - 宣告式語法 • 雙向數據綁定
- 8. 四大核心特性 - MVW • Model • View • Whatever works for you (隨便拉...)
- 12. 四大核心特性 –模組化 (Module) • 模組用來描述應用如何啟動，一個應用可以包含多個模組，每個模組包含了 定義具體功能的代碼 • 基本語法：angular.module (模組名，依賴列表） • 其中，依賴列表是可以被注入到模塊中的對象列表
- 13. 四大核心特性 – Directive 宣告式語法 自定<hello>標籤
- 14. 四大核心特性 - 雙向數據綁定 • 目前大多數都是單向數據綁定: jQueryUI, BackBone, Flex • 視圖和數據模型是對應的。 • 視圖和數據雙向數據綁定實例
- 17. 實作開發快速入門 AngularJS • AngularJS 的指令 (Directive) • AngularJS 控制器 (controller) • AngularJS {{表達式}} • AngularJS 過濾器 | Filter • AngularJS model($scope) • AngularJS 表單 (form) • Angular.js 如何跟 API 溝通 • Angular.js 如何跟 API 溝通 ($resource)
- 18. AngularJS 的指令 (Directive) • 像 HTML tag • 定義作用或作用域 • 常用指令 – ng-app：定義一個 AngularJS 應用，被其包含的內容都屬於該應用。 – ng-init：初始化應用數據。 – ng-model：將數據綁定到當前應用。 – ng-bind: 將應用中定義的變量在該標籤中顯示
- 19. 自定義指令 • Demo#自定義指令 • 在 HTML 上附加一些自定標記，然後 AngularJS 的 HTML 編譯器 ($compile) 就會在對應元素上附加某些指定的行為．
- 20. 常用事件處理 • ng-blur • ng-focus • ng-copy • ng-paste • ng-cut • ng-change • ng-checked • Ng-click • ng-dbclick • ng-keydown • ng-keypress • ng-keyup • ng-mousedown • ng-mouseenter • ng-mouseleave • ng-mousemove • ng-mouseover • ng-mouseup
- 21. 外觀與樣式 • ng-show • ng-hide • ng-style • ng-class • ng-class-even • ng-class-odd
- 22. HTML 增強／表單 • a – ng-href • select – ng-option – ng-selected – ng-multiple • ng-open （details/summary） • img – ng-src – ng-srcset • form – ng-form （允許巢狀表單） – ng-submit • input – ng-disabled – ng-readonly • input[email] • input[number] • input[text] • input[url] • input[checkbox] , input[radio] – ng-checked – ng-value
- 23. 範本引擎 • ng-include src • ng-script • ng-if • ng-switch • ng-pluralize • ng-transclude • ng-csp 其它 AngularJS 的指令都是以 ng 開頭，AngularJS 的表達式用兩個大括 號表示: {{expression}} 這就是 AngularJS 最基本的數據綁定。
- 24. AngularJS 控制器 (controller) • AngularJS 控制器用來控制 AngularJS applications 的數據。 • ng-controller 用來聲明一個需要和數據進行綁定的模板區域，它的作用域 就是這個 div 之內的東西，在 js 代碼中定義了函數與它對應，在這個函數 內完成數據綁定。 • Demo#控制器
- 25. AngularJS {{表達式}} • AngularJS 表達式寫在雙大括號中：{{表達式語句}}。 • AngularJS 表達式綁定數據到 HTML 的方式與 ng-bind 指令的方式相同。 • AngularJS 會準確地將表達式“輸出”為計算的結果。 • AngularJS 表達式與 JavaScript 表達式有許多相似之處，它們都包含文 字、運算符和變量。 例如: {{ 1 + 2 }}和{{ firstName + " " + lastName }} • Demo#表達式 提示：如果你去掉 ng-app 指令，表達式會被直接顯示在頁面上而不 會被計算。
- 26. AngularJS 過濾器 | Filter • 負責格式化表達式(Expression)的值，以便呈現給用戶。 • 格式： {{表達式|過濾器:參數1:參數2:... }} • Demo#Filter
- 27. AngularJS model($scope) • View 跟 Controller 利用 Scope 做溝通 • $scope 是一個 Data Model • 一個 App 裡有很多的 scope， Scope 之間的關係就像
- 28. AngularJS 表單 (form) • 可以簡單的加上驗證 – Required – ng-minlength – ng-maxlength • Demo#表單驗證
- 29. AngularJS 如何跟 API 溝通 ($http) • $http.get • $http.head • $http.post • $http.put • $http.delete • $http.jsonp • $http.patch
- 30. AngularJS 如何跟 API 溝通 ($resource) • 需載入 resource.js • ( $resource ) 專為 RESTful Service 做溝通
- 31. 實作 CRUD 基本網頁應用 • bootstrap + angularJS • Demo
- 32. 結論 • AngularJS 優點 – 提供了更方便創建簡潔可維護單頁面應用的方式 – 數據綁定提供了使用者更豐富和響應式的體驗 – 支持單元測試 – 支持依賴注入 – 可重用的組件 – 更少代碼更豐富功能
- 33. 結論 • AngularJS 缺點 – SEO & debug – 安全性：作為純 JS 的框架，AngularJS 並不安全。服務器端的驗證和 授權必須使用保證應用安全 – 如果用戶禁用了 JS，則只能看到基礎頁面，功能都無用。 • 學習曲線較 jQuery 長 • jQuery 專案翻成 AngularJS 後，專案比較好維護 • AngularJS 在大型系統要小心效能問題 • 相依性注入 (Dependency Injection) 能方便切換模組
- 34. 補充資料 • 目前有使用 AngularJS 網頁應用 – Ｄcard
- 35. Reference • AngularJS 官網 • codeschool • AngularJS 快速入門 • AngularJS 入門簡介 • 前端工程的極致精品： AngularJS 開發框架介紹 • 關於 AngularJS 控制器 (ngController) 的多種宣告方法 • 關於 AngularJS 表達式與 ngBind 指令 (directive) 的使用技巧 • 深入理解AngularJS 的Scope • AngularJS 最佳實踐 • AngularJS 教學 - $resource service
Editor's Notes
- #4: 何為HTML標籤增強？其實就是使你能夠用標籤完成一部分頁面邏輯，具體方式就是通過自定義標籤、自定義屬性等，這些HTML原生沒有的標籤/屬性在ng中有一個名字：指令（directive）。後面會詳細介紹。
- #14: The restrict option: 'A' - only matches attribute name 'E' - only matches element name 'C' - only matches class name
- #21: 常用事件指令 ng-click http://jsbin.com/valulu/1/edit?html,js,output ng-show ng-hide ng-blur ng-change ng-focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseover
- #22: 常用事件指令 ng-click http://jsbin.com/valulu/1/edit?html,js,output ng-show ng-hide ng-blur ng-change ng-focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseover
- #23: 常用事件指令 ng-click http://jsbin.com/valulu/1/edit?html,js,output ng-show ng-hide ng-blur ng-change ng-focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseover
- #24: 常用事件指令 ng-click http://jsbin.com/valulu/1/edit?html,js,output ng-show ng-hide ng-blur ng-change ng-focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseover