AngularJS training in Luster

Slide 1

Slide 1 text

AngularJS ! 2014 - 達暉資訊 - 教育訓練系列課程

Slide 2

Slide 2 text

Me - 鐘友志 Jason Chung - 軟體工程師 (達暉資訊有限公司) - [email protected]

Slide 3

Slide 3 text

What is it 1. by 2. JavaScript MVW Framework Model-View-Whatever

Slide 4

Slide 4 text

Observer About MVC View UI, Represents current model state Controller Make decision for the View Model Domain-specific data User Input Modify Display Output Notify Handle event

Slide 5

Slide 5 text

About MVVM View User Interface View Model State and Operations Data bindings and Commands Send notifications Update Model Domain-specific data Send notifications

Slide 6

Slide 6 text

View User Interface Model Domain-specific data About MVW Whatever works for you

Slide 7

Slide 7 text

它改變了什麼？

Slide 8

Slide 8 text

Let’s coding for ! Hello world

Slide 9

Slide 9 text

Hello world in JS

Slide 10

Slide 10 text

Hello world in jQuery

Slide 11

Slide 11 text

What’s the problem in JS & jQuery?（多選） 1. 當需求增加，程式碼可能重複 2. 難以得知某個 HTML element 的所有⾏行為 3. 輸入了 “Hello, ...”，無法同時顯⽰示在不同的

上 4. 改變了某個 HTML element 的 id 或 class，可能照成無法預期的錯誤 5. 使⽤用 jQuery 的 selector 很難 debug

Slide 12

Slide 12 text

Can not

$(“#input”).keyup(function () { $(“#output”).html(…); });

$(“#input1”).keyup(function () { $(“#output1”).html(…); });

$(“#input2”).keyup(function () { $(“#output2”).html(…); });

Slide 13

Slide 13 text

$(“#input1”).keyup(function () { var val = $(this).val(); ! $(“#output1”).html(val); ! });

如果需求改變...

Slide 14

Slide 14 text

$(“#input1”).keyup(function () { var val = $(this).val(); ! $(“#output1”).html(val); ! }); $(“#input2”).keyup(function () { var val = $(this).val(); ! $(“#input1”).val(val) $(“#output1”).html(val); }); $(“#input2”).val(val); 如果需求改變...

Slide 15

Slide 15 text

input1 Value output1

Slide 16

Slide 16 text

input2 input1 Value output1 output2

Slide 17

Slide 17 text

input2 input1 Value output1 output2 input3 input4 …WTF

Slide 18

Slide 18 text

當 HTML 跟 JS 分開時... ? ?

Slide 19

Slide 19 text

What’s the problem in jQuery 維護 id/class 在幹嘛？加班！ 1. 到底為了什麼維護 id/class？ 2. 操作 DOM，因為要處理很多的 UI 互動有時候無法從 HTML 中，看出元素的行為 3.

Slide 20

Slide 20 text

Hello world in AngularJS

Slide 21

Slide 21 text

幫我們做了什麼？

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

What’s So Good in AngularJS ·• 三個步驟，搞定！ ·• Wow, no JS！ ·• Readable！

Slide 25

Slide 25 text

VS Two way data binding DOM manipulation 我們必須處理很多 event 我們專注 data 編程式的開發思維宣告式的開發思維很多很棒的 function 適合處理資料與 UI 的互動 IE 支援 6 以上 IE 支援 8 以上

Slide 26

Slide 26 text

So, Why we use it ? 程式碼更簡潔，更易讀！我們只需要注意 data！還有，不用加班！ Two way data binding 讓我們不再關心 DOM 的操作

Slide 27

Slide 27 text

進入 AngularJS 的世界

Slide 28

Slide 28 text

很多的 Concepts Scopes Controllers Services Directives Dependency Injection etc… Route Template Module Promise

Slide 29

Slide 29 text

所以，我們從...

Slide 30

Slide 30 text

簡單的 Web App 開始如果能現學現賣，那就理想了

Slide 31

Slide 31 text

那，要做什麼呢？

Slide 32

Slide 32 text

男生居多，那就妹 ·• 差不多是這樣貼心提醒：別瀏覽太多次，每月連線次數有限！ ·• 請自行更換主題，例如：暗黑版、帥哥版... http://ilovehotty.parseapp.com

Slide 33

Slide 33 text

·• Topic：我愛正妹 • Requirement： 1. 簡單的清單（列出所有追蹤中的正妹） 2. 可關鍵字搜尋 3. 可排序（根據喜愛的程度） 4. CRUD（人的喜好，總是會隨時間改變）

Slide 34

Slide 34 text

Let’s Coding for 我愛正妹 Round 1

Slide 35

Slide 35 text

ng-app、ng-controller… 到底是什麼東西？ ng-model、ng-repeat、ng-click…

Slide 36

Slide 36 text

Directives 讓我們有能力新增自己的 HTML 語法

Slide 37

Slide 37 text

原 HTML Browser 幫我們做的事

Slide 38

Slide 38 text

如果你想要那麼，這就是 Directive 要幫我們解決的事！

Slide 39

Slide 39 text

Directives 其實是＝ Template (HTML) Behavior (JavaScript) +

Slide 40

Slide 40 text

之後，我們就可以 Ctrl+C Ctrl+V Ctrl+V Ctrl+V 目前所在地臺北高雄

Slide 41

Slide 41 text

而且以後的我們，只要維護一份 HTML (Template) JavaScript (Behavior) Code

Slide 42

Slide 42 text

Directives 小結 ·•封裝複雜的邏輯和架構 ·•Reuse UI 元件

Slide 43

Slide 43 text

ng-app、ng-click… 就是 Angular 提供給我們的 Directives Directives Angular built-in

Slide 44

Slide 44 text

Directives 客製化 No more time, 我們跳過...

Slide 45

Slide 45 text

但是，還記得 Directive 幫我們解決什麼嗎？

Slide 46

Slide 46 text

Scopes 1. View 跟 Controller 利用它來做 View 和 Controller 都能夠存取 $scope，所以溝通

Slide 47

Slide 47 text

View 跟 Controller 利用 Scope 做溝通

Slide 48

Slide 48 text

2. $scope 是一個簡單的 Data Model 儘管 Angular 加了一些 function 在裡面但別想的太難

Slide 49

Slide 49 text

3. Scope 之間的關係就像一個 App 裡有很多的 scope，

Slide 50

Slide 50 text

$rootScope.money = ‘1億’; {{ money }} => 1億

Slide 51

Slide 51 text

{{ money }} => 1億 $scope.money = ‘2億’; {{ money }} => 2億 {{ money }} => 1億 $rootScope.money = ‘1億’;

Slide 52

Slide 52 text

{{ money }} => 1億 $scope.money = ‘2億’; {{ money }} => 2億 {{ money }} => 1億 $rootScope.money = ‘1億’; $scope.wife = ‘林依晨’; {{ wife }} => 林依晨 $scope.wife = ‘桂綸鎂’; {{ wife }} => 桂綸鎂

Slide 53

Slide 53 text

3. Scope 之間的關係就像爺爺⼤大伯⼆二伯⽗父親堂哥我⼩小弟親屬關係可繼承父親屬性兄弟之間的屬性不會影響

Slide 54

Slide 54 text

Controllers 定義和初始某一個 View 上的功能和資料並將它們綁定在 $scope 上

Slide 55

Slide 55 text

它們是生命共同體還記得這張圖嗎？

Slide 56

Slide 56 text

Keywords in Round 1 Directives • ng-app • ng-controller • ng-model • ng-repeat • ng-click

Slide 57

Slide 57 text

Keywords in Round 1 Filters • filter • orderBy

Slide 58

Slide 58 text

Keywords in Round 1 Services • $scope

Slide 59

Slide 59 text

Concepts in Round 1 • Directives • Scopes • Controllers

Slide 60

Slide 60 text

接下來，我們要做什麼呢？

Slide 61

Slide 61 text

Let’s Coding for 我愛正妹 Round 2

Slide 62

Slide 62 text

Modules setter angular.module('moduleName', []); getter angular.module('moduleName'); 依賴的模組 ! Ex： [“module1”, “module2”]

Slide 63

Slide 63 text

• module.controller(name, function) • module.service(name, function) • module.directive(name, function) • module.filter(name, function) • … angular.module API

Slide 64

Slide 64 text

Filter Service Directive Controller …etc Module Module 讓我們方便地打包這些東西

Slide 65

Slide 65 text

Filter Service Directive Controller …etc Module ModuleA ModuleB ModuleC Module 讓程式可以被 Reuse

Slide 66

Slide 66 text

Filter Service Directive Controller …etc Module ModuleA ModuleB ModuleC Module 會幫我們處理複雜的依賴關係

Slide 67

Slide 67 text

Services 一個 singleton 物件，Controller 們可以共享它

Slide 68

Slide 68 text

可以想像成...

Slide 69

Slide 69 text

Mrs. Controller

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Mrs. Controller app.controller(‘fatHottyCtrl’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; } ); Mrs. Controller 2 app.controller(‘fatHottyCtrl2’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; } );

Slide 72

Slide 72 text

當你的 App 變得越來越大...

Slide 73

Slide 73 text

有東西重複了＝工程師的禁忌所以...

Slide 74

Slide 74 text

app.controller(‘fatHottyCtrl’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; } ); app.controller(‘fatHottyCtrl2’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; app.service(‘hottyService’, function ($http) { this.findAllHotties = function () { $http… }; this.findOneHotty = …; this.createHotty = …; this.updateHotty = …; this.deleteHotty = …; } );

Slide 75

Slide 75 text

app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) { $scope.hottyService = hottyService; } ); app.controller(‘thinHottyCtrl’, function ($scope, hottyService) { $scope.hottyService = hottyService; } ); app.service(‘hottyService’, function ($http) { this.findAllHotties = function () { $http… }; this.findOneHotty = …; this.createHotty = …; this.updateHotty = …; this.deleteHotty = …; } );

Slide 76

Slide 76 text

Services Mrs. Controller Mrs. Controller 2 2. Singleton 1. 邏輯可以共同使用 3. Controller 更瘦了

Slide 77

Slide 77 text

·• Angular built-in service 像 $http、$location 等 ·• Angular 提供我們很多方法創建自己的 Service Services 備註 module.service() module.provider() module.factory() = 不同方法，但都是為了創建 Service

Slide 78

Slide 78 text

Dependency Injection 你要什麼，跟它講，然後，它就給你什麼

Slide 79

Slide 79 text

app.controller(‘thinHottyCtrl’, function ($scope, hottyService) { $scope.hottyService = hottyService; } ); Angular 會幫你管理物件的生命週期你只需要很明確的跟它要名稱必須正確

Slide 80

Slide 80 text

angular.module(‘a’, [‘b’]) .service(‘aService’, function (bService) {} ); 找人，總是要那個人曾經活過確保它是存在的 angular.module(‘b’, []) .service(‘bService’, function () {} ); 所以，如果你要的東西定義在其他模組，請記得要 import 那個模組

Slide 81

Slide 81 text

app.controller(‘thinHottyCtrl’, function ($scope, hottyService) {…} ); app.controller(‘thinHottyCtrl’, function (hottyService, $scope) {… = 排序並不重要

Slide 82

Slide 82 text

app.service(‘aService’, function (bService) {…}); app.service(‘bService’, function (aService) {…}); 無法互相依賴

Slide 83

Slide 83 text

DI 的好處 app.controller(‘thinHottyCtrl1’, function ($scope, hottyService) {…}); app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) {…} function HottyServiceA() {…}; app.service(‘hottyService’, HottyServiceA);

Slide 84

Slide 84 text

鬆耦合 app.controller(‘thinHottyCtrl1’, function ($scope, hottyService) {…}); app.service(‘hottyService’, HottyServiceB); function HottyServiceA() {…}; app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) {…} function HottyServiceB() {…};

Slide 85

Slide 85 text

Keywords in Round 2 Services • $http

Slide 86

Slide 86 text

Concepts in Round 2 • Modules • Services • Dependency Injection

Slide 87

Slide 87 text

Round 3 接下來，交給你盡情發揮...

Slide 88

Slide 88 text

https://github.com/shiningjason1989/ng-tutorial You can get sources on

Slide 89

Slide 89 text

Now, you know How to use it Scopes Controllers Services Directives Dependency Injection …

Slide 90

Slide 90 text

Finally, What is it HTML enhanced for web apps

Slide 91

Slide 91 text

謝謝您的沒有睡著你有嗎？如果你錯過了什麼，或者熱血的想找人討論，歡迎您找我：） By Jason Chung - [email protected] 達暉資訊