Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

觀落陰 AngularJS

Avatar for JohnsonLu JohnsonLu
July 24, 2014
130
2

觀落陰 AngularJS

Avatar for JohnsonLu

JohnsonLu

July 24, 2014

More Decks by JohnsonLu

See All by JohnsonLu
Git 九淺一深
Avatar for JohnsonLu johnson4932
0
400
Laravel 九淺一深
Avatar for JohnsonLu johnson4932
2
250

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
320
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
580
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
13
39k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
480
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
500
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k

Transcript

  1. 觀落陰 AngularJS JohnsonLu 1

  2. None

  3. • Introduction • Bootstrapping • Two-way Data Binding • Controller

    and Scopes • XHRs • Routing • $inject • Directives 3

  4. Introduction 4

  5. What’s AngularJS • By Google • MVWTF Framework http://goo.gl/WU42rD !

    ! 5

  6. AngularJS 特性 • Two Way Data-Binding • Model • MVC

    • Dependency Injection • Directives 6

  7. Dependency Injection • If your serviceA depends on dependencyB !

    function serviceA(dependencyB) { return { id: dependencyB.getId() }; } ! ! ! 7

  8. 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

  9. Bootstrapping 9

  10. Bootstrapping • Include • <script src=“angular.min.js"></script> • Directive • <html

    ng-app> ! 10

  11. 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

  12. Bootstrapping Filter • Demo 2 http://jsfiddle.net/JohnsonLu/s34eX/ ! {{ 9999 |

    number}} {{9999 + 1 | number:2}} {{999 * 2 | currency}} {{'Hello' | uppercase}} {{'Hello' | lowercase}} ! 12

  13. Bootstrapping ng-bind • 使⽤用者體驗 • 露出。。。。 ! ! ! 13

  14. Bootstrapping ng-bind • Demo 3 http://jsfiddle.net/JohnsonLu/3zb3Q/ ! ! <span ng-bind="9999

    | number"></ span> <span ng-bind="'<div>Hello</ div>'"></span> ! 14

  15. Bootstrapping • 1. 最⼀一開始會先建⽴立⼀一個⽤用來 作 dependency injection 的 injector •

    2. injector 建⽴立⼀一個 root scope • 3. Angular 從 ngApp root 開始 ⾛走訪 DOM, 把每個遇到的 directives 都 bind value

  16. Bootstrapping • Scope Life Cycle 16

  17. Two-way Data Binding 17

  18. 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

  19. Controller and Scopes 19

  20. Controller and Scopes • Scope 是 Controller 的作⽤用域 • AngularJS

    的 Controller 中，⼀一個 Controller 會有相對 應的 Scope ! ! ! 20

  21. Basic Controller function AlbumCtrl($scope) { $scope.name = 'Johnson'; $scope.meta =

    [ {'upc':'000000005', 'description':'05 description'} ]; ! $scope.show = function() { alert($scope.name); }; } 21

  22. 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

  23. Basic Controller • Demo 5 http://jsfiddle.net/JohnsonLu/5nz4K/ ! ! ! 23

  24. Use Module • Demo 6 http://jsfiddle.net/JohnsonLu/3HhGF/ ! // module(name, requires)

    var ballApp = angular.module('BallApp', []); ! ballApp.controller('AlbumCtrl', function($scope) {}); ! 24

  25. $watch • $scope 中的 $watch 可以監控 $scope 的資訊 • Demo

    7 http://jsfiddle.net/JohnsonLu/zZj4b/ ! $scope.$watch('age', function(){ if ($scope.age > 20) { alert('Too old'); } }); 25

  26. XHRs 26

  27. $http • AJAX • POST use Content-Type : application/json !

    ! ! ! 27

  28. $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

  29. $http POST $http.post('url', param).success(function(data) {}); ! ! ! ! 29

  30. BUT 30

  31. $http POST <?php $value = json_decode(file_get_contents('php:/ /input')); ! ! !

    31

  32. Handle Serialize • Demo 9 http://jsfiddle.net/JohnsonLu/nvJTD/ ! ! ! 32

  33. Routing 33

  34. 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

  35. Routing • Demo 10 http://goo.gl/EoVdkU ! ! ! ! 35

  36. $inject 36

  37. $inject • 在 Controller 傳⼊入參數時，如果要使⽤用特定的物 件必須將名稱設定成固定的關鍵字(ex: $scope, $http) • 但是如果要將

    javascript minification 的話，帶⼊入 的參數名稱勢必會被取代，因此可以透過 AngularJS 中的 $inject 解決這個問題 37

  38. $inject ! var MyCtrl = function (a, b) { a.name

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

  39. Directives 39

  40. Directive Definition Object • priority • priority 是⽤用來負責控制優先權，決定哪⼀一個語 法要先執⾏行，預設是 0

    (ng-repeat 的 priority 是 1000) • terminal • 如果設為true，在有設priority的多個directive 下，執⾏行到此directive之後就會停⽌止 40

  41. 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

  42. Directive Definition Object • template • 使⽤用template render html •

    replace • 若為true則會⽤用template取代原本的HTML元素，若為 false會將元素塞到到原本的tag裡⾯面 • Demo 11 http://jsfiddle.net/JohnsonLu/2UxfR/ 42

  43. Directive Definition Object • transclude • 設為true可以將原本的HTML的內容移到template定 義的元素裡 • Demo

    12 http://jsfiddle.net/JohnsonLu/W8WNN/ ! ! 43

  44. Directive Definition Object • compile • compile 是針對我們⾃自訂的 directive 進⾏行運作上的

    調整 • link • link 是負責處理資料的binding和初始化 • 這個⽅方法只有在 compile 沒有定義時才可以使⽤用 • Demo 13 http://jsfiddle.net/JohnsonLu/W9y6B/ 44

  45. Directive Definition Object • controller • 可以為 Directive 定義⼀一個controller，可透過 Dependency

    Injection 帶⼊入 $scope、$element、$attrs、$transclude • Demo 14 http://jsfiddle.net/JohnsonLu/ej2m9/ • require • require 是設定 directive 之間的溝通 ! 45

  46. 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

  47. 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. 參考資料 48

  49. • AngularJS https://docs.angularjs.org/tutorial • 地獄遊記的⼀一張圖 49

  50. Thanks