Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular.js & ASP.NET in Study4

1,235 views

Published on

Published in: Software
  • Be the first to comment

Angular.js & ASP.NET in Study4

  1. 1. 當ASP.NET MVC遇見Angular.js MVC 講者:KYLE SHEN
  2. 2. 關於我  Kyle (凱爾)  專注於Web應用程式ASP.NET(Webform & MVC) for C# 、MS SQL、 jQuery、Angular.js  ASP.NET微軟最有價值專家  藍色小舖ASP.NET版主  IT Home 鐵人30天文章比賽  2014 當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統  2013 ASP.NET開發小技巧  Blog – 程式宅急便  Github : kyleap
  3. 3. 今天會講什麼&得到什麼?  關於MVC  了解Angular.js 與 jQuery開發上的差異性  實作開發了解Angular.js  ASP.NET Web API  得到一大堆的參考連結  本課程完整程式碼下載  售後服務
  4. 4. 關於網頁前後端 & MVC  Asp  ASP.NET Webform  ASP.NET MVC  ASP.NET MVC & Angular.js  Controller  Controller(Web API)  View (Angular.js)
  5. 5. 關於網頁前後端 & MVC  Asp  ASP.NET Webform  ASP.NET MVC  ASP.NET MVC & Angular.js  Controller  Controller(Web API)  View (Angular.js)
  6. 6. 關於網頁前後端 & MVC  Asp  ASP.NET Webform  ASP.NET MVC  ASP.NET MVC & Angular.js  Controller  Controller(Web API)  View (Angular.js)
  7. 7. 關於網頁前後端 & MVC  Asp  ASP.NET Webform  ASP.NET MVC  ASP.NET MVC & Angular.js  Controller  Controller(Web API)  View (Angular.js)
  8. 8. MVC到底好在哪?  關注點分離  易於維護  開發彈性  高度客製化  易於測試
  9. 9. jQuery 與 Angular.js  jQuery  已”DOM”的概念來操作  輕量級  簡單、直覺、學習曲線低  特效與動畫  套件非常多
  10. 10. jQuery 與 Angular.js  Angular.js  已”Model”的概念來操作  由Google推出,目前 1.3.X(Stable) 、2.0(Preview)  HTML Template  使用 {{ }} 來做資料繫結  非常適合做CRUD,過於依賴操控DOM的網站不適合  Code會少很多,關注點分離變成很好維護
  11. 11. jQuery 與 Angular.js  一個簡單的jQuery例子… HTML JS
  12. 12. jQuery 與 Angular.js  One Way Binding
  13. 13. jQuery 與 Angular.js  Two Way Binding
  14. 14. Start Angular.js  怎麼開始? 載入.js ,宣告 ng  <html ng-app> …… </html>  <html ng-app="myapp"> … </html> <script> var app = angular. module("myapp", []); </script>
  15. 15. Hello World & Two Way Binding Demo
  16. 16. Controller  model 與view的橋樑  運作的邏輯寫在 Controller  前端的分層
  17. 17. Model (Scope )
  18. 18. Controller.Scope Demo
  19. 19. Filter  過濾器可以使用一個管道字元 ”|”添加到運算式中。  甚至可以自訂過濾器 語法 描述 currency 格式化為貨幣格式。 filter 從陣列項中選擇一個子集。 lowercase 格式化字串為小寫。 orderBy 根據某個運算式排列陣列。 uppercase 格式化字串為大寫。
  20. 20. Directvies  讓Html變浩克  內建很多directive e.g ng-XXX  一樣可以自訂directive
  21. 21. Filter.Directives Demo
  22. 22. Web API  Web API為RESTful風格介面  給我:GET (http://domain/api/customer/)  給我:GET(http://domain/api/customer/id)  新增:POST (http://domain/api/customer/)  更新:PUT (http://domain/api/customer/)  刪除:DELETE (http://domain/api/customer/)
  23. 23. Angular.js 如何跟API溝通  $http.get  $http.head  $http.post  $http.put  $http.delete  $http.jsonp  $http.patch
  24. 24. Angular.js 如何跟API溝通($resource)  專門為RESTful API做設計  方便幫我們處理CRUD  需載入ngResource模組
  25. 25. 完成一個前端+後端CRUD範例…. Demo
  26. 26. Plugins
  27. 27. 語法通通不一樣
  28. 28. Angular.js 2.0  基本上可以當成不同的Freamwork  引進ES6 語法  效能大大改善  Components元件 概念 vs (React.js)  完全改用 TypeScript 開發  睡一覺起來,有可能這個世界就不一樣了
  29. 29. 結論  學習曲線較jQuery長  jQuery專案翻成Angular.js後,專案好維護很多  Angular在大型系統要小心效能問題  相依性注入(Dependency Injection) 能方便切換模組  Angular.js易於測試 (Protractor)  要玩前端請愛用瀏覽器開發工具(Chome.Firefox)  ASP.NET MVC的View(Razor)幾乎很少用了  評估技術前,個人會先考慮“彈性”  不要孤單的打程式
  30. 30. References  官網 Document https://code.angularjs.org/1.3.15/docs/api  Angular.js中文社區 http://www.angularjs.cn/tag/AngularJS  Angular.js中文網 http://angularjs.apjs.net/  Angular.js Hub http://www.angularjshub.com/  英文夠好的話 https://github.com/jmcunningham/AngularJS- Learning/blob/master/ZH-TW.md
  31. 31. References  https://www.youtube.com/user/angularjs  慕課網 http://www.imooc.com/course/list?c=angularjs  Code Project  http://www.codeproject.com/Articles/810892/Building-a-Kanban-board- application-using-AngularJ  http://www.codeproject.com/Articles/832288/CRUD-with-SPA-ASP-NET- Web-API-and-Angular-js  http://weblogs.asp.net/dwahlin/learning-angularjs-by-example-the- customer-manager-application (推薦)
  32. 32. Q & A http://ppt.cc/uMnT 別忘了填寫您寶貴的意見!

×