twMVC#09 | AngularJS 開發 ASP.NET MVC
1 like283 views
文档讨论了使用 AngularJS 替代 ASP.NET MVC 和 jQuery 的动机与优点。AngularJS 提供了模块化、双向数据绑定和丰富的功能，使代码更简洁且易于测试。尽管也存在缺点，如 SEO 的挑战和调试困难，但其在现代前端开发中的重要性不断增加。
![ 第一步
21
怎麼開始
<html ng-app>
or
<script>
var app = angular.module('app', [/* deps */]);
angular.bootstrap(document, ['app']);
</script>](https://image.slidesharecdn.com/angularjsasp-170709002926/85/twMVC-09-AngularJS-ASP-NET-MVC-21-320.jpg)
![filters
orderBy:‘PropertyName’
orderBy:[‘PropertyName’,‘-PropertyName’]
29
Directives, Filters and Data Binding](https://image.slidesharecdn.com/angularjsasp-170709002926/85/twMVC-09-AngularJS-ASP-NET-MVC-29-320.jpg)
![ 如果你的 JS 需要最小化(Minify)，請這樣寫
myApp.controller("PersonCtrl",[‘$scope’,’$location
’, function ($scope,$location) {/*..*/}]);
60
其他](https://image.slidesharecdn.com/angularjsasp-170709002926/85/twMVC-09-AngularJS-ASP-NET-MVC-60-320.jpg)
twMVC#09 | AngularJS 開發 ASP.NET MVC
- 1. AngularJS 開發 ASP.NET MVC jQuery 寫膩了嗎？換個新東西吧！ Bibby Chung http://bibby.be http://mvc.tw/0014
- 2. 微軟最有價值專家(ASP.NET) twMVC 聯合創辦人之一 獨立手機 APP 軟體開發 2 講者簡介 Bibby Chung http://bibby.be
- 3. 現代化的網頁程式 功能越來越多 user experience 越來越重視 jQuery 玩膩了寫煩了 不想再 DOM 來 DOM 去了 Single Page Application (SPA) 3 動機
- 4. 4 需要一些改變
- 5. 5 開始
- 7. 7 開始
- 8. 8 開始 優點是？
- 10. 10 AngularJS 優點 From Google I/O 2013
- 12. 12 AngularJS 優點
- 14. 14 AngularJS 優點
- 16. 16 AngularJS 優點
- 21. 第一步 21 怎麼開始 <html ng-app> or <script> var app = angular.module('app', [/* deps */]); angular.bootstrap(document, ['app']); </script>
- 22. 第二步 22 怎麼開始 到 NuGet 下載 AngularJS <script src="~/Scripts/angular.js"> </script>
- 23. 23 怎麼開始 簡單的 Binding 簡單的 For Loop
- 24. 24 Directives, Filters and Data Binding Demo
- 25. 什麼是 Directive 像一個 Html Tag 定義作用或作用域 想成 HTML 開外掛 25 Directives, Filters and Data Binding Html Tag 作用或作用域 Component
- 26. 有哪些 Directives 官網 26 Directives, Filters and Data Binding ng-app ng-model ng-init ng-repeat ng-show ng-controller ng-click
- 27. filters lowercase, uppercase filter:predicate.$ 27 Directives, Filters and Data Binding
- 28. 28 Directives, Filters and Data Binding Demo
- 29. filters orderBy:‘PropertyName’ orderBy:[‘PropertyName’,‘-PropertyName’] 29 Directives, Filters and Data Binding
- 30. 30 Directives, Filters and Data Binding Demo
- 31. 31 Views, Controllers and Scope
- 32. 32 Views, Controllers and Scope 設定Controller 設定Controller
- 33. 33 Views, Controllers and Scope View Controller $scope
- 34. 34 Views, Controllers and Scope Demo
- 35. 35 Views, Controllers and Scope 要改變，從 Model 開始
- 36. 36 Views, Controllers and Scope
- 37. 37 Modules, Routes and Services BUT..
- 38. 38 Modules, Routes and Services 這樣寫還不夠，只能當水母
- 39. 39 Modules, Routes and Services
- 40. 40 Modules, Routes and Services
- 41. 41 Modules, Routes and Services
- 42. 42 Modules, Routes and Services 設定的Module設定的Controller
- 43. 43 Modules, Routes and Services Demo
- 44. Routes Single Page Application(SPA) Services 獨體模式(Singleton) 適合 Controller 跟 Controller 的聯繫 Factories 任何想要模組共用的都可以丟到這裡 44 Modules, Routes and Services
- 45. 45 Modules, Routes and Services 設定Route http://localhost:7228/Test/Demo6#/Normal
- 46. 46 Modules, Routes and Services 設定Factories
- 47. 47 Modules, Routes and Services 設定Services
- 48. 48 Modules, Routes and Services Demo
- 49. 49 其他
- 51. 51 其他 常見的問題
- 53. 回答 可以協同作業，不過可以角色互換一下，以 AngularJS 為主， 讓 AngularJS 架構模組化及雙向Binding，讓 jQuery 來處 理特效等其它部分 不要再用 DOM 來操作頁面上的 Element 了 內建有 jsLite 可以操作 DOM 用 AngularJS 寫出來的 Code 是可測試性的 讓程式朝著對的方向前進 53 其他
- 55. 回答 ASP.NET MVC 的 View 會越用越少 程式都會移到 AngularJS 來設計 AJAX 越用越多，JSON 來 JSON 去，ASP.NET MVC 很 單純的變成資料供應者 很多的程式都被移到前端來處理了，前端的程式滿天飛， 需要有好的方式來管理前端撰寫 55 其他
- 57. 回答 SEO http://mvc.tw/000z 需要專業的人 不能再是跑龍套的角色 Debug 訊息並不是每次都很明顯，有時要靠資質直覺 57 其他
- 58. 58 其他 應該還有時間！
- 59. Visual Stuido 2012 Intellisense http://mvc.tw/000y 支援的瀏覽器 官方說法，保證支援現代化的瀏覽器 偵錯及效能工具 AngularJS Batarang http://mvc.tw/0010 59 其他
- 60. 如果你的 JS 需要最小化(Minify)，請這樣寫 myApp.controller("PersonCtrl",[‘$scope’,’$location ’, function ($scope,$location) {/*..*/}]); 60 其他
- 61. 61 其他 結論
- 63. 63 其他
- 64. 官網 (英文) http://angularjs.org/ AngularJS 中文社區 (阿六仔) http://angularjs.cn/ Youtube 官網教學 http://mvc.tw/0012 Dan Wahlin 教學影片 http://mvc.tw/0011 加入 Facebook 的 AngularJS.tw 社團 64 資源
- 65. 65 資源 From Google I/O 2013
- 66. Blog http://bibby.be Facebook http://fb.me/bibbynet Plurk http://www.plurk.com/bibbynet 66 聯絡我 Bibby Chung http://bibby.be
- 67. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。 h t t p : / / m v c . t w