觀落陰 AngularJS

觀落陰 AngularJS JohnsonLu 1

• 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://jsﬁddle.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://jsﬁddle.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://jsﬁddle.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>  <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://jsﬁddle.net/JohnsonLu/5nz4K/ ! ! ! 23

Use Module • Demo 6 http://jsﬁddle.net/JohnsonLu/3HhGF/ ! // module(name, requires)
var ballApp = angular.module('BallApp', []); ! ballApp.controller('AlbumCtrl', function($scope) {}); ! 24

$watch • $scope 中的 $watch 可以監控 $scope 的資訊 • Demo
7 http://jsﬁddle.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://jsﬁddle.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://jsﬁddle.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 miniﬁcation 的話，帶⼊入的參數名稱勢必會被取代，因此可以透過 AngularJS 中的 $inject 解決這個問題 37

$inject ! var MyCtrl = function (a, b) { a.name
= 'Johnson'; console.log(a.name); } ! MyCtrl.$inject = ['$scope', '$http']; ! ! ! ! 38

Directives 39

Directive Deﬁnition Object • priority • priority 是⽤用來負責控制優先權，決定哪⼀一個語法要先執⾏行，預設是 0
(ng-repeat 的 priority 是 1000) • terminal • 如果設為true，在有設priority的多個directive 下，執⾏行到此directive之後就會停⽌止 40

Directive Deﬁnition 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 Deﬁnition Object • template • 使⽤用template render html •
replace • 若為true則會⽤用template取代原本的HTML元素，若為 false會將元素塞到到原本的tag裡⾯面 • Demo 11 http://jsﬁddle.net/JohnsonLu/2UxfR/ 42

Directive Deﬁnition Object • transclude • 設為true可以將原本的HTML的內容移到template定義的元素裡 • Demo
12 http://jsﬁddle.net/JohnsonLu/W8WNN/ ! ! 43

Directive Deﬁnition Object • compile • compile 是針對我們⾃自訂的 directive 進⾏行運作上的
調整 • link • link 是負責處理資料的binding和初始化 • 這個⽅方法只有在 compile 沒有定義時才可以使⽤用 • Demo 13 http://jsﬁddle.net/JohnsonLu/W9y6B/ 44

Directive Deﬁnition Object • controller • 可以為 Directive 定義⼀一個controller，可透過 Dependency
Injection 帶⼊入 $scope、$element、$attrs、$transclude • Demo 14 http://jsﬁddle.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

觀落陰 AngularJS

觀落陰 AngularJS

More Decks by JohnsonLu

Featured

Transcript