Upgrade to Pro — share decks privately, control downloads, hide ads and more …

觀落陰 AngularJS

Avatar for JohnsonLu JohnsonLu
July 24, 2014
2
120

觀落陰 AngularJS

Avatar for JohnsonLu

JohnsonLu

July 24, 2014
Tweet

More Decks by JohnsonLu

See All by JohnsonLu
Git 九淺一深
Avatar for JohnsonLu johnson4932
0
340
Laravel 九淺一深
Avatar for JohnsonLu johnson4932
2
230

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
710
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
17
950
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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