Angular.js & ASP.NET in Study4

當ASP.NET MVC遇見Angular.js MVC
講者：KYLE SHEN

關於我
 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

今天會講什麼&得到什麼?
 關於MVC
 了解Angular.js 與 jQuery開發上的差異性
 實作開發了解Angular.js
 ASP.NET Web API
 得到一大堆的參考連結
 本課程完整程式碼下載
 售後服務

關於網頁前後端 & MVC
 Asp
 ASP.NET Webform
 ASP.NET MVC
 ASP.NET MVC & Angular.js
 Controller
 Controller(Web API)
 View (Angular.js)

MVC到底好在哪?
 關注點分離
 易於維護
 開發彈性
 高度客製化
 易於測試

jQuery 與 Angular.js
 jQuery
 已”DOM”的概念來操作
 輕量級
 簡單、直覺、學習曲線低
 特效與動畫
 套件非常多

 Angular.js
 已”Model”的概念來操作
 由Google推出，目前 1.3.X(Stable) 、2.0(Preview)
 HTML Template
 使用 {{ }} 來做資料繫結
 非常適合做CRUD，過於依賴操控DOM的網站不適合
 Code會少很多，關注點分離變成很好維護

 一個簡單的jQuery例子…
HTML
JS

 One Way Binding

 Two Way Binding

Start Angular.js
 怎麼開始? 載入.js ,宣告 ng
 <html ng-app>
……
</html>
 <html ng-app="myapp"> … </html>
<script>
var app = angular. module("myapp", []);
</script>

Hello World & Two Way Binding
Demo

Controller
 model 與view的橋樑
 運作的邏輯寫在 Controller
 前端的分層

Filter
 過濾器可以使用一個管道字元 ”|”添加到運算式中。
 甚至可以自訂過濾器
語法描述
currency 格式化為貨幣格式。
filter 從陣列項中選擇一個子集。
lowercase 格式化字串為小寫。
orderBy 根據某個運算式排列陣列。
uppercase 格式化字串為大寫。

Directvies
 讓Html變浩克
 內建很多directive e.g ng-XXX
 一樣可以自訂directive

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/)

Angular.js 如何跟API溝通
 $http.get
 $http.head
 $http.post
 $http.put
 $http.delete
 $http.jsonp
 $http.patch

Angular.js 如何跟API溝通($resource)
 專門為RESTful API做設計
 方便幫我們處理CRUD
 需載入ngResource模組

完成一個前端+後端CRUD範例….
Demo

Angular.js 2.0
 基本上可以當成不同的Freamwork
 引進ES6 語法
 效能大大改善
 Components元件概念 vs (React.js)
 完全改用 TypeScript 開發
 睡一覺起來，有可能這個世界就不一樣了

結論
 學習曲線較jQuery長
 jQuery專案翻成Angular.js後，專案好維護很多
 Angular在大型系統要小心效能問題
 相依性注入(Dependency Injection) 能方便切換模組
 Angular.js易於測試 (Protractor)
 要玩前端請愛用瀏覽器開發工具(Chome.Firefox)
 ASP.NET MVC的View(Razor)幾乎很少用了
 評估技術前，個人會先考慮“彈性”
 不要孤單的打程式

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

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 (推薦)

Q & A
http://ppt.cc/uMnT
別忘了填寫您寶貴的意見！

Angular.js & ASP.NET in Study4

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Angular.js & ASP.NET in Study4

Similar to Angular.js & ASP.NET in Study4 (20)

Angular.js & ASP.NET in Study4