Download as PDF, PPTX
Uploaded bytwMVC
Angular js twmvc#17
本文件介绍了使用Angular.js开发企业级应用程序的相关内容，包括其特性、开发流程、表单处理、依赖注入及自动化测试等。Angular.js作为一个开源JavaScript库，能够简化单页面应用程序的开发，提升代码维护性和可测试性。文中还提到了一些开发中的挑战及解决方案，强调了其良好的社区支持和兼容性。
Angular js twmvc#17
- 1.
- 2. http://mvc.tw 講者介紹– 陳鋒逸（小風） 91mai就要買資深軟體工程師 JSDC 2013 講師 TechDay 2014 講師 IT邦幫忙鐵人賽優選 • 使用Jenkins打造.Net CI Server(2012) • 使用Asp.Net MVC打造Api(2013) 2
- 3.
- 4. Angular.js 4 開源JavaScript函式庫，由Google維護 幫助我們快速開發，良好的支援測試 支援開發單一頁面應用程式（SPA） 良好的支援物件導向程式設計，讓程式碼耦合性降低 友善的支援JQuery
- 5.
- 6.
- 7. JQuery的特色 •直覺 •與DOM綁定深 •View修改，Code也要改 •程式碼較多 參考: http://jquery.com/
- 8. JQuery的特色 •直覺 •與DOM綁定深 •View修改，Code也要改 •程式碼較多 參考: http://jquery.com/
- 9.
- 10.
- 11.
- 12. 宣告式開發 •定義Controller •用Directive套用Library •繫結Model •互相連動 •View和Code分離 View Controller
- 13. 小結 套版快 分工明確 好維護 13
- 14.
- 15. 工程師的困擾 •時間不夠 •需求吹又生 •功能不好用 •明天能好嗎？
- 16.
- 17.
- 18.
- 19.
- 20. 梭哈式開發法 •一個頁面，一隻程式！ •職責分離？ •物件導向？ •設計模式？
- 21.
- 22.
- 23.
- 24. 混亂的根源 • 缺少CodingStandard • 沒有統一的開發流程 • 每個人使用不同的寫法 • 程式碼零散不明確
- 25. 開發三步驟 Service Factory Provider Controller Config •決定角色 •撰寫劇本 •交給導演
- 26. 單向繫結 One WayBinding Model + Template View
- 27. 雙向繫結 Two WayBinding Model + Template View 追蹤更新
- 28.
- 29.
- 30.
- 31. 海報產生器 • 編輯同時預覽 • 不用JavaScript • 動態換廣告樣式
- 32. 快速完成表單 • 決定欄位 • 套上Directive • 收工！
- 33.
- 34. 小結 內建角色 雙向繫結 化繁為簡
- 35.
- 36.
- 37. 什麼是相依性注入（DI）？ 線上購物 註冊為 內建超商清單DI
- 38. Angular.js如何實現DI • 判斷參數名稱 • 誰註冊為CVSService • 注入CVSService的實體
- 39.
- 40. 將超商更換為全家 Family.js 向Angular註冊為CVSService 其他程式完全不用改!!
- 41. 專屬的HTML • 自己取名 • 容易讀懂
- 42. 抽換的彈性 •View和Code分離 •程式功能獨立 •耦合性低 •可切換
- 43.
- 44.
- 45.
- 46. 開發時期 使用假資料 資料來源名稱 假資料
- 47. 正式環境 資料由Api取得 資料來源名稱 呼叫Api
- 48. 小結 DOM自己取名 功能可抽換 前後端並行 48
- 49.
- 50. 具備網頁開發常用的工具庫 jqLite –基本的JQuery Selector $http – 進行XHRRequest $resource – 與Restful溝通 ngAnimate – 套用動畫效果 ngRoute – SPA應用程式的實現
- 51.
- 52.
- 53. 容易使用 資料 + 繫結
- 54. 使用JQuery呼叫Restful API 讀取 新增 修改 刪除
- 55.
- 56. Demo • 使用WebApi建立Blog的Api • 快速實現CRUD
- 57. 小結 內建常用功能 許多現成套件 簡單易用 57
- 58.
- 59. http://mvc.tw 簡單的加上驗證 Required ng-minlength ng-maxlength ng-pattern 自訂驗證 required ng-minlength="5" ng-maxlength="30" 錯誤提示訊息
- 60.
- 61. 可共用的驗證訊息 61 建立常用錯誤訊息樣版 error-messages.html
- 62. 自訂驗證 輸入值 回傳驗證是否成功 套上驗證
- 63. Demo • 套用表單驗證 • 共用錯誤提示樣版
- 64.
- 65.
- 66.
- 67.
- 68. 使用Protractor • 量身打造 • 模擬人類操作 • 支援多瀏覽器
- 69.
- 70. 交給自動化測試 •Just OneClick
- 71.
- 72. 小結 減少重複的動作 省下大量的時間 多瀏覽器支援 72
- 73.
- 74. 選擇Angular.js的理由 關注點分離（SoC） 架構設計良好（SOLID） 程式碼好維護 社群活動踴躍 相容性極佳 74
- 75. 工商服務 75 公司介紹 http://goo.gl/6P7FmV 工作機會 http://goo.gl/sp9JPj • APP開店平台 • PC、Mobile Web、IOS、Android一次搞定 • 誠徵 • F2E • .Net Developer (Asp.Net Mvc) • Ohters
- 76. http://mvc.tw 好活動需要支持 感謝KKTIX贊助twMVC 活動報名平台 76
- 77. http://mvc.tw 好輸入法需要露出 77 http://skilltree.my/Sponsor/xin_zi_ran
- 78. http://mvc.tw 好課程需要支持 78 http://skilltree.my
- 79. 謝謝各位 h tt p : / / m v c . t w • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用姓名標示-非商業性-相同方式分享3.0 台灣授權。閱讀本授權條款，請到 http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.