AngularJS 開發 ASP.NET MVC
jQuery 寫膩了嗎?換個新東西吧!
Bibby Chung
http://bibby.be
http://mvc.tw/0014
微軟最有價值專家(ASP.NET)
twMVC 聯合創辦人之一
獨立手機 APP 軟體開發
2
講者簡介
Bibby Chung
http://bibby.be
現代化的網頁程式
功能越來越多
user experience 越來越重視
jQuery 玩膩了寫煩了
不想再 DOM 來 DOM 去了
Single Page Application (SPA)
3
動機
4
需要一些改變
5
開始
6
開始
AngularJS 可以吃嗎?
7
開始
8
開始
優點是?
9
AngularJS 優點
Code 會少很多
10
AngularJS 優點
From Google I/O 2013
11
AngularJS 優點
重用模組化
12
AngularJS 優點
13
AngularJS 優點
易測試
14
AngularJS 優點
15
AngularJS 優點
雙向綁定
16
AngularJS 優點
17
AngularJS 功能
功能很多很多很多
1818
功能
Data Binding
Services
Directives
Views
Controllers
Models
Factories
Templates jqLite
Testing
Routing
MVC/MVVM/MVX
...
19
功能
Data Binding
Services
Directives
Views
Controllers
Models
Factories
Templates jqLite
Testing
Routing
MVC/MVVM/MVX
Va...
20
怎麼開始
Getting Started
 第一步
21
怎麼開始
<html ng-app>
or
<script>
var app = angular.module('app', [/* deps */]);
angular.bootstrap(document, ['app']...
 第二步
22
怎麼開始
到 NuGet 下載 AngularJS
<script src="~/Scripts/angular.js">
</script>
23
怎麼開始
簡單的 Binding
簡單的 For Loop
24
Directives, Filters and Data Binding
Demo
 什麼是 Directive
 像一個 Html Tag
 定義作用或作用域
 想成 HTML 開外掛
25
Directives, Filters and Data Binding
Html Tag
作用或作用域
Component
 有哪些 Directives
 官網
26
Directives, Filters and Data Binding
ng-app
ng-model
ng-init
ng-repeat
ng-show
ng-controller
ng-c...
filters
lowercase, uppercase
filter:predicate.$
27
Directives, Filters and Data Binding
28
Directives, Filters and Data Binding
Demo
filters
orderBy:‘PropertyName’
orderBy:[‘PropertyName’,‘-PropertyName’]
29
Directives, Filters and Data Binding
30
Directives, Filters and Data Binding
Demo
31
Views, Controllers and Scope
32
Views, Controllers and Scope
設定Controller
設定Controller
33
Views, Controllers and Scope
View
Controller
$scope
34
Views, Controllers and Scope
Demo
35
Views, Controllers and Scope
要改變,從 Model 開始
36
Views, Controllers and Scope
37
Modules, Routes and Services
BUT..
38
Modules, Routes and Services
這樣寫還不夠,只能當水母
39
Modules, Routes and Services
40
Modules, Routes and Services
41
Modules, Routes and Services
42
Modules, Routes and Services
設定的Module設定的Controller
43
Modules, Routes and Services
Demo
Routes
 Single Page Application(SPA)
Services
 獨體模式(Singleton)
 適合 Controller 跟 Controller 的聯繫
Factories
 任何想要模組共用的...
45
Modules, Routes and Services
設定Route
http://localhost:7228/Test/Demo6#/Normal
46
Modules, Routes and Services
設定Factories
47
Modules, Routes and Services
設定Services
48
Modules, Routes and Services
Demo
49
其他
50
其他
硬的就只有一點點
別擔心
AngularJS 基本上是簡單的
51
其他
常見的問題
52
其他
之前用 jQuery
現在用 AngularJS
會不會有問題?
 回答
 可以協同作業,不過可以角色互換一下,以 AngularJS 為主,
讓 AngularJS 架構模組化及雙向Binding,讓 jQuery 來處
理特效等其它部分
 不要再用 DOM 來操作頁面上的 Element 了
 內...
54
其他
今天主題不是
ASP.NET MVC
開發
AngularJS
那另一個主角呢?
回答
 ASP.NET MVC 的 View 會越用越少
程式都會移到 AngularJS 來設計
 AJAX 越用越多,JSON 來 JSON 去,ASP.NET MVC 很
單純的變成資料供應者
 很多的程式都被移到前端來處理了,...
56
其他
那 AngularJS 的缺點呢?
回答
 SEO
 http://mvc.tw/000z
 需要專業的人
不能再是跑龍套的角色
 Debug
訊息並不是每次都很明顯,有時要靠資質直覺
57
其他
58
其他
應該還有時間!
 Visual Stuido 2012 Intellisense
 http://mvc.tw/000y
 支援的瀏覽器
 官方說法,保證支援現代化的瀏覽器
 偵錯及效能工具 AngularJS Batarang
 http://m...
 如果你的 JS 需要最小化(Minify),請這樣寫
 myApp.controller("PersonCtrl",[‘$scope’,’$location
’, function ($scope,$location) {/*..*/}]...
61
其他
結論
62
其他
找一個小專案
來 TRY 就會發現問題了
63
其他
 官網 (英文) http://angularjs.org/
 AngularJS 中文社區 (阿六仔) http://angularjs.cn/
 Youtube 官網教學 http://mvc.tw/0012
 Dan Wahlin...
65
資源
From Google I/O 2013
 Blog  http://bibby.be
 Facebook  http://fb.me/bibbynet
 Plurk  http://www.plurk.com/bibbynet
66
聯絡我
Bibby Chung
htt...
謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。
• 本投影片使用的圖片皆從網路搜尋。
• 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。
h t t p ...
Upcoming SlideShare
Loading in …5
×

AngularJS 開發 ASP.NET MVC -twMVC#9

3,185 views
2,961 views

Published on



講者:Bibby http://bibby.be/ (現任MVP、Windows Phone 獨立開發者、twMVC核心講者)

簡介:還在用 jQuery 寫前端嗎?還在辛苦的操作 DOM 元素嗎?還在因為越來越複雜 JavaScript 難以維護而煩惱嗎?那您一定要瞧瞧 AngularJS 這一個 Client 端的 Framework,它由 Google 負責維護,雙向 Binding ,MVC 的架構,簡單直覺易使用的特性,可以讓您有系統的撰寫 JavaScript,本課程帶您認識 AngularJS 的核心觀念、關鍵技巧以及專案上可能遇到的一些問題,心動了嗎?趕快報名吧!

課程時間:70~90分鐘

http://mvc.tw

Published in: Technology

AngularJS 開發 ASP.NET MVC -twMVC#9

  1. 1. AngularJS 開發 ASP.NET MVC jQuery 寫膩了嗎?換個新東西吧! Bibby Chung http://bibby.be http://mvc.tw/0014
  2. 2. 微軟最有價值專家(ASP.NET) twMVC 聯合創辦人之一 獨立手機 APP 軟體開發 2 講者簡介 Bibby Chung http://bibby.be
  3. 3. 現代化的網頁程式 功能越來越多 user experience 越來越重視 jQuery 玩膩了寫煩了 不想再 DOM 來 DOM 去了 Single Page Application (SPA) 3 動機
  4. 4. 4 需要一些改變
  5. 5. 5 開始
  6. 6. 6 開始 AngularJS 可以吃嗎?
  7. 7. 7 開始
  8. 8. 8 開始 優點是?
  9. 9. 9 AngularJS 優點 Code 會少很多
  10. 10. 10 AngularJS 優點 From Google I/O 2013
  11. 11. 11 AngularJS 優點 重用模組化
  12. 12. 12 AngularJS 優點
  13. 13. 13 AngularJS 優點 易測試
  14. 14. 14 AngularJS 優點
  15. 15. 15 AngularJS 優點 雙向綁定
  16. 16. 16 AngularJS 優點
  17. 17. 17 AngularJS 功能 功能很多很多很多
  18. 18. 1818 功能 Data Binding Services Directives Views Controllers Models Factories Templates jqLite Testing Routing MVC/MVVM/MVX Validation Dependency Injection
  19. 19. 19 功能 Data Binding Services Directives Views Controllers Models Factories Templates jqLite Testing Routing MVC/MVVM/MVX Validation Dependency Injection
  20. 20. 20 怎麼開始 Getting Started
  21. 21.  第一步 21 怎麼開始 <html ng-app> or <script> var app = angular.module('app', [/* deps */]); angular.bootstrap(document, ['app']); </script>
  22. 22.  第二步 22 怎麼開始 到 NuGet 下載 AngularJS <script src="~/Scripts/angular.js"> </script>
  23. 23. 23 怎麼開始 簡單的 Binding 簡單的 For Loop
  24. 24. 24 Directives, Filters and Data Binding Demo
  25. 25.  什麼是 Directive  像一個 Html Tag  定義作用或作用域  想成 HTML 開外掛 25 Directives, Filters and Data Binding Html Tag 作用或作用域 Component
  26. 26.  有哪些 Directives  官網 26 Directives, Filters and Data Binding ng-app ng-model ng-init ng-repeat ng-show ng-controller ng-click
  27. 27. filters lowercase, uppercase filter:predicate.$ 27 Directives, Filters and Data Binding
  28. 28. 28 Directives, Filters and Data Binding Demo
  29. 29. filters orderBy:‘PropertyName’ orderBy:[‘PropertyName’,‘-PropertyName’] 29 Directives, Filters and Data Binding
  30. 30. 30 Directives, Filters and Data Binding Demo
  31. 31. 31 Views, Controllers and Scope
  32. 32. 32 Views, Controllers and Scope 設定Controller 設定Controller
  33. 33. 33 Views, Controllers and Scope View Controller $scope
  34. 34. 34 Views, Controllers and Scope Demo
  35. 35. 35 Views, Controllers and Scope 要改變,從 Model 開始
  36. 36. 36 Views, Controllers and Scope
  37. 37. 37 Modules, Routes and Services BUT..
  38. 38. 38 Modules, Routes and Services 這樣寫還不夠,只能當水母
  39. 39. 39 Modules, Routes and Services
  40. 40. 40 Modules, Routes and Services
  41. 41. 41 Modules, Routes and Services
  42. 42. 42 Modules, Routes and Services 設定的Module設定的Controller
  43. 43. 43 Modules, Routes and Services Demo
  44. 44. Routes  Single Page Application(SPA) Services  獨體模式(Singleton)  適合 Controller 跟 Controller 的聯繫 Factories  任何想要模組共用的都可以丟到這裡 44 Modules, Routes and Services
  45. 45. 45 Modules, Routes and Services 設定Route http://localhost:7228/Test/Demo6#/Normal
  46. 46. 46 Modules, Routes and Services 設定Factories
  47. 47. 47 Modules, Routes and Services 設定Services
  48. 48. 48 Modules, Routes and Services Demo
  49. 49. 49 其他
  50. 50. 50 其他 硬的就只有一點點 別擔心 AngularJS 基本上是簡單的
  51. 51. 51 其他 常見的問題
  52. 52. 52 其他 之前用 jQuery 現在用 AngularJS 會不會有問題?
  53. 53.  回答  可以協同作業,不過可以角色互換一下,以 AngularJS 為主, 讓 AngularJS 架構模組化及雙向Binding,讓 jQuery 來處 理特效等其它部分  不要再用 DOM 來操作頁面上的 Element 了  內建有 jsLite 可以操作 DOM  用 AngularJS 寫出來的 Code 是可測試性的  讓程式朝著對的方向前進 53 其他
  54. 54. 54 其他 今天主題不是 ASP.NET MVC 開發 AngularJS 那另一個主角呢?
  55. 55. 回答  ASP.NET MVC 的 View 會越用越少 程式都會移到 AngularJS 來設計  AJAX 越用越多,JSON 來 JSON 去,ASP.NET MVC 很 單純的變成資料供應者  很多的程式都被移到前端來處理了,前端的程式滿天飛, 需要有好的方式來管理前端撰寫 55 其他
  56. 56. 56 其他 那 AngularJS 的缺點呢?
  57. 57. 回答  SEO  http://mvc.tw/000z  需要專業的人 不能再是跑龍套的角色  Debug 訊息並不是每次都很明顯,有時要靠資質直覺 57 其他
  58. 58. 58 其他 應該還有時間!
  59. 59.  Visual Stuido 2012 Intellisense  http://mvc.tw/000y  支援的瀏覽器  官方說法,保證支援現代化的瀏覽器  偵錯及效能工具 AngularJS Batarang  http://mvc.tw/0010 59 其他
  60. 60.  如果你的 JS 需要最小化(Minify),請這樣寫  myApp.controller("PersonCtrl",[‘$scope’,’$location ’, function ($scope,$location) {/*..*/}]); 60 其他
  61. 61. 61 其他 結論
  62. 62. 62 其他 找一個小專案 來 TRY 就會發現問題了
  63. 63. 63 其他
  64. 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. 65 資源 From Google I/O 2013
  66. 66.  Blog  http://bibby.be  Facebook  http://fb.me/bibbynet  Plurk  http://www.plurk.com/bibbynet 66 聯絡我 Bibby Chung http://bibby.be
  67. 67. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。 h t t p : / / m v c . t w

×