angular.js & asp.net in study4
TRANSCRIPT
當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
Asp
ASP.NET Webform
ASP.NET MVC
ASP.NET MVC & Angular.js
Controller
Controller(Web API)
View (Angular.js)
關於網頁前後端 & MVC
Asp
ASP.NET Webform
ASP.NET MVC
ASP.NET MVC & Angular.js
Controller
Controller(Web API)
View (Angular.js)
關於網頁前後端 & 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”的概念來操作
輕量級
簡單、直覺、學習曲線低
特效與動畫
套件非常多
jQuery 與 Angular.js
Angular.js
已”Model”的概念來操作
由Google推出，目前 1.3.X(Stable) 、2.0(Preview)
HTML Template
使用 {{ }}來做資料繫結
非常適合做CRUD，過於依賴操控DOM的網站不適合
Code會少很多，關注點分離變成很好維護
jQuery 與 Angular.js
一個簡單的jQuery例子…
HTML
JS
jQuery 與 Angular.js
One Way Binding
jQuery 與 Angular.js
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
前端的分層
Model (Scope )
Controller.Scope
Demo
Filter
過濾器可以使用一個管道字元 ”|”添加到運算式中。
甚至可以自訂過濾器
語法 描述
currency 格式化為貨幣格式。
filter 從陣列項中選擇一個子集。
lowercase 格式化字串為小寫。
orderBy 根據某個運算式排列陣列。
uppercase 格式化字串為大寫。
Directvies
讓Html變浩克
內建很多directive e.g ng-XXX
一樣可以自訂directive
Filter.Directives
Demo
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
Plugins
語法通通不一樣
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 & Ahttp://ppt.cc/uMnT
別忘了填寫您寶貴的意見！