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

觀落陰 AngularJS

JohnsonLu
July 24, 2014
100

觀落陰 AngularJS

JohnsonLu

July 24, 2014
Tweet

Transcript

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

    and Scopes • XHRs • Routing • $inject • Directives 3
  2. AngularJS 特性 • Two Way Data-Binding • Model • MVC

    • Dependency Injection • Directives 6
  3. Dependency Injection • If your serviceA depends on dependencyB !

    function serviceA(dependencyB) { return { id: dependencyB.getId() }; } ! ! ! 7
  4. 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
  5. 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
  6. Bootstrapping Filter • Demo 2 http://jsfiddle.net/JohnsonLu/s34eX/ ! {{ 9999 |

    number}} {{9999 + 1 | number:2}} {{999 * 2 | currency}} {{'Hello' | uppercase}} {{'Hello' | lowercase}} ! 12
  7. Bootstrapping ng-bind • Demo 3 http://jsfiddle.net/JohnsonLu/3zb3Q/ ! ! <span ng-bind="9999

    | number"></ span> <span ng-bind="'<div>Hello</ div>'"></span> ! 14
  8. Bootstrapping • 1. 最⼀一開始會先建⽴立⼀一個⽤用來 作 dependency injection 的 injector •

    2. injector 建⽴立⼀一個 root scope • 3. Angular 從 ngApp root 開始 ⾛走訪 DOM, 把每個遇到的 directives 都 bind value
  9. 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
  10. Controller and Scopes • Scope 是 Controller 的作⽤用域 • AngularJS

    的 Controller 中,⼀一個 Controller 會有相對 應的 Scope ! ! ! 20
  11. Basic Controller function AlbumCtrl($scope) { $scope.name = 'Johnson'; $scope.meta =

    [ {'upc':'000000005', 'description':'05 description'} ]; ! $scope.show = function() { alert($scope.name); }; } 21
  12. 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
  13. Use Module • Demo 6 http://jsfiddle.net/JohnsonLu/3HhGF/ ! // module(name, requires)

    var ballApp = angular.module('BallApp', []); ! ballApp.controller('AlbumCtrl', function($scope) {}); ! 24
  14. $watch • $scope 中的 $watch 可以監控 $scope 的資訊 • Demo

    7 http://jsfiddle.net/JohnsonLu/zZj4b/ ! $scope.$watch('age', function(){ if ($scope.age > 20) { alert('Too old'); } }); 25
  15. $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
  16. 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
  17. $inject • 在 Controller 傳⼊入參數時,如果要使⽤用特定的物 件必須將名稱設定成固定的關鍵字(ex: $scope, $http) • 但是如果要將

    javascript minification 的話,帶⼊入 的參數名稱勢必會被取代,因此可以透過 AngularJS 中的 $inject 解決這個問題 37
  18. $inject ! var MyCtrl = function (a, b) { a.name

    = 'Johnson'; console.log(a.name); } ! MyCtrl.$inject = ['$scope', '$http']; ! ! ! ! 38
  19. Directive Definition Object • priority • priority 是⽤用來負責控制優先權,決定哪⼀一個語 法要先執⾏行,預設是 0

    (ng-repeat 的 priority 是 1000) • terminal • 如果設為true,在有設priority的多個directive 下,執⾏行到此directive之後就會停⽌止 40
  20. 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
  21. Directive Definition Object • template • 使⽤用template render html •

    replace • 若為true則會⽤用template取代原本的HTML元素,若為 false會將元素塞到到原本的tag裡⾯面 • Demo 11 http://jsfiddle.net/JohnsonLu/2UxfR/ 42
  22. Directive Definition Object • compile • compile 是針對我們⾃自訂的 directive 進⾏行運作上的

    調整 • link • link 是負責處理資料的binding和初始化 • 這個⽅方法只有在 compile 沒有定義時才可以使⽤用 • Demo 13 http://jsfiddle.net/JohnsonLu/W9y6B/ 44
  23. Directive Definition Object • controller • 可以為 Directive 定義⼀一個controller,可透過 Dependency

    Injection 帶⼊入 $scope、$element、$attrs、$transclude • Demo 14 http://jsfiddle.net/JohnsonLu/ej2m9/ • require • require 是設定 directive 之間的溝通 ! 45
  24. 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
  25. 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