SlideShare ist ein Scribd-Unternehmen logo
ANGULARJS UND TYP-D'OH!3
ChristianHerberger
ÜBER MICH
Integrator
PHP-Entwickler
FE-Entwickler
PUNKT.DE
TYPO3-Komplettpakete in Karlsruhe
25 Mitarbeiter
DER ROTE FADEN
Was istAngularJS(undwas kannes)?(LiveundinFarbe!)
WiekannmanAngularJSmitTYPO3nutzen?
Stolpersteine
Ausblick
ANGULARJS
¡Ay, caramba!
WAS IST ANGULARJS?
HTML enhanced for web apps
MVC/MVVM
TwoWay/BidirectionalDataBinding
DependencyInjection
Direktivenals ErweiterungvonHTML
TestbarkeitvonGrundauf
DieDreiD
MVC/MVVM
MVC
MVVM
BEISPIEL
... kommtgleich
TWOWAY/BIDIRECTIONAL DATA BINDING
<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>
Bitte Namen eingeben
Hallo, ich bin
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>
Apu Nahasapemapetilon
Hallo, ich bin Apu Nahasapemapetilon
Reset Name
WEITERE MÖGLICHKEITEN
ng-repeatfür AusgabevonArrays
selectmitng-options
ng-initals Konstruktor
VerschachtelteController mitVererbung
DEPENDENCY INJECTION
WAS IST DI?
BenötigteinObjekteinanderes Objektals Abhängingkeit, ziehtes
einzentralabgelegtes Objektabundmuss es nichtselbst
erstellen
Fuktioniertbeiallen"Factories"(Modulen, Controllern,
Direktiven, Services, ...)
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>
DI VERÄNDERN
Angular bieteteinen injector mitFunktionen wie get()
Abhängigvon Conditions, oder jedem eingenen Code, andere
Dependencies einspielen
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>
DIREKTIVEN ALS ERWEITERUNG VON HTML
WÄR DAS NICHT GENIAL?
<name-listlast-name="Simpson"></name-list>
OUTPUT:
Homer Simpson
MargeSimpson
BartSimpson
LisaSimpson
MaggieSimpson
ES IST SO GENIAL!
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>
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>
BEISPIEL
... gibt's hier keins -nichtrelevantfür unsereAnwendung
TESTBARKEIT
UNIT TESTS
GuteIntegrationinaktuelleTestframeworks (Karma, Jasmine)
DurchDIeinfachCode-Einheitenzuisolieren
Jeder Service, Controller, ... kanneinzelnlosgelöstaufgerufen
werden
Inder Dokugibtes Test-Dokufür jedeVariante
"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
INTEGRATION IN TYPO3
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
STOLPERSTEINE
STOLPERSTEINE
Fluid+JSON='Array'-><![CDATA[nutzen!
array('name'=>'value') wirdinJSONeinObjektunddamit
nichtsortierbar
JavaScriptisteineasnychronarbeitendeSprache
Anderes JavaScriptkanndieAppstören, Ladezeitverlängern
usw. ->Möglichstlosgelösteinbinden
AUSBLICK
Fragen?Antworten!Diskussion?
Vielen Dank für die Aufmerksamkeit!

Weitere ähnliche Inhalte

Ähnlich wie AngularJS und TYP-D'oh!3

Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
Digicomp Academy AG
 
05 Mehrschichtenarchitekturen und Enterprise Java Beans
05 Mehrschichtenarchitekturen und Enterprise Java Beans05 Mehrschichtenarchitekturen und Enterprise Java Beans
05 Mehrschichtenarchitekturen und Enterprise Java Beans
klickandbau
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
AngularJs
AngularJsAngularJs
AngularJs
NETUserGroupBern
 
Web-API-Design in Java
Web-API-Design in JavaWeb-API-Design in Java
Web-API-Design in Java
OPEN KNOWLEDGE GmbH
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
Eduard Hildebrandt
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
schmichri
 
Making AdWords Scripts Scale
Making AdWords Scripts ScaleMaking AdWords Scripts Scale
Making AdWords Scripts Scale
PeakAce
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
gedoplan
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
Matthias Jauernig
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 
MongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDBMongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDB
Tobias Trelle
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
🙌 Christoph Häckel
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
gedoplan
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
Manfred Steyer
 
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian BlumPHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
Sebastian Blum
 
Dateien per Drag & Drop in APEX Applikationen ablegen.
Dateien per Drag & Drop in APEX Applikationen ablegen.Dateien per Drag & Drop in APEX Applikationen ablegen.
Dateien per Drag & Drop in APEX Applikationen ablegen.
MT AG
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 

Ähnlich wie AngularJS und TYP-D'oh!3 (20)

Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
05 Mehrschichtenarchitekturen und Enterprise Java Beans
05 Mehrschichtenarchitekturen und Enterprise Java Beans05 Mehrschichtenarchitekturen und Enterprise Java Beans
05 Mehrschichtenarchitekturen und Enterprise Java Beans
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
AngularJs
AngularJsAngularJs
AngularJs
 
Web-API-Design in Java
Web-API-Design in JavaWeb-API-Design in Java
Web-API-Design in Java
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
Making AdWords Scripts Scale
Making AdWords Scripts ScaleMaking AdWords Scripts Scale
Making AdWords Scripts Scale
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
MongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDBMongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDB
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian BlumPHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
 
Dateien per Drag & Drop in APEX Applikationen ablegen.
Dateien per Drag & Drop in APEX Applikationen ablegen.Dateien per Drag & Drop in APEX Applikationen ablegen.
Dateien per Drag & Drop in APEX Applikationen ablegen.
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 

AngularJS und TYP-D'oh!3