AngularJS training in Luster

AngularJS!

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

Me - 鐘友志 Jason Chung

- 軟體工程師 (達暉資訊有限公司)

- [email protected]

mailto:[email protected]

What is it

1. by

2. JavaScript MVW FrameworkModel-View-Whatever

Observer

About MVC

ViewUI, Represents

current model state

ControllerMake decision for

the View

ModelDomain-specific data

User Input

Modify

Display Output

Notify

Handle event

About MVVMView

User Interface

View ModelState and Operations

Data bindings and

Commands

Send notifications

Update


Send notifications

ViewUser Interface


About MVW

Whatever works for you

它改變了什麼？

Let’s coding for !

Hello world

Hello world in JS

Hello world in jQuery

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<div id=“output”>$(“#input”).keyup(function () { $(“#output”).html(…); });

<input id=“input”>

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

<input id=“input1”>

<div id=“output2”>$(“#input2”).keyup(function () { $(“#output2”).html(…); });


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

<div id=“output1”><input id=“input1”>

如果需求改變...

<div id=“output1”>

$(“#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);

如果需求改變...

input1

Value

output1

input2

input1

Value

output1

output2

input2

input1

Value

output1

output2

input3

input4

…WTF

當 HTML 跟 JS 分開時...

??

What’s the problem in jQuery

維護 id/class 在幹嘛？加班！1.

到底為了什麼維護 id/class？

2. 操作 DOM，因為要處理很多的 UI 互動

有時候無法從 HTML 中，看出元素的行為3.

Hello world in AngularJS

幫我們做了什麼？

What’s So Good in AngularJS

·• 三個步驟，搞定！

·• Wow, no JS！

·• Readable！

VSTwo way data bindingDOM manipulation

我們必須處理很多 event 我們專注 data

編程式的開發思維宣告式的開發思維

很多很棒的 function 適合處理資料與 UI 的互動

IE 支援 6 以上 IE 支援 8 以上

So, Why we use it ?

程式碼更簡潔，更易讀！

我們只需要注意 data！

還有，不用加班！

Two way data binding 讓我們

不再關心 DOM 的操作

進入 AngularJS 的世界

很多的 Concepts

Scopes

Controllers Services

Directives

Dependency Injection

etc…RouteTemplate

Module

Promise

所以，我們從...

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

那，要做什麼呢？

男生居多，那就妹

·•差不多是這樣貼心提醒：別瀏覽太多次，每月連線次數有限！

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

http://ilovehotty.parseapp.com

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

Browser 幫我們做的事

<ul><li><audio>

如果你想要

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

Directives 其實是

＝ Template (HTML)

Behavior (JavaScript)+

之後，我們就可以

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

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

<weather location=“Kaohsiung”></weather>

Ctrl+V

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

目前所在地

臺北

高雄

而且以後的我們，

只要維護一份

HTML (Template)

JavaScript (Behavior)

Code

Directives 小結

·•封裝複雜的邏輯和架構

·•Reuse UI 元件

ng-app、ng-click…

就是 Angular 提供給我們的 Directives

DirectivesAngular built-in

Directives客製化

No more time, 我們跳過...

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

Scopes

1. View 跟 Controller 利用它來做

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

溝通

View 跟 Controller 利用 Scope 做溝通

2. $scope 是一個簡單的 Data Model

儘管 Angular 加了一些 function 在裡面但別想的太難

3. Scope 之間的關係就像

一個 App 裡有很多的 scope，

$rootScope.money = ‘1億’;

<body ng-app>

{{ money }} => 1億

<body ng-app>

<div ng-controller=“UncleCtrl”>

<div ng-controller=“FatherCtrl”>

{{ money }} => 1億

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

{{ money }} => 1億


<body ng-app>

<div ng-controller=“UncleCtrl”>

<div ng-controller=“FatherCtrl”>

{{ money }} => 1億

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

{{ money }} => 1億


$scope.wife = ‘林依晨’;{{ wife }} => 林依晨

$scope.wife = ‘桂綸鎂’;{{ 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”]

• module.controller(name, function)

• module.service(name, function)

• module.directive(name, function)

• module.filter(name, function)

• …

angular.module API

Filter

Service

Directive

Controller

…etc

Module

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

Filter

Service

Directive

Controller

…etc

Module

ModuleA

ModuleB

ModuleC

Module 讓程式可以被 Reuse

Filter

Service

Directive

Controller

…etc

Module

ModuleA

ModuleB

ModuleC

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

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

可以想像成...

Mrs. Controller

Mrs. Controller

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

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

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

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

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

所以...

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 = …; } );

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 = …; } );

Services

Mrs. Controller Mrs. Controller 2

2. Singleton

1. 邏輯可以共同使用

3. Controller 更瘦了

·• Angular built-in service 像 $http、$location 等

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

Services 備註

module.service()

module.provider()module.factory() = 不同方法，但都是為了創建 Service

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

app.controller(‘thinHottyCtrl’,

function ($scope, hottyService) {

$scope.hottyService = hottyService;

}

);

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

名稱必須正確

angular.module(‘a’, [‘b’])

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

);

找人，總是要那個人曾經活過

確保它是存在的

angular.module(‘b’, [])

.service(‘bService’, function () {}

);

所以，如果你要的東西定義在其他模組，

請記得要 import 那個模組

app.controller(‘thinHottyCtrl’,

function ($scope, hottyService) {…}

);app.controller(‘thinHottyCtrl’,

function (hottyService, $scope) {…});

=排序並不重要

app.service(‘aService’,

function (bService) {…});

app.service(‘bService’,

function (aService) {…});

無法互相依賴

DI 的好處

app.controller(‘thinHottyCtrl1’,

function ($scope, hottyService) {…});



function HottyServiceA() {…};

app.service(‘hottyService’, HottyServiceA);

鬆耦合



app.service(‘hottyService’, HottyServiceB);

function HottyServiceA() {…};



function HottyServiceB() {…};

Keywords in Round 2

Services

• $http

Concepts in Round 2

• Modules

• Services

• Dependency Injection

Round 3

接下來，

交給你盡情發揮...

https://github.com/shiningjason1989/ng-tutorial

You can get sources on

https://github.com/shiningjason1989/ng-tutorial

Now, you know How to use it

Scopes

Controllers

Services

Directives

Dependency Injection

…

Finally, What is it

HTML enhanced

for web apps

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

歡迎您找我：）

By Jason Chung - [email protected]

達暉資訊

mailto:[email protected]?subject=

Technology

AngularJS training in Luster