AngularJS - TechTalk 3/2/2014

8,593 views

Published on

Published in: Technology, Business

AngularJS - TechTalk 3/2/2014

  1. 1. TechTalk | 3 February 2014 Spyros Ioakeimidis
  2. 2. AngularJS ❖ Seemed a bit weird in the beginning ❖ All these new terms and concepts… !2
  3. 3. Modul es Depen dency Injecti on Provid ws Vie ers Promi ses Servic es Mo s er ilt F els d cto Fa Contro ies r Direct ives llers !3
  4. 4. AngularJS ❖ Made for SPA (Single Page Applications) ❖ It has a learning curve! ❖ Maintained by Google (for some this is good, for others not) ❖ Community keeps increasing !4
  5. 5. AngularJS ❖ MVC principle ❖ Others say it is an SPA framework ❖ Others that it is just a library to help you built a framework ❖ AngularJS is a toolset (extensibility) !5
  6. 6. !6
  7. 7. Modules !7
  8. 8. Modules ❖ app = angular.module(‘myApp’, []) ❖ ❖ It is required when creating a new module (module declaration) ❖ ❖ Use of an array to include other modules app = angular.module(‘myApp’) retrieves an existing module (module reference) Modules cannot be included at runtime !8
  9. 9. Modules ❖ We have a module app ❖ .value() ❖ ❖ global values, good for defaults .constant() ❖ same as Value, but the it is expected to not change ❖ .service() ❖ .factory() ❖ .provider() !9
  10. 10. MVC (or whatever…) !10
  11. 11. W(M)VC ❖ Whatever (Model) ❖ ❖ ❖ It is the $scope, which contains models and functions as well e.g. $scope.event = {‘title’: ‘Placed Event’} View ❖ ❖ HTML markup Controller ❖ An JS object ❖ app.controller(‘MyController’, function{}) ❖ DOM manipulation does not belong to controllers !11
  12. 12. Whatever (Data) stored in $scope of contains View (HTML) communicates with Controller (Business Logic) provides functionality Hiller, Christopher. “Developing an AngularJS Edge.” !12 Directive (DSL in HTML) provides functionality Service (Library)
  13. 13. Scope.models !13
  14. 14. Scope ❖ prototypical inheritance ❖ treat scope as read-only in templates ❖ when binding to templates ng-model=“user.name”, always use a dot ❖ $rootScope ❖ $scope.$apply() ❖ $eval() -> $exceptionHandler(e) -> $digest() ❖ e.g. when observing DOM elements directly in directives !14
  15. 15. Scope ❖ $scope.$watch(‘foo’, function() {}) ❖ observe a model for changes, evaluates by reference ❖ will fire when $scope.foo = ‘’ and then $scope.foo = ‘bar’ ❖ but not when $scope.foo.bar = ‘’ and then $scope.foo.bar = ‘baz’ ❖ can evaluate by value (expensive operation!) ❖ when writing own $watch, it must be fast and it must be idempotent !15
  16. 16. Scope ❖ $scope.$digest() ❖ $scope.$eval() ❖ $scope.{$on, $broadcast, $emit} !16
  17. 17. $emit(‘eventB’, …) $emit(‘eventC’, …) Controller A $emit(‘eventB’, …) $on(‘eventA’, …) $rootScope.$on(‘eventC’, …) $on(‘eventB’, …) $on(‘eventC’, …) $broadcast(‘eventA’, …) Controller B Controller C $broadcast(‘eventA’, …) !17 $emit(‘eventC’, …) $on(‘eventA’, …)
  18. 18. Model ❖ Scope is not the model! ❖ $scope.foo, where the foo is the model ❖ data-binding, <p>{{foo.bar}}</p> ❖ a portion of view is bind to a model ❖ when either one changes, they are both synchronized !18
  19. 19. View !19
  20. 20. View ❖ presentation logic ❖ does not know anything about the controller, nor the controller about it ❖ everything goes through the Scope ❖ integrates with models, directives, filters !20
  21. 21. View ❖ ng-repeat ❖ this would not work
 
 <div ng-repeat=“number in [1, 2, 3]”>
 <input type=“text” ng-model=“number” />
 </div>
 
 but this would work
 
 <div ng-repeat=“number in [{n: 1}, {n: 2}, {n: 3}]”>
 <input type=“text” ng-model="number.n"/>
 </div> ❖ $index, $first, $middle, $last, $event, $parent ❖ ng-click, ng-show, ng-model, ng-change, ng-href … !21
  22. 22. View ❖ orderBy, filter ❖ <div id=“{{post.id}}”
 ng-repeat=“post in posts|
 orderBy:order:descending|
 filter:filter”>
 </div> ❖ in Controller
 $scope.order = ‘date’
 $scope.descending = true ❖ and filter would come from an text box ❖ ngClassEvent, ngClassOdd !22
  23. 23. View ❖ compilation for templates and markup is done in two steps Step 1: compile Step 2: link var linker = $compile(template) var compiled = linker(scope) 1) template examined for directives 1) scope into the link function of its directive 2) AngularJS collects them and 
 2) get back AngularJS element representing
 produces a link function the DOM fragment * no data has been inserted in the template $compile(template)(scope) !23
  24. 24. Controller !24
  25. 25. Controller ❖ they are for the business logic ❖ they are not meant to interact with the DOM ❖ services can be injected to share common functionality with other controllers !25
  26. 26. Dependency Injection ❖ A nice way to create modular applications ❖ it is magic (but not really…) ❖ Angular converts functions to strings .toString() ❖ runs string matching against them ❖ determines from the name of the parameter what you want to inject
 !26
  27. 27. Directives !27
  28. 28. Directives ❖ Create your own DSL ❖ A nice way to include logic in the views ❖ this is where DOM manipulation should happen! ❖ Can have an isolated scope ❖ Defines a linking function ❖ ❖ ❖ is passed a Scope object, an element, and the element’s attributes (optionally a controller inst.) where the logic goes Need a scope, use link. Don’t? Use compile. !28
  29. 29. Directives HTML with HTML with HTML with directives directives directives examines <my-directive> finds compile() returns Scope object link (scope) Hiller, Christopher. “Developing an AngularJS Edge.” !29 returns Compiled template with data
  30. 30. Directives app.directive(‘new-event’, function() {
 return {
 restrict: ‘E’,
 scope: {
 event: ‘=’,
 linked to the parent scope save: ‘=’,
 cancel: ‘=’,
 saveText: ‘@’,
 copied verbatim cancelText: ‘@’
 },
 replace: true,
 template: 
 ‘<div ng-show="event">' +
 ‘<input type=“text” ng-model=“event.temp.title”/><br/>’ +
 ‘<input type=“text” ng-model=“event.temp.subtitle”></../>’ +
 ‘<button ng-click=“cancel(event)”>{{cancelText}}</button>’ +
 ‘<button ng-click=“save(event)”>{{saveText}}</button></div>’
 };
 }); } } !30
  31. 31. Directives <new-event
 event=“event”
 cancel=“cancel”
 save=“save”
 cancel-text=“Cancel”
 save-text=“Save”>
 </new-event> !31 linked to the parent scope copied verbatim
  32. 32. Directives app.directive(‘event-info', function() {
 return {
 restrict: ‘E’,
 replace: true,
 templateUrl: ‘views/eventInfo.html’
 transclude: true,
 scope: {
 startDate: ‘=’, endDate: ‘=’
 },
 link: function(scope, element) { infoButton = element.children()[0].children[0].children[0]
 scope.open = false;
 angular.element(infoButton).bind(‘click’, function() {
 scope.$apply(‘open = !open’);
 });
 };
 };
 }); !32
  33. 33. Directives <div class="event-info">
 <div class="event-info-content">
 <div class="event-title" ng-transclude>
 <span class=“addtional-info-button”>More...</span>
 </div>
 <div class="additional-info>" ng-show="open">
 <div class=“event-start">{{startDate}}</div>
 <div class="event-end">{{endDate}}</div>
 </div>
 </div>
 </div> We could call it like: <event-info start-date=“event.event_start" end-date="event.event_end">
 {{event.title.en}}
 </event-info> !33
  34. 34. Directives ❖ ‘=foo’ links directly to parent scope ❖ ‘@foo’ assigns an attribute to whatever the key is ❖ ‘&foo’ binds expression and executes it against the parent scope ❖ ❖ <my-directive on-close=“hide()”></my-directive> ❖ ❖ in directive definition: scope: {‘close’: ‘&onClose’} in directive’s template: ng-click=“close()” There are also ‘A’, ‘AE’, ‘C’, and ‘M’ restrict options !34
  35. 35. Directives ❖ write reusable and generic directives ❖ the less reusable (involving scopes) the less maintainable they become ❖ write directives with isolated scopes! ❖ share functionality between directives using a controller ❖ long learning curve, but powerful! !35
  36. 36. Service | Factory | Provider !36
  37. 37. Service | Factory | Provider ❖ the backbone of the an AngularJS app ❖ keep the controller from thinking too hard ❖ … and directives have only one function, make it readable and testable (inject services) !37
  38. 38. Service | Factory | Provider Needs a $get Explicitly returns Present during Component Instantiated method something $config() Service Yes No No No Factory No No Yes No Provider Yes Yes No Yes Hiller, Christopher. “Developing an AngularJS Edge.” !38
  39. 39. Service ❖ it is a singleton, instantiated the first time is requested ❖ requires less memory and processing power than the others !39
  40. 40. Promises EventsCtrl (Controller) 1) Calls getEvents() Promise 3) Returns a Promise Events (Service) !40 Server 2) Asks Server for a list of Events
  41. 41. Promises 4) Returns a list of events Server Events (Service) 5) Promise resolved with events data EventsCtrl (Controller) Promise 6) Takes action with data received from resolved promise !41
  42. 42. Factory ❖ it can return a function, object, or primitive ❖ useful for utils !42
  43. 43. Provider ❖ can be configured during initialization ❖ $http is also a provider injects config() $httpProvider injects run() $http !43
  44. 44. Provider Configure with Plugin B in Module.config() Plugin A DialogProvider Plugin B Dialog Uses plugin B at runtime Hiller, Christopher. “Developing an AngularJS Edge.” !44
  45. 45. Filters !45
  46. 46. Filters ❖ execute logic against models only the view cares about ❖ app.filter(‘product’, function() {
 return function(a, b, c) {
 return a * b * c;
 };
 }); ❖ can be used like:
 
 <span>the product is {{a|product:b:c}}</span> ❖ executed often, so keep them simple ❖ they should not have side-effects !46
  47. 47. More… ❖ History ❖ Routing ❖ Compiler ❖ Injector ❖ Template !47
  48. 48. Testing (intro) ❖ Jasmine (behavior-driven testing) ❖ aware of asynchronous events ❖ take advantage of binding information ❖ excellent mock objects ($log) !48
  49. 49. ng-modules ❖ http://ngmodules.org/, currently 440 modules (++) ❖ angular-ui, bootstrap, ui-router ❖ restangular ❖ angular-translate ❖ angular-cache ❖ … !49
  50. 50. built.with.angularjs ❖ http://builtwith.angularjs.org/ ❖ http://www.google.com/doubleclick/
 Create, transact, and manage digital advertising ❖ http://demo.songpane.com/
 Form song set lists (songs, lyrics, chords) ❖ http://www.zaptravel.com/
 Deals for experiences of interest ❖ http://hat.jit.su/
 Distributed scrum planning poker ❖ … !50
  51. 51. References ❖ Hiller, Christopher. “Developing an AngularJS Edge.” ❖ Mastering Web Application Development with AngularJS ❖ Ari Lerner “ng-book - The Complete Book on AngularJS” !51
  52. 52. AAAAngularosum!

×