AngularJS training in Luster

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

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

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

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

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

View User Interface Model Domain-specific data 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(…); }); <input id=“input2”>

$(“#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); ! }); <input id=“input1”> <input id=“input2”> $(“#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！

VS Two way data binding DOM 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… 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 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 Directives Angular 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億 $rootScope.money = ‘1億’;

<body ng-app> <div ng-controller=“UncleCtrl”> <div ng-controller=“FatherCtrl”> {{ money }} =>
1億 $scope.money = ‘2億’; {{ money }} => 2億 {{ money }} => 1億 $rootScope.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. 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 = …; } );

當你的 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) {…}); app.controller(‘thinHottyCtrl2’, function ($scope,
hottyService) {…} function HottyServiceA() {…}; app.service(‘hottyService’, HottyServiceA);

鬆耦合 app.controller(‘thinHottyCtrl1’, function ($scope, hottyService) {…}); app.service(‘hottyService’, HottyServiceB); function HottyServiceA()
{…}; app.controller(‘thinHottyCtrl2’, function ($scope, hottyService) {…} 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

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] 達暉資訊

AngularJS training in Luster

AngularJS training in Luster

More Decks by shiningjason1989

Other Decks in Technology

Featured

Transcript