Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
觀落陰 AngularJS
Search
JohnsonLu
July 24, 2014
2
100
觀落陰 AngularJS
JohnsonLu
July 24, 2014
Tweet
Share
More Decks by JohnsonLu
See All by JohnsonLu
Git 九淺一深
johnson4932
0
210
Laravel 九淺一深
johnson4932
2
210
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Designing for Performance
lara
601
67k
Product Roadmaps are Hard
iamctodd
43
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
For a Future-Friendly Web
brad_frost
170
8.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
What's in a price? How to price your products and services
michaelherold
236
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Thoughts on Productivity
jonyablonski
57
3.8k
Transcript
觀落陰 AngularJS JohnsonLu 1
None
• Introduction • Bootstrapping • Two-way Data Binding • Controller
and Scopes • XHRs • Routing • $inject • Directives 3
Introduction 4
What’s AngularJS • By Google • MVWTF Framework http://goo.gl/WU42rD !
! 5
AngularJS 特性 • Two Way Data-Binding • Model • MVC
• Dependency Injection • Directives 6
Dependency Injection • If your serviceA depends on dependencyB !
function serviceA(dependencyB) { return { id: dependencyB.getId() }; } ! ! ! 7
Dependency Injection • Registering the Component ! var fn =
(function() { function Fn(echo) { this.echo = echo; this.test = function() { return echo.echo(expected); }; } return Fn; })(); $jsInject.register("1", ["echoFn", fn]); ! 8
Bootstrapping 9
Bootstrapping • Include • <script src=“angular.min.js"></script> • Directive • <html
ng-app> ! 10
Bootstrapping Demo 1 http://jsfiddle.net/JohnsonLu/L7eSQ/ ! <!DOCTYPE HTML> <html ng-app> <head>
<meta charset="utf-8"> <title>TEST</title> <script src="//ajax.googleapis.com/ajax/ libs/angularjs/1.2.17/angular.min.js"></script> </head> <body> {{5 + 2}} </body> </html> 11
Bootstrapping Filter • Demo 2 http://jsfiddle.net/JohnsonLu/s34eX/ ! {{ 9999 |
number}} {{9999 + 1 | number:2}} {{999 * 2 | currency}} {{'Hello' | uppercase}} {{'Hello' | lowercase}} ! 12
Bootstrapping ng-bind • 使⽤用者體驗 • 露出。。。。 ! ! ! 13
Bootstrapping ng-bind • Demo 3 http://jsfiddle.net/JohnsonLu/3zb3Q/ ! ! <span ng-bind="9999
| number"></ span> <span ng-bind="'<div>Hello</ div>'"></span> ! 14
Bootstrapping • 1. 最⼀一開始會先建⽴立⼀一個⽤用來 作 dependency injection 的 injector •
2. injector 建⽴立⼀一個 root scope • 3. Angular 從 ngApp root 開始 ⾛走訪 DOM, 把每個遇到的 directives 都 bind value
Bootstrapping • Scope Life Cycle 16
Two-way Data Binding 17
Two-way Data Binding • Demo 4 http://jsfiddle.net/JohnsonLu/cL3ws/ ! <div ng-app>
<input ng-model="yourName" placeholder="Your Name"> <p>Hello, {{ yourName || 'Guest' }}</p> </div> 18
Controller and Scopes 19
Controller and Scopes • Scope 是 Controller 的作⽤用域 • AngularJS
的 Controller 中,⼀一個 Controller 會有相對 應的 Scope ! ! ! 20
Basic Controller function AlbumCtrl($scope) { $scope.name = 'Johnson'; $scope.meta =
[ {'upc':'000000005', 'description':'05 description'} ]; ! $scope.show = function() { alert($scope.name); }; } 21
Basic Controller <div ng-controller="AlbumCtrl"> <input ng-model="name"> <button ng-click="show()">Show Name</ button>
<ul> <!-- foreach --> <li ng-repeat="album in meta"> <a href="#" data- upc="{{album.upc}}" ng- bind="album.description"></a> </li> </ul> </div> 22
Basic Controller • Demo 5 http://jsfiddle.net/JohnsonLu/5nz4K/ ! ! ! 23
Use Module • Demo 6 http://jsfiddle.net/JohnsonLu/3HhGF/ ! // module(name, requires)
var ballApp = angular.module('BallApp', []); ! ballApp.controller('AlbumCtrl', function($scope) {}); ! 24
$watch • $scope 中的 $watch 可以監控 $scope 的資訊 • Demo
7 http://jsfiddle.net/JohnsonLu/zZj4b/ ! $scope.$watch('age', function(){ if ($scope.age > 20) { alert('Too old'); } }); 25
XHRs 26
$http • AJAX • POST use Content-Type : application/json !
! ! ! 27
$http GET • Demo 8 http://jsfiddle.net/JohnsonLu/jqqwB/ ! $http({ method: 'GET',
url: '', params: { name: 'Johnson' } }) .success(function(data, status, headers, config) { $scope.data = data; }) .error(function(data, status, headers, config) { // Error }); 28
$http POST $http.post('url', param).success(function(data) {}); ! ! ! ! 29
BUT 30
$http POST <?php $value = json_decode(file_get_contents('php:/ /input')); ! ! !
31
Handle Serialize • Demo 9 http://jsfiddle.net/JohnsonLu/nvJTD/ ! ! ! 32
Routing 33
Routing <script src="https://code.angularjs.org/1.2.17/angular- route.js"></script> var ballApp = angular.module('BallApp', ['ngRoute'], function($routeProvider)
{ $routeProvider.when('/', { templateUrl: 'view.html' }) .when('/edit', { templateUrl: 'edit.html' }) .otherwise({ redirectTo: '/' }); }); ! ballApp.controller('NameCtrl', function($scope) {}); 34
Routing • Demo 10 http://goo.gl/EoVdkU ! ! ! ! 35
$inject 36
$inject • 在 Controller 傳⼊入參數時,如果要使⽤用特定的物 件必須將名稱設定成固定的關鍵字(ex: $scope, $http) • 但是如果要將
javascript minification 的話,帶⼊入 的參數名稱勢必會被取代,因此可以透過 AngularJS 中的 $inject 解決這個問題 37
$inject ! var MyCtrl = function (a, b) { a.name
= 'Johnson'; console.log(a.name); } ! MyCtrl.$inject = ['$scope', '$http']; ! ! ! ! 38
Directives 39
Directive Definition Object • priority • priority 是⽤用來負責控制優先權,決定哪⼀一個語 法要先執⾏行,預設是 0
(ng-repeat 的 priority 是 1000) • terminal • 如果設為true,在有設priority的多個directive 下,執⾏行到此directive之後就會停⽌止 40
Directive Definition Object • restrict • restrict 有四個選擇可以讓你決定⾃自訂的語法要是什麼型態 • E
– 元素(Element name) • <pod></pod> • A – 屬性(Attribute) (default) • <div pod=“xxx”></div> • C – 類別(Class) • <div class=“pod: xxx”></div> • M – 註解(Comment) 41
Directive Definition Object • template • 使⽤用template render html •
replace • 若為true則會⽤用template取代原本的HTML元素,若為 false會將元素塞到到原本的tag裡⾯面 • Demo 11 http://jsfiddle.net/JohnsonLu/2UxfR/ 42
Directive Definition Object • transclude • 設為true可以將原本的HTML的內容移到template定 義的元素裡 • Demo
12 http://jsfiddle.net/JohnsonLu/W8WNN/ ! ! 43
Directive Definition Object • compile • compile 是針對我們⾃自訂的 directive 進⾏行運作上的
調整 • link • link 是負責處理資料的binding和初始化 • 這個⽅方法只有在 compile 沒有定義時才可以使⽤用 • Demo 13 http://jsfiddle.net/JohnsonLu/W9y6B/ 44
Directive Definition Object • controller • 可以為 Directive 定義⼀一個controller,可透過 Dependency
Injection 帶⼊入 $scope、$element、$attrs、$transclude • Demo 14 http://jsfiddle.net/JohnsonLu/ej2m9/ • require • require 是設定 directive 之間的溝通 ! 45
Directive Definition Object • scope • 當 scope 為 false
時,會使⽤用原先 Controller 的 scope • Demo 15 http://jsfiddle.net/JohnsonLu/bZ5RJ/ • 當 scope 為 true 時,會建⽴立⼀一個繼承 parent scope 的物件 • Demo 16 http://jsfiddle.net/JohnsonLu/D2259/ • 當 scope 為物件時,會建⽴立新的 isolate scope • Demo 17 http://jsfiddle.net/JohnsonLu/fjb49/ 46
Directive Definition Object • scope • Text Binding • Demo
18 http://jsfiddle.net/JohnsonLu/d2sch/ • Two-way Binding • Demo 19 http://jsfiddle.net/JohnsonLu/2qeCL/ • Method binding • Demo 20 http://jsfiddle.net/JohnsonLu/5NWNt/ 47
參考資料 48
• AngularJS https://docs.angularjs.org/tutorial • 地獄遊記的⼀一張圖 49
Thanks