AngularJS und TYP-D'oh!3

2,502 views

Published on

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,502
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

AngularJS und TYP-D'oh!3

  1. 1. ANGULARJS UND TYP-D'OH!3 ChristianHerberger
  2. 2. ÜBER MICH Integrator PHP-Entwickler FE-Entwickler
  3. 3. PUNKT.DE TYPO3-Komplettpakete in Karlsruhe 25 Mitarbeiter
  4. 4. DER ROTE FADEN Was istAngularJS(undwas kannes)?(LiveundinFarbe!) WiekannmanAngularJSmitTYPO3nutzen? Stolpersteine Ausblick
  5. 5. ANGULARJS ¡Ay, caramba!
  6. 6. WAS IST ANGULARJS? HTML enhanced for web apps MVC/MVVM TwoWay/BidirectionalDataBinding DependencyInjection Direktivenals ErweiterungvonHTML TestbarkeitvonGrundauf DieDreiD
  7. 7. MVC/MVVM
  8. 8. MVC
  9. 9. MVVM
  10. 10. BEISPIEL ... kommtgleich
  11. 11. TWOWAY/BIDIRECTIONAL DATA BINDING
  12. 12. <scripttype="text/javascript"src="Resources/JavaScript/angular.js"> </script> <divng-app> <inputtype="text"ng-model="name" placeholder="BitteNameneingeben"/><br/> <p>Hallo,ichbin{{name}}</p> </div>
  13. 13. Bitte Namen eingeben Hallo, ich bin
  14. 14. A BIT MORE... <scripttype="text/javascript"src="Resources/JavaScript/angular.js"> </script> <scripttype="text/javascript"> angular.module('displayNameApp',[]); angular.module('displayNameApp').controller('displayNameController',function($scope) $scope.name='ApuNahasapemapetilon'; $scope.resetName=function(){ $scope.name='ApuNahasapemapetilon'; }; }); </script> <divng-app="displayNameApp"> <divng-controller="displayNameController"> <inputtype="text"ng-model="name" placeholder="BitteNameneingeben"/><br/> <p>Hallo,ichbin{{name}}</p> <inputtype="button"ng-click="resetName()"> </div> </div>
  15. 15. Apu Nahasapemapetilon Hallo, ich bin Apu Nahasapemapetilon Reset Name
  16. 16. WEITERE MÖGLICHKEITEN ng-repeatfür AusgabevonArrays selectmitng-options ng-initals Konstruktor VerschachtelteController mitVererbung
  17. 17. DEPENDENCY INJECTION
  18. 18. WAS IST DI? BenötigteinObjekteinanderes Objektals Abhängingkeit, ziehtes einzentralabgelegtes Objektabundmuss es nichtselbst erstellen Fuktioniertbeiallen"Factories"(Modulen, Controllern, Direktiven, Services, ...)
  19. 19. BEISPIEL <scripttype="text/javascript"> angular.module('displayNameApp',['fremdModul']); angular.module('displayNameApp').controller('displayNameController', function($scope,$http,eigenerService){ $scope.name='ApuNahasapemapetilon'; $scope.resetName=function(){ $scope.name=$http.get(...); varblubb=eigenerService.doSomething(); }; }); angular.module('displayNameApp').factory('eigenerService', function($http){ return{ doSomething=function(){...}; }; }); </script>
  20. 20. DI VERÄNDERN Angular bieteteinen injector mitFunktionen wie get() Abhängigvon Conditions, oder jedem eingenen Code, andere Dependencies einspielen
  21. 21. BEISPIEL <scripttype="text/javascript"> angular.module('displayNameApp',[]); angular.module('displayNameApp').controller('displayNameController', function($scope,$http){ if($scope.testMode){ $http=angular.injector.get('myHttpMock'); } $scope.name='ApuNahasapemapetilon'; $scope.resetName=function(){ $scope.name=$http.get(...); }; }); </script>
  22. 22. DIREKTIVEN ALS ERWEITERUNG VON HTML
  23. 23. WÄR DAS NICHT GENIAL? <name-listlast-name="Simpson"></name-list> OUTPUT: Homer Simpson MargeSimpson BartSimpson LisaSimpson MaggieSimpson
  24. 24. ES IST SO GENIAL!
  25. 25. DAS "NORMALE" JAVASCRIPT <scripttype="text/javascript"> angular.module('displayNameApp',[]); angular.module('displayNameApp').directive('nameList',function($http){ return{ scope:{ lastName:'@lastName' }, restrict:'E', templateUrl:'nameList.html', link:function(scope){ $http.get(/*ajaxcallwithlastname*/) .success(function(resonseData){ scope.nameList=responseData.nameList; }); } } }); </script>
  26. 26. DAS "TEMPLATE" <div> <scripttype="text/ng-template"id="nameList.html"> <div> <ul> <ling-repeat="nameinnameList">{{name}}{{lastName}}</li> </ul> </div> </script> <name-listlast-name="Simpson"></name-list> </div>
  27. 27. BEISPIEL ... gibt's hier keins -nichtrelevantfür unsereAnwendung
  28. 28. TESTBARKEIT
  29. 29. UNIT TESTS GuteIntegrationinaktuelleTestframeworks (Karma, Jasmine) DurchDIeinfachCode-Einheitenzuisolieren Jeder Service, Controller, ... kanneinzelnlosgelöstaufgerufen werden Inder Dokugibtes Test-Dokufür jedeVariante
  30. 30. "END TO END"-TEST ungefähr wieOberflächentest-Aufrufder Funktion, Vergleich des Outputs mitdefiniertenMocks angular-mockals Modulfür fertigeMocks IntegrationvonHTML-Template-Tools inKarma/Jasmine JS-Tests laufenaufBrowsern->RealeBedingungen
  31. 31. INTEGRATION IN TYPO3
  32. 32. IDEEN EineActionfür dieApp(=>SinglePageApp) ActionkomplettCachebar machen Models mit$exposedProperties undgetExposedProperties() anreichern ObjectToJson-Parser nutzen, JSONanng-init-Aufrufe übergeben Fluidnutzen! Angular-Templates als Partials ->Ordnung, Fluid;) KommunikationmitTYPO3über AJAXundeID ZugriffsrechteaufdieSeiteunddas Pluginmitder App
  33. 33. STOLPERSTEINE
  34. 34. STOLPERSTEINE Fluid+JSON='Array'-><![CDATA[nutzen! array('name'=>'value') wirdinJSONeinObjektunddamit nichtsortierbar JavaScriptisteineasnychronarbeitendeSprache Anderes JavaScriptkanndieAppstören, Ladezeitverlängern usw. ->Möglichstlosgelösteinbinden
  35. 35. AUSBLICK
  36. 36. Fragen?Antworten!Diskussion?
  37. 37. Vielen Dank für die Aufmerksamkeit!

×