Angular js twmvc#17
38 likes3,094 views
本文件介绍了使用Angular.js开发企业级应用程序的相关内容，包括其特性、开发流程、表单处理、依赖注入及自动化测试等。Angular.js作为一个开源JavaScript库，能够简化单页面应用程序的开发，提升代码维护性和可测试性。文中还提到了一些开发中的挑战及解决方案，强调了其良好的社区支持和兼容性。
Angular js twmvc#17
- 2. http://mvc.tw 講者介紹– 陳鋒逸（小風） 91mai就要買資深軟體工程師 JSDC 2013 講師 TechDay 2014 講師 IT邦幫忙鐵人賽優選 • 使用Jenkins打造.Net CI Server(2012) • 使用Asp.Net MVC打造Api(2013) 2
- 4. Angular.js 4 開源JavaScript函式庫，由Google維護 幫助我們快速開發，良好的支援測試 支援開發單一頁面應用程式（SPA） 良好的支援物件導向程式設計，讓程式碼耦合性降低 友善的支援JQuery
- 5. 使用JQuery製作表單
- 7. JQuery的特色 •直覺 •與DOM綁定深 •View修改，Code也要改 •程式碼較多 參考: http://jquery.com/
- 8. JQuery的特色 •直覺 •與DOM綁定深 •View修改，Code也要改 •程式碼較多 參考: http://jquery.com/
- 11. 使用Angular.js製作表單
- 12. 宣告式開發 •定義Controller •用Directive套用Library •繫結Model •互相連動 •View和Code分離 View Controller
- 13. 小結 套版快 分工明確 好維護 13
- 14. 14 更方便的開發方式
- 15. 工程師的困擾 •時間不夠 •需求吹又生 •功能不好用 •明天能好嗎？
- 16. 靈異現象?
- 20. 梭哈式開發法 •一個頁面，一隻程式！ •職責分離？ •物件導向？ •設計模式？
- 21. 四字真言 會動就好
- 24. 混亂的根源 • 缺少Coding Standard • 沒有統一的開發流程 • 每個人使用不同的寫法 • 程式碼零散不明確
- 25. 開發三步驟 Service Factory Provider Controller Config •決定角色 •撰寫劇本 •交給導演
- 26. 單向繫結 One Way Binding Model + Template View
- 27. 雙向繫結 Two Way Binding Model + Template View 追蹤更新
- 28. 把複雜的語法打包
- 29. 好找的程式碼
- 30. Demo • 廣告編輯器
- 31. 海報產生器 • 編輯同時預覽 • 不用JavaScript • 動態換廣告樣式
- 32. 快速完成表單 • 決定欄位 • 套上Directive • 收工！
- 33. 連動更新 • 修改就可以看到效果
- 34. 小結 內建角色 雙向繫結 化繁為簡
- 35. 35 提供良好的彈性
- 36. 可組合的設計(DI) 36
- 37. 什麼是相依性注入（DI）？ 線上購物 註冊為 內建超商清單DI
- 38. Angular.js如何實現DI • 判斷參數名稱 • 誰註冊為CVSService • 注入CVSService的實體
- 40. 將超商更換為全家 Family.js 向Angular註冊為CVSService 其他程式完全不用改!!
- 41. 專屬的HTML • 自己取名 • 容易讀懂
- 42. 抽換的彈性 •View和Code分離 •程式功能獨立 •耦合性低 •可切換
- 43. Demo • 切換資料來源
- 44. 商品展示頁 • 前後端並行
- 46. 開發時期 使用假資料 資料來源名稱 假資料
- 47. 正式環境 資料由Api取得 資料來源名稱 呼叫Api
- 48. 小結 DOM自己取名 功能可抽換 前後端並行 48
- 49. 49 強大的火力支援
- 50. 具備網頁開發常用的工具庫 jqLite – 基本的JQuery Selector $http – 進行XHRRequest $resource – 與Restful溝通 ngAnimate – 套用動畫效果 ngRoute – SPA應用程式的實現
- 52. 容易使用 可分頁的Grid
- 53. 容易使用 資料 + 繫結
- 54. 使用JQuery呼叫Restful API 讀取 新增 修改 刪除
- 55. 讓CRUD變簡單 透過$resource 將CRUD功能快 速實現
- 56. Demo • 使用WebApi建立Blog的Api • 快速實現CRUD
- 57. 小結 內建常用功能 許多現成套件 簡單易用 57
- 58. 58 輕鬆的表單驗證
- 59. http://mvc.tw 簡單的加上驗證 Required ng-minlength ng-maxlength ng-pattern 自訂驗證 required ng-minlength="5" ng-maxlength="30" 錯誤提示訊息
- 60. 可共用的驗證訊息 60
- 61. 可共用的驗證訊息 61 建立常用錯誤訊息樣版 error-messages.html
- 62. 自訂驗證 輸入值 回傳驗證是否成功 套上驗證
- 63. Demo • 套用表單驗證 • 共用錯誤提示樣版
- 64. 64 支援自動化測試
- 65. 我以為工作後測試軟體是…
- 66. 實際上測試軟體有點像……
- 67. 為什麼需要自動化測試？
- 68. 使用Protractor • 量身打造 • 模擬人類操作 • 支援多瀏覽器
- 70. 交給自動化測試 •Just One Click
- 71. Demo • 自動化測試
- 72. 小結 減少重複的動作 省下大量的時間 多瀏覽器支援 72
- 73. 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 t t 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.