angular js twmvc#17
DESCRIPTION
使用Angular.js開發大型系統架構 講者:小風 講者簡介: 課程簡介:如何使用Angular.js的特性讓程式碼更好維護。輕鬆打造行動版網頁,實現SPA(Single Page Application)。 完整的JavaScript程式碼測試解決方案。這次的主題將向大家介紹如何使用Angular.js開發大型網站架構, 並且讓程式碼兼具可維護性,提供一個高品質的前端Javascript解決方案。 課程時間:70 分鐘TRANSCRIPT
![Page 1: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/1.jpg)
使用Angular.js開發企業級應用程式
陳小風
![Page 2: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/2.jpg)
http://mvc.tw
91mai就要買資深軟體工程師
JSDC 2013 講師
TechDay 2014 講師
IT邦幫忙鐵人賽優選
• 使用Jenkins打造.Net CI Server(2012)
• 使用Asp.Net MVC打造Api(2013)
講者介紹 – 陳鋒逸(小風)
2
![Page 3: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/3.jpg)
3
什麼是Angular.js?
![Page 4: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/4.jpg)
Angular.js
4
開源 JavaScript函式庫,由Google維護
幫助我們快速開發,良好的支援測試
支援開發單一頁面應用程式(SPA)
良好的支援物件導向程式設計,讓程式碼耦合性降低
友善的支援JQuery
![Page 5: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/5.jpg)
使用JQuery製作表單
![Page 6: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/6.jpg)
使用JQuery製作表單
6
![Page 7: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/7.jpg)
JQuery的特色
•直覺
•與DOM綁定深
•View修改,Code也要改
•程式碼較多
參考: http://jquery.com/
![Page 8: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/8.jpg)
JQuery的特色
•直覺
•與DOM綁定深
•View修改,Code也要改
•程式碼較多
參考: http://jquery.com/
![Page 9: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/9.jpg)
使用Angular.js製作表單
Model
![Page 10: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/10.jpg)
使用Angular.js製作表單
Action
![Page 11: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/11.jpg)
使用Angular.js製作表單
![Page 12: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/12.jpg)
宣告式開發
•定義Controller
•用Directive套用Library
•繫結Model
•互相連動
•View和Code分離
View Controller
![Page 13: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/13.jpg)
套版快
分工明確
好維護
小結
13
![Page 14: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/14.jpg)
14
更方便的開發方式
![Page 15: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/15.jpg)
工程師的困擾
•時間不夠
•需求吹又生
•功能不好用
•明天能好嗎?
![Page 16: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/16.jpg)
靈異現象?
![Page 17: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/17.jpg)
但是Plug In越用越多…
Setting會是什麼?
![Page 18: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/18.jpg)
https://farm4.staticflickr.com/3099/2610267740_c718f6a644_o.jpg
![Page 19: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/19.jpg)
到處都是Callback
我…在第幾層?
折扣=>運費=>分期
![Page 20: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/20.jpg)
梭哈式開發法
•一個頁面,一隻程式!
•職責分離?
•物件導向?
•設計模式?
![Page 21: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/21.jpg)
四字真言
會 動 就 好
![Page 22: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/22.jpg)
22http://photo.l99.com/bigger/11/1341838228447_n3ex30.jpg
![Page 23: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/23.jpg)
http://pic.pimg.tw/z642319240/1383384010-3293348412_n.jpg
![Page 24: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/24.jpg)
• 缺少Coding Standard
• 沒有統一的開發流程
• 每個人使用不同的寫法
• 程式碼零散不明確
混亂的根源
![Page 25: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/25.jpg)
開發三步驟
Service
Factory
ConfigController
Provider
•決定角色
•撰寫劇本
•交給導演
![Page 26: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/26.jpg)
單向繫結
Model Template+
View
One Way Binding
![Page 27: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/27.jpg)
雙向繫結
Model Template+
View
Two Way Binding
追蹤更新
![Page 28: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/28.jpg)
把複雜的語法打包
![Page 29: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/29.jpg)
好找的程式碼
![Page 30: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/30.jpg)
• 廣告編輯器
Demo
![Page 31: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/31.jpg)
• 編輯同時預覽
• 不用JavaScript
• 動態換廣告樣式
海報產生器
![Page 32: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/32.jpg)
• 決定欄位
• 套上Directive
• 收工!
快速完成表單
![Page 33: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/33.jpg)
• 修改就可以看到效果
連動更新
![Page 34: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/34.jpg)
內建角色
雙向繫結
化繁為簡
小結
![Page 35: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/35.jpg)
35
提供良好的彈性
![Page 36: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/36.jpg)
可組合的設計 (DI)
36
![Page 37: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/37.jpg)
什麼是相依性注入(DI)?
線上購物
註冊為
超商清單內建DI
![Page 38: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/38.jpg)
Angular.js如何實現DI
•判斷參數名稱
•誰註冊為CVSService
•注入CVSService的實體
![Page 39: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/39.jpg)
使用7-11做為超商
SevenEleven.js
向Angular註冊為CVSService
![Page 40: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/40.jpg)
將超商更換為全家
Family.js
向Angular註冊為CVSService
其他程式完全不用改!!
![Page 41: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/41.jpg)
專屬的HTML
•自己取名
•容易讀懂
![Page 42: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/42.jpg)
抽換的彈性
•View和Code分離
•程式功能獨立
•耦合性低
•可切換
![Page 43: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/43.jpg)
• 切換資料來源
Demo
![Page 44: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/44.jpg)
• 前後端並行
商品展示頁
![Page 45: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/45.jpg)
根據環境切換
資料來源名稱
取得資料
![Page 46: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/46.jpg)
使用假資料
開發時期
資料來源名稱
假資料
![Page 47: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/47.jpg)
資料由Api取得
正式環境
資料來源名稱
呼叫Api
![Page 48: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/48.jpg)
DOM自己取名
功能可抽換
前後端並行
小結
48
![Page 49: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/49.jpg)
49
強大的火力支援
![Page 50: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/50.jpg)
具備網頁開發常用的工具庫
jqLite – 基本的JQuery Selector
$http –進行XHRRequest
$resource –與Restful溝通
ngAnimate –套用動畫效果
ngRoute – SPA應用程式的實現
![Page 51: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/51.jpg)
好用Library支援
Angular-Kendo
![Page 52: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/52.jpg)
容易使用
可分頁的Grid
![Page 53: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/53.jpg)
容易使用
資料
繫結
+
![Page 54: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/54.jpg)
使用JQuery呼叫Restful API
讀取
新增
修改
刪除
![Page 55: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/55.jpg)
讓CRUD變簡單
透過$resource將CRUD功能快速實現
![Page 56: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/56.jpg)
• 使用WebApi建立Blog的Api
• 快速實現CRUD
Demo
![Page 57: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/57.jpg)
內建常用功能
許多現成套件
簡單易用
小結
57
![Page 58: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/58.jpg)
58
輕鬆的表單驗證
![Page 59: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/59.jpg)
http://mvc.tw
簡單的加上驗證
Required
ng-minlength
ng-maxlength
ng-pattern
自訂驗證
required
ng-minlength="5"
ng-maxlength="30"
錯誤提示訊息
![Page 60: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/60.jpg)
可共用的驗證訊息
60
![Page 61: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/61.jpg)
可共用的驗證訊息
61
建立常用錯誤訊息樣版
error-messages.html
![Page 62: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/62.jpg)
自訂驗證
輸入值
回傳驗證是否成功
套上驗證
![Page 63: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/63.jpg)
• 套用表單驗證
• 共用錯誤提示樣版
Demo
![Page 64: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/64.jpg)
64
支援自動化測試
![Page 65: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/65.jpg)
我以為工作後測試軟體是…
![Page 66: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/66.jpg)
實際上測試軟體有點像……
![Page 67: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/67.jpg)
為什麼需要自動化測試?
![Page 68: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/68.jpg)
使用Protractor
•量身打造
•模擬人類操作
•支援多瀏覽器
![Page 69: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/69.jpg)
複雜表單的測試
測試一個這樣的表單需要花多少時間?
![Page 70: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/70.jpg)
交給自動化測試
•Just One Click
![Page 71: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/71.jpg)
• 自動化測試
Demo
![Page 72: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/72.jpg)
減少重複的動作
省下大量的時間
多瀏覽器支援
小結
72
![Page 73: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/73.jpg)
73
總結
![Page 74: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/74.jpg)
關注點分離(SoC)
架構設計良好(SOLID)
程式碼好維護
社群活動踴躍
相容性極佳
選擇Angular.js的理由
74
![Page 75: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/75.jpg)
工商服務
75
公司介紹http://goo.gl/6P7FmV
工作機會http://goo.gl/sp9JPj
• APP開店平台• PC、Mobile Web、IOS、Android一次搞定• 誠徵
• F2E
• .Net Developer (Asp.Net Mvc)
• Ohters
![Page 76: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/76.jpg)
http://mvc.tw
好活動需要支持
感謝 KKTIX 贊助 twMVC 活動報名平台
76
![Page 77: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/77.jpg)
http://mvc.tw
好輸入法需要露出
77
http://skilltree.my/Sponsor/xin_zi_ran
![Page 79: Angular js twmvc#17](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b329d1a28ab34638b4577/html5/thumbnails/79.jpg)
謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。• 本投影片使用的圖片皆從網路搜尋。• 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款,請到
http://creativecommons.org/licenses/by-nc-sa/3.0/tw/,或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.
h t t p : / / m v c . t w