AngularJS training in Luster

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

Me
- 鐘友志 Jason Chung
- 軟體工程師 (達暉資訊有限公司)
- jason@lustertech.net

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

User Input

About

Display
Output
Handle event

View
UI, Represents
current model state

MVC

Controller
Make decision for
the View

Modify
Observer

Notify

Model
Domain-specific data

About

MVVM

View
User Interface
Data bindings
and
Commands

Send notifications

Send notifications

View Model

Model

State and Operations


Update

About
View

MVW

User Interface

Whatever works
for you

Model

Let’s coding for
!

Hello world

What’s the problem
in JS & jQuery?（多選）
1.

當需求增加，程式碼可能重複

2.

難以得知某個 HTML element 的所有⾏行為

3.

輸入了 “Hello, ...”，無法同時顯⽰示在不同的 <DIV> 上

4.

改變了某個 HTML element 的 id 或 class，可能照成無法
預期的錯誤

5.

使⽤用 jQuery 的 selector 很難 debug

Can not
<input id=“input”>
<div id=“output”>
$(“#input”).keyup(function () {
$(“#output”).html(…);
});
<input id=“input1”>
<div id=“output1”>
$(“#input1”).keyup(function () {
$(“#output1”).html(…);
});
$(“#output2”).html(…);
});


var val = $(this).val();


!
$(“#output1”).html(val);

!
});

如果需求改變...




!

!
$(“#input2”).val(val);
});

!
$(“#input1”).val(val)

如果需求改變...

});

input2
input1

Value

output1
output2

input2
input1

input3

Value

output1

input4

…WTF
output2

當 HTML 跟 JS 分開時...

?
?

What’s the problem

in jQuery

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

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

VS
DOM manipulation
我們必須處理很多 event

編程式的開發思維
很多很棒的 function
IE 支援 6 以上

Two way data binding

我們專注 data

宣告式的開發思維
適合處理資料與 UI 的互動
IE 支援 8 以上

So,

Why we use it ?
程式碼更簡潔，更易讀！

Two way data binding 讓我們
不再關心 DOM 的操作

我們只需要注意 data！

還有，不用加班！

很多的

Concepts

Scopes

Dependency Injection

Directives
Services

Controllers

etc…

Route
Template
Module
Promise

Web App 開始

簡單的

如果能現學現賣，那就理想了

妹

男生居多，那就

·• 差不多是這樣

http://ilovehotty.parseapp.com
貼心提醒：別瀏覽太多次，每月連線次數有限！

·• 請自行更換主題，例如：暗黑版、帥哥版...

·• Topic：我愛正妹

•

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

Let’s Coding

for 我愛正妹

Round 1

ng-app、ng-controller…
ng-model、ng-repeat、ng-click…

到底是什麼東西？

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

原

HTML

<ul><li>
<audio>

Browser 幫我們做的事

如果你想要

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

Directives 其實是

＝

Template (HTML)

+
Behavior (JavaScript)

之後，我們就可以
目前所在地

Ctrl+C
<weather location=“local”></weather>
臺北

Ctrl+V
<weather location=“taipei”></weather>
高雄

Ctrl+V
<weather location=“Kaohsiung”></weather>

Ctrl+V
<weather location=“somewhere”></weather>

而且以後的我們，

只要維護一份 Code
JavaScript (Behavior)

HTML (Template)

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

元件

Angular built-in

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

客製化

Directives
No more time, 我們跳過...

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

Scopes
View 和 Controller 都能夠存取 $scope，所以

1. View 跟 Controller 利用它來做

溝通

View 跟 Controller 利用 Scope 做溝通

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

一個 App 裡有很多的 scope，

3. Scope 之間的關係就像

<body ng-app>

{{ money }} => 1億

$rootScope.money = ‘1億’;

<body ng-app>

{{ money }} => 1億


<div ng-controller=“UncleCtrl”>

{{ money }} => 2億

<div ng-controller=“FatherCtrl”>

{{ money }} => 1億

$scope.money = ‘2億’;

<body ng-app>

{{ money }} => 1億


<div ng-controller=“UncleCtrl”>

{{ money }} => 2億

$scope.money = ‘2億’;

{{ wife }} => 林依晨

$scope.wife = ‘林依晨’;

<div ng-controller=“FatherCtrl”>

{{ money }} => 1億
{{ wife }} => 桂綸鎂

$scope.wife = ‘桂綸鎂’;

3. Scope 之間的關係就像

爺爺

⼤大伯

堂哥

親屬關係

⼆二伯

可繼承父親屬性

⽗父親

我

⼩小弟

兄弟之間的屬性不會影響

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

還記得這張圖嗎？

它們是生命共同體

Keywords in Round 1
Directives
•

ng-app

•

ng-controller

•

ng-model

•

ng-repeat

•

ng-click

Keywords in Round 1
Filters
•

filter

•

orderBy

Keywords in Round 1
Services
•

$scope

Concepts in Round 1
•

Directives

•

Scopes

•

Controllers

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

Let’s Coding

for 我愛正妹

Round 2

Modules
setter

angular.module('moduleName', []);
getter

依賴的模組

angular.module('moduleName');

Ex：
[“module1”, “module2”]

!

angular.module API
•

module.controller(name, function)

•

module.service(name, function)

•

module.directive(name, function)

•

module.filter(name, function)

•

…

Module
Filter

Service

Directive

Controller

…etc

Module
讓我們方便地打包這些東西

ModuleA
ModuleB
Module
讓程式可以被 Reuse

Module
Filter
Service
Directive
Controller
…etc

ModuleC

ModuleA
ModuleB
Module
會幫我們處理複雜的依賴關係

Module
Filter
Service
Directive
Controller
…etc

ModuleC

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

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

function () {
};
}
);

Mrs. Controller

app.controller(‘fatHottyCtrl2’,
function () {
};
}
);

Mrs. Controller 2

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

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

所以...

function () {
};
}
);
app.controller(‘fatHottyCtrl2’,
function () {
};

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

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

Services
Mrs. Controller

Mrs. Controller 2

1. 邏輯可以共同使用

3. Controller 更瘦了
2. Singleton

Services 備註
·• Angular

built-in service 像 $http、$location 等

·• Angular 提供我們很多方法創建自己的 Service

module.service()
module.factory()
module.provider()

= 不同方法，但都是為了創建 Service

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

}
);

名稱必須正確
Angular 會幫你管理物件的生命週期
你只需要很明確的跟它要

angular.module(‘a’, [‘b’])
.service(‘aService’, function (bService) {}
);
angular.module(‘b’, [])
.service(‘bService’, function () {}
);

確保它是存在的
找人，總是要那個人曾經活過
所以，如果你要的東西定義在其他模組，
請記得要 import 那個模組

function ($scope, hottyService) {…}

=

);


function (hottyService, $scope) {…

排序並不重要

app.service(‘aService’,
function (bService) {…});
app.service(‘bService’,
function (aService) {…});

無法互相依賴

DI 的好處
function ($scope, hottyService) {…});



app.service(‘hottyService’, HottyServiceA);
function HottyServiceA() {…};

鬆耦合
function ($scope, hottyService) {…});



app.service(‘hottyService’, HottyServiceB);
function HottyServiceA() {…};
function HottyServiceB() {…};

Keywords in Round 2
Services
•

$http

Concepts in Round 2
•

Modules

•

Services

•

Dependency
Injection

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

Round 3

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

Now, you know

How to use it
Scopes
Controllers
Services
Directives

…

Finally,

What is it

HTML enhanced
for web apps

謝謝您的沒有睡著
你有嗎？如果你錯過了什麼，或者熱血的想找人討論，

歡迎您找我：）

達暉資訊
By Jason Chung jason@lustertech.net

AngularJS training in Luster

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AngularJS training in Luster

Similar to AngularJS training in Luster (20)

AngularJS training in Luster