View
9.592
Download
5
Category
Preview:
DESCRIPTION
2014 達暉資訊教育訓練課程 - AngularJS 課程簡介： 想要開發複雜的互動網頁，卻被拉哩拉咂的 JS 和 HTML 搞得暈頭轉向？ 還在為處理大量的動態資料顯示感到厭煩？ 想猶如造物主般的自己創造自己的 HTML 標籤？ 來試試 AngularJS 吧 ~ ＊MVVM 讓你的 Code 清爽又乾淨。 ＊2-way Data Binding 保證你藥到病除。 ＊Directive 讓你擴展 HTML，享受自在的樂趣。 AngularJS 是一個極其優美的前端架構，使用它，讓你的開發路更有趣，更有成就感～
Citation preview
AngularJS!
2014 - 達暉資訊 - 教育訓練系列課程
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
ModelDomain-specific data
Send notifications
ViewUser Interface
ModelDomain-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！
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
·•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億
$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. 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) {…});
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 - jason@lustertech.net
達暉資訊
Recommended