1. ANGULARJS UND TYP-D'OH!3
ChristianHerberger

2. ÜBER MICH
Integrator
PHP-Entwickler
FE-Entwickler

3. PUNKT.DE
TYPO3-Komplettpakete in Karlsruhe
25 Mitarbeiter

4. DER ROTE FADEN
Was istAngularJS(undwas kannes)?(LiveundinFarbe!)
WiekannmanAngularJSmitTYPO3nutzen?
Stolpersteine
Ausblick

5. ANGULARJS
¡Ay, caramba!

6. WAS IST ANGULARJS?
HTML enhanced for web apps
MVC/MVVM
TwoWay/BidirectionalDataBinding
DependencyInjection
Direktivenals ErweiterungvonHTML
TestbarkeitvonGrundauf
DieDreiD

7. MVC/MVVM

8. MVC

9. MVVM

10. BEISPIEL
... kommtgleich

11. TWOWAY/BIDIRECTIONAL DATA BINDING

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. Bitte Namen eingeben
Hallo, ich bin

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. Apu Nahasapemapetilon
Hallo, ich bin Apu Nahasapemapetilon
Reset Name

16. WEITERE MÖGLICHKEITEN
ng-repeatfür AusgabevonArrays
selectmitng-options
ng-initals Konstruktor
VerschachtelteController mitVererbung

17. DEPENDENCY INJECTION

18. WAS IST DI?
BenötigteinObjekteinanderes Objektals Abhängingkeit, ziehtes
einzentralabgelegtes Objektabundmuss es nichtselbst
erstellen
Fuktioniertbeiallen"Factories"(Modulen, Controllern,
Direktiven, Services, ...)

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. DI VERÄNDERN
Angular bieteteinen injector mitFunktionen wie get()
Abhängigvon Conditions, oder jedem eingenen Code, andere
Dependencies einspielen

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. DIREKTIVEN ALS ERWEITERUNG VON HTML

23. WÄR DAS NICHT GENIAL?
<name-listlast-name="Simpson"></name-list>
OUTPUT:
Homer Simpson
MargeSimpson
BartSimpson
LisaSimpson
MaggieSimpson

24. ES IST SO GENIAL!

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. 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. BEISPIEL
... gibt's hier keins -nichtrelevantfür unsereAnwendung

28. TESTBARKEIT

29. UNIT TESTS
GuteIntegrationinaktuelleTestframeworks (Karma, Jasmine)
DurchDIeinfachCode-Einheitenzuisolieren
Jeder Service, Controller, ... kanneinzelnlosgelöstaufgerufen
werden
Inder Dokugibtes Test-Dokufür jedeVariante

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. INTEGRATION IN TYPO3

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. STOLPERSTEINE

34. STOLPERSTEINE
Fluid+JSON='Array'-><![CDATA[nutzen!
array('name'=>'value') wirdinJSONeinObjektunddamit
nichtsortierbar
JavaScriptisteineasnychronarbeitendeSprache
Anderes JavaScriptkanndieAppstören, Ladezeitverlängern
usw. ->Möglichstlosgelösteinbinden

35. AUSBLICK

36. Fragen?Antworten!Diskussion?

37. Vielen Dank für die Aufmerksamkeit!