Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
About

MVVM

View
User Interface
Data bindings
and
Commands

Send notifications

Send notifications

View Model

Model

St...
About
View

MVW

User Interface

Whatever works
for you

Model
Domain-specific data
它改

麼?
什
變了
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, ...”,無法同時顯⽰示在不同的...
Can not
<input id=“input”>
<div id=“output”>
$(“#input”).keyup(function () {
$(“#output”).html(…);
});
<input id=“input1”>...
<input id=“input1”>

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

<div id=“output1”>

!
$(“#output1”).html(v...
<input id=“input1”>

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

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

!
...
input1

Value

output1
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.	  有時候無法從	...
Hello world in AngularJS
幫我們做了什麼?
What’s So Good in AngularJS
·•	 	 三個步驟,搞定!	 
·•	 	 Wow,	 no	 JS!	 
·•	 	 Readable!
VS
DOM manipulation
我們必須處理很多 event

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

Two way data binding

我們專注	 data

宣告式的開發思維
適合處理資料與...
So,

Why we use it ?
程式碼更簡潔,更易讀!

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

我們只需要注意	 data!

還有,不用加班!
進入 AngularJS 的世界
很多的

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>
高雄	 	...
而且以後的我們,	 

只要維護一份 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億

$rootScope.money = ‘1億’;

<div ng-controller=“UncleCtrl”>

{{ money }} => 2億

<div ng-co...
<body ng-app>

{{ money }} => 1億

$rootScope.money = ‘1億’;

<div ng-controller=“UncleCtrl”>

{{ money }} => 2億

$scope.mon...
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, func...
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
Mrs. Controller
app.controller(‘fatHottyCtrl’,
function ($scope, $http) {
$scope.findAllHotties =
function () {
$http.get(...
app.controller(‘fatHottyCtrl’,
function ($scope, $http) {
$scope.findAllHotties =
function () {
$http.get(…).then(…);
};
$...
當你的	 App	 變得越來越大...
有東西重複了
=工程師的禁忌

所以...
app.controller(‘fatHottyCtrl’,
function ($scope, $http) {
$scope.findAllHotties =
function () {
$http.get(…).then(…);
};
$...
app.controller(‘thinHottyCtrl’,
function ($scope, hottyService) {
$scope.hottyService = hottyService;
}
);
app.controller(...
Services
Mrs. Controller

Mrs. Controller 2

1.	 邏輯可以共同使用

3.	 Controller	 更瘦了
2.	 Singleton
Services 備註
·• Angular

built-in service	 像	 $http、$location	 等	 

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

module.service()
mo...
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’, fun...
app.controller(‘thinHottyCtrl’,
function ($scope, hottyService) {…}

=

);

app.controller(‘thinHottyCtrl’,

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

無法互相依賴
DI	 的好處
app.controller(‘thinHottyCtrl1’,
function ($scope, hottyService) {…});

app.controller(‘thinHottyCtrl2’,

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

app.controller(‘thinHottyCtrl2’,

function ($s...
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

Dependency Injection
…
Finally,

What is it

HTML enhanced
for web apps
謝謝您的沒有睡著
你有嗎?如果你錯過了什麼,或者熱血的想找人討論,	 

歡迎您找我:)

達暉資訊
By Jason Chung jason@lustertech.net
AngularJS training in Luster
AngularJS training in Luster
Upcoming SlideShare
Loading in …5
×

AngularJS training in Luster

13,522 views

Published on

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

課程簡介:
想要開發複雜的互動網頁,卻被拉哩拉咂的 JS 和 HTML 搞得暈頭轉向?

還在為處理大量的動態資料顯示感到厭煩?

想猶如造物主般的自己創造自己的 HTML 標籤?

來試試 AngularJS 吧 ~
*MVVM 讓你的 Code 清爽又乾淨。
*2-way Data Binding 保證你藥到病除。
*Directive 讓你擴展 HTML,享受自在的樂趣。

AngularJS 是一個極其優美的前端架構,使用它,讓你的開發路更有趣,更有成就感~

Published in: Technology
  • Be the first to comment

AngularJS training in Luster

  1. 1. AngularJS ! 2014 - 達暉資訊 - 教育訓練系列課程
  2. 2. Me - 鐘友志 Jason Chung - 軟體工程師 (達暉資訊有限公司) - jason@lustertech.net
  3. 3. What is it 1. by 2. JavaScript MVW Framework Model-View-Whatever
  4. 4. 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
  5. 5. About MVVM View User Interface Data bindings and Commands Send notifications Send notifications View Model Model State and Operations Domain-specific data Update
  6. 6. About View MVW User Interface Whatever works for you Model Domain-specific data
  7. 7. 它改 麼? 什 變了
  8. 8. Let’s coding for ! Hello world
  9. 9. Hello world in JS
  10. 10. Hello world in jQuery
  11. 11. What’s the problem in JS & jQuery?(多選) 1. 當需求增加,程式碼可能重複 2. 難以得知某個 HTML element 的所有⾏行為 3. 輸入了 “Hello, ...”,無法同時顯⽰示在不同的 <DIV> 上 4. 改變了某個 HTML element 的 id 或 class,可能照成無法 預期的錯誤 5. 使⽤用 jQuery 的 selector 很難 debug
  12. 12. Can not <input id=“input”> <div id=“output”> $(“#input”).keyup(function () { $(“#output”).html(…); }); <input id=“input1”> <div id=“output1”> $(“#input1”).keyup(function () { $(“#output1”).html(…); }); <input id=“input2”> <div id=“output2”> $(“#input2”).keyup(function () { $(“#output2”).html(…); });
  13. 13. <input id=“input1”> $(“#input1”).keyup(function () { var val = $(this).val(); <div id=“output1”> ! $(“#output1”).html(val); ! }); 如果需求改變...
  14. 14. <input id=“input1”> $(“#input1”).keyup(function () { var val = $(this).val(); <div id=“output1”> <input id=“input2”> ! $(“#output1”).html(val); ! $(“#input2”).val(val); }); $(“#input2”).keyup(function () { var val = $(this).val(); ! $(“#input1”).val(val) $(“#output1”).html(val); 如果需求改變... });
  15. 15. input1 Value output1
  16. 16. input2 input1 Value output1 output2
  17. 17. input2 input1 input3 Value output1 input4 …WTF output2
  18. 18. 當 HTML 跟 JS 分開時... ? ?
  19. 19. What’s the problem in jQuery 1. 加班! 在幹嘛? 維護 id/class 到底為了什麼維護 id/class? 2. 操作 DOM,因為要處理很多的 UI 互動 3. 有時候無法從 HTML 中,看出元素的行為
  20. 20. Hello world in AngularJS
  21. 21. 幫我們做了什麼?
  22. 22. What’s So Good in AngularJS ·• 三個步驟,搞定! ·• Wow, no JS! ·• Readable!
  23. 23. VS DOM manipulation 我們必須處理很多 event 編程式的開發思維 很多很棒的 function IE 支援 6 以上 Two way data binding 我們專注 data 宣告式的開發思維 適合處理資料與 UI 的互動 IE 支援 8 以上
  24. 24. So, Why we use it ? 程式碼更簡潔,更易讀! Two way data binding 讓我們 不再關心 DOM 的操作 我們只需要注意 data! 還有,不用加班!
  25. 25. 進入 AngularJS 的世界
  26. 26. 很多的 Concepts Scopes Dependency Injection Directives Services Controllers etc… Route Template Module Promise
  27. 27. 所以,我們從...
  28. 28. Web App 開始 簡單的 如果能現學現賣,那就理想了
  29. 29. 那,要做什麼呢?
  30. 30. 妹 男生居多,那就 ·• 差不多是這樣 http://ilovehotty.parseapp.com 貼心提醒:別瀏覽太多次,每月連線次數有限! ·• 請自行更換主題,例如:暗黑版、帥哥版...
  31. 31. ·• Topic:我愛正妹 • Requirement: 1. 簡單的清單(列出所有追蹤中的正妹) 2. 可關鍵字搜尋 3. 可排序(根據喜愛的程度) 4. CRUD(人的喜好,總是會隨時間改變)
  32. 32. Let’s Coding for 我愛正妹 Round 1
  33. 33. ng-app、ng-controller… ng-model、ng-repeat、ng-click… 到底是什麼東西?
  34. 34. Directives 讓我們有能力新增自己的 HTML 語法
  35. 35. 原 HTML <ul><li> <audio> Browser 幫我們做的事
  36. 36. 如果你想要 那麼, 這就是 Directive 要幫我們解決的事!
  37. 37. Directives 其實是 = Template (HTML) + Behavior (JavaScript)
  38. 38. 之後,我們就可以 目前所在地 Ctrl+C <weather location=“local”></weather> 臺北 Ctrl+V <weather location=“taipei”></weather> 高雄 Ctrl+V <weather location=“Kaohsiung”></weather> Ctrl+V <weather location=“somewhere”></weather>
  39. 39. 而且以後的我們, 只要維護一份 Code JavaScript (Behavior) HTML (Template)
  40. 40. Directives 小結 ·•封裝 複雜的邏輯和架構 ·•Reuse UI 元件
  41. 41. Angular built-in Directives ng-app、ng-click… 就是 Angular 提供給我們的 Directives
  42. 42. 客製化 Directives No more time, 我們跳過...
  43. 43. 但是,還記得 Directive 幫我們解決什麼嗎?
  44. 44. Scopes View 和 Controller 都能夠存取 $scope,所以 1. View 跟 Controller 利用它來做 溝通
  45. 45. View 跟 Controller 利用 Scope 做溝通
  46. 46. 2. $scope 是一個簡單的 Data Model 儘管 Angular 加了一些 function 在裡面 但別想的太難
  47. 47. 一個 App 裡有很多的 scope, 3. Scope 之間的關係就像
  48. 48. <body ng-app> {{ money }} => 1億 $rootScope.money = ‘1億’;
  49. 49. <body ng-app> {{ money }} => 1億 $rootScope.money = ‘1億’; <div ng-controller=“UncleCtrl”> {{ money }} => 2億 <div ng-controller=“FatherCtrl”> {{ money }} => 1億 $scope.money = ‘2億’;
  50. 50. <body ng-app> {{ money }} => 1億 $rootScope.money = ‘1億’; <div ng-controller=“UncleCtrl”> {{ money }} => 2億 $scope.money = ‘2億’; {{ wife }} => 林依晨 $scope.wife = ‘林依晨’; <div ng-controller=“FatherCtrl”> {{ money }} => 1億 {{ wife }} => 桂綸鎂 $scope.wife = ‘桂綸鎂’;
  51. 51. 3. Scope 之間的關係就像 爺爺 ⼤大伯 堂哥 親屬關係 ⼆二伯 可繼承父親屬性 ⽗父親 我 ⼩小弟 兄弟之間的屬性不會影響
  52. 52. Controllers 定義和初始某一個 View 上的功能和資料 並將它們綁定在 $scope 上
  53. 53. 還記得這張圖嗎? 它們是生命共同體
  54. 54. Keywords in Round 1 Directives • ng-app • ng-controller • ng-model • ng-repeat • ng-click
  55. 55. Keywords in Round 1 Filters • filter • orderBy
  56. 56. Keywords in Round 1 Services • $scope
  57. 57. Concepts in Round 1 • Directives • Scopes • Controllers
  58. 58. 接下來, 我們要做什麼呢?
  59. 59. Let’s Coding for 我愛正妹 Round 2
  60. 60. Modules setter angular.module('moduleName', []); getter 依賴的模組 angular.module('moduleName'); Ex: [“module1”, “module2”] !
  61. 61. angular.module API • module.controller(name, function) • module.service(name, function) • module.directive(name, function) • module.filter(name, function) • …
  62. 62. Module Filter Service Directive Controller …etc Module 讓我們方便地打包這些東西
  63. 63. ModuleA ModuleB Module 讓程式可以被 Reuse Module Filter Service Directive Controller …etc ModuleC
  64. 64. ModuleA ModuleB Module 會幫我們處理複雜的依賴關係 Module Filter Service Directive Controller …etc ModuleC
  65. 65. Services 一個 singleton 物件,Controller 們可以共享它
  66. 66. 可以想像成...
  67. 67. Mrs. Controller
  68. 68. Mrs. Controller app.controller(‘fatHottyCtrl’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; } );
  69. 69. app.controller(‘fatHottyCtrl’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; } ); Mrs. Controller app.controller(‘fatHottyCtrl2’, function ($scope, $http) { $scope.findAllHotties = function () { $http.get(…).then(…); }; $scope.findOneHotty = …; $scope.createHotty = …; $scope.updateHotty = …; $scope.deleteHotty = …; } ); Mrs. Controller 2
  70. 70. 當你的 App 變得越來越大...
  71. 71. 有東西重複了 =工程師的禁忌 所以...
  72. 72. 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 = …; } );
  73. 73. app.controller(‘thinHottyCtrl’, function ($scope, hottyService) { $scope.hottyService = hottyService; } ); app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) { $scope.hottyService = hottyService; } ); app.service(‘hottyService’, function ($http) { this.findAllHotties = function () { $http… }; this.findOneHotty = …; this.createHotty = …; this.updateHotty = …; this.deleteHotty = …; } );
  74. 74. Services Mrs. Controller Mrs. Controller 2 1. 邏輯可以共同使用 3. Controller 更瘦了 2. Singleton
  75. 75. Services 備註 ·• Angular built-in service 像 $http、$location 等 ·• Angular 提供我們很多方法創建自己的 Service module.service() module.factory() module.provider() = 不同方法,但都是為了創建 Service
  76. 76. Dependency Injection 你要什麼,跟它講,然後,它就給你什麼
  77. 77. app.controller(‘thinHottyCtrl’, function ($scope, hottyService) { $scope.hottyService = hottyService; } ); 名稱必須正確 Angular 會幫你管理物件的生命週期 你只需要很明確的跟它要
  78. 78. angular.module(‘a’, [‘b’]) .service(‘aService’, function (bService) {} ); angular.module(‘b’, []) .service(‘bService’, function () {} ); 確保它是存在的 找人,總是要那個人曾經活過 所以,如果你要的東西定義在其他模組, 請記得要 import 那個模組
  79. 79. app.controller(‘thinHottyCtrl’, function ($scope, hottyService) {…} = ); app.controller(‘thinHottyCtrl’, function (hottyService, $scope) {… 排序並不重要
  80. 80. app.service(‘aService’, function (bService) {…}); app.service(‘bService’, function (aService) {…}); 無法互相依賴
  81. 81. DI 的好處 app.controller(‘thinHottyCtrl1’, function ($scope, hottyService) {…}); app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) {…} app.service(‘hottyService’, HottyServiceA); function HottyServiceA() {…};
  82. 82. 鬆耦合 app.controller(‘thinHottyCtrl1’, function ($scope, hottyService) {…}); app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) {…} app.service(‘hottyService’, HottyServiceB); function HottyServiceA() {…}; function HottyServiceB() {…};
  83. 83. Keywords in Round 2 Services • $http
  84. 84. Concepts in Round 2 • Modules • Services • Dependency Injection
  85. 85. 接下來, 交給你盡情發揮... Round 3
  86. 86. You can get sources on https://github.com/shiningjason1989/ng-tutorial
  87. 87. Now, you know How to use it Scopes Controllers Services Directives Dependency Injection …
  88. 88. Finally, What is it HTML enhanced for web apps
  89. 89. 謝謝您的沒有睡著 你有嗎?如果你錯過了什麼,或者熱血的想找人討論, 歡迎您找我:) 達暉資訊 By Jason Chung jason@lustertech.net

×