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