Angular.js & ASP.NET in Study4
Download as PPTX, PDF11 likes1,362 views
本次演講由凱爾主講，重點介紹了ASP.NET MVC與Angular.js的結合，並探討了二者在前後端開發中的差異及優勢。參與者將學習如何使用Angular.js進行CRUD操作，了解網頁API的運作，以及Angular.js 2.0的新特性和最佳實踐。該文檔還提供了相關資源和參考鏈接，以便深入學習和實作。
![Start Angular.js
怎麼開始? 載入.js ,宣告 ng
<html ng-app>
……
</html>
<html ng-app="myapp"> … </html>
<script>
var app = angular. module("myapp", []);
</script>](https://image.slidesharecdn.com/study4-angular-150328111224-conversion-gate01/85/Angular-js-ASP-NET-in-Study4-14-320.jpg)
Angular.js & ASP.NET in Study4
- 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. 今天會講什麼&得到什麼? 關於MVC 了解Angular.js 與 jQuery開發上的差異性 實作開發了解Angular.js ASP.NET Web API 得到一大堆的參考連結 本課程完整程式碼下載 售後服務
- 4. 關於網頁前後端 & MVC Asp ASP.NET Webform ASP.NET MVC ASP.NET MVC & Angular.js Controller Controller(Web API) View (Angular.js)
- 5. 關於網頁前後端 & MVC Asp ASP.NET Webform ASP.NET MVC ASP.NET MVC & Angular.js Controller Controller(Web API) View (Angular.js)
- 6. 關於網頁前後端 & MVC Asp ASP.NET Webform ASP.NET MVC ASP.NET MVC & Angular.js Controller Controller(Web API) View (Angular.js)
- 7. 關於網頁前後端 & MVC Asp ASP.NET Webform ASP.NET MVC ASP.NET MVC & Angular.js Controller Controller(Web API) View (Angular.js)
- 8. MVC到底好在哪? 關注點分離 易於維護 開發彈性 高度客製化 易於測試
- 9. jQuery 與 Angular.js jQuery 已”DOM”的概念來操作 輕量級 簡單、直覺、學習曲線低 特效與動畫 套件非常多
- 10. jQuery 與 Angular.js Angular.js 已”Model”的概念來操作 由Google推出，目前 1.3.X(Stable) 、2.0(Preview) HTML Template 使用 {{ }} 來做資料繫結 非常適合做CRUD，過於依賴操控DOM的網站不適合 Code會少很多，關注點分離變成很好維護
- 11. jQuery 與 Angular.js 一個簡單的jQuery例子… HTML JS
- 12. jQuery 與 Angular.js One Way Binding
- 13. jQuery 與 Angular.js Two Way Binding
- 14. Start Angular.js 怎麼開始? 載入.js ,宣告 ng <html ng-app> …… </html> <html ng-app="myapp"> … </html> <script> var app = angular. module("myapp", []); </script>
- 15. Hello World & Two Way Binding Demo
- 17. Controller model 與view的橋樑 運作的邏輯寫在 Controller 前端的分層
- 18. Model (Scope )
- 20. Filter 過濾器可以使用一個管道字元 ”|”添加到運算式中。 甚至可以自訂過濾器 語法 描述 currency 格式化為貨幣格式。 filter 從陣列項中選擇一個子集。 lowercase 格式化字串為小寫。 orderBy 根據某個運算式排列陣列。 uppercase 格式化字串為大寫。
- 21. Directvies 讓Html變浩克 內建很多directive e.g ng-XXX 一樣可以自訂directive
- 23. 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/)
- 24. Angular.js 如何跟API溝通 $http.get $http.head $http.post $http.put $http.delete $http.jsonp $http.patch
- 25. Angular.js 如何跟API溝通($resource) 專門為RESTful API做設計 方便幫我們處理CRUD 需載入ngResource模組
- 27. Plugins
- 29. 語法通通不一樣
- 30. Angular.js 2.0 基本上可以當成不同的Freamwork 引進ES6 語法 效能大大改善 Components元件 概念 vs (React.js) 完全改用 TypeScript 開發 睡一覺起來，有可能這個世界就不一樣了
- 31. 結論 學習曲線較jQuery長 jQuery專案翻成Angular.js後，專案好維護很多 Angular在大型系統要小心效能問題 相依性注入(Dependency Injection) 能方便切換模組 Angular.js易於測試 (Protractor) 要玩前端請愛用瀏覽器開發工具(Chome.Firefox) ASP.NET MVC的View(Razor)幾乎很少用了 評估技術前，個人會先考慮“彈性” 不要孤單的打程式
- 32. 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
- 33. 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 (推薦)