Your SlideShare is downloading. ×
0
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS - TechTalk 3/2/2014

7,882

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,882
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TechTalk | 3 February 2014 Spyros Ioakeimidis
  • 2. AngularJS ❖ Seemed a bit weird in the beginning ❖ All these new terms and concepts… !2
  • 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. 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. 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
  • 7. Modules !7
  • 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. 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. MVC (or whatever…) !10
  • 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. 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. Scope.models !13
  • 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. 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. Scope ❖ $scope.$digest() ❖ $scope.$eval() ❖ $scope.{$on, $broadcast, $emit} !16
  • 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. 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. View !19
  • 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. 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. 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. 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. Controller !24
  • 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. 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. Directives !27
  • 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. 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. 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. 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. 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. 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. 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. 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. Service | Factory | Provider !36
  • 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. 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. Service ❖ it is a singleton, instantiated the first time is requested ❖ requires less memory and processing power than the others !39
  • 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. 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. Factory ❖ it can return a function, object, or primitive ❖ useful for utils !42
  • 43. Provider ❖ can be configured during initialization ❖ $http is also a provider injects config() $httpProvider injects run() $http !43
  • 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. Filters !45
  • 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. More… ❖ History ❖ Routing ❖ Compiler ❖ Injector ❖ Template !47
  • 48. Testing (intro) ❖ Jasmine (behavior-driven testing) ❖ aware of asynchronous events ❖ take advantage of binding information ❖ excellent mock objects ($log) !48
  • 49. ng-modules ❖ http://ngmodules.org/, currently 440 modules (++) ❖ angular-ui, bootstrap, ui-router ❖ restangular ❖ angular-translate ❖ angular-cache ❖ … !49
  • 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. References ❖ Hiller, Christopher. “Developing an AngularJS Edge.” ❖ Mastering Web Application Development with AngularJS ❖ Ari Lerner “ng-book - The Complete Book on AngularJS” !51
  • 52. AAAAngularosum!

×