SlideShare a Scribd company logo
1 of 61
Download to read offline
ANGULAR WORKSHOPANGULAR WORKSHOP
MAXIMILIAN BERGHOFF - 25.08.2018 - FROSCONMAXIMILIAN BERGHOFF - 25.08.2018 - FROSCON
ANGULARANGULAR
1
2
Maximilian Berghoff
2
Maximilian Berghoff
@ElectricMaxxx
2
Maximilian Berghoff
@ElectricMaxxx
github.com/electricmaxxx
2
Maximilian Berghoff
@ElectricMaxxx
github.com/electricmaxxx
Maximilian.Berghoff@mayflower.de
2
Maximilian Berghoff
@ElectricMaxxx
github.com/electricmaxxx
Maximilian.Berghoff@mayflower.de
Mayflower GmbH - Würzburg
2
AUSBLICKAUSBLICK
Basics: Templatating, Komponenten Services
Advanced: Forms vs. Reactive Forms
3
HISTORYHISTORY
4
Angular 1.x heißt jetzt AngularJS
Angular 2 und 4 sind Angular
Entwickelt in Community, der auch Google angehört
5
ANGULARJS VS. ANGULARANGULARJS VS. ANGULAR
6
ANGULAR JSANGULAR JS
Controller als Standard für ein "MVC"
Komponenten durch Direktiven möglich
Data-Binding everywhere
7
ANGULARANGULAR
Fokus auf Komponenten
Data-Binding kann/muss in der Verantwortung des Entwicklers
Modul Struktur
Typescript als Basis
8
faktisch keine Migration von AngularJS auf Angular möglich (außer Rewrite)
Angular 2 lässt sich einfach auf 6 migrieren
9
AUSBLICK - THEMENAUSBLICK - THEMEN
10
Bootstraping - Installation einer Skeleton App mit dem CLI
Basics:
Templating, Komponenten, App-Struktur, DI
Advanced:
Forms - Data-Binding oder Reactive
Events - Inter-Komponenten-Kommunikation
Async - Kommunikation mit einem Server
11
LOS GEHT'SLOS GEHT'S
12
TASK 1: BOOTSTRAPINGTASK 1: BOOTSTRAPING
# install CLI
npm install -g @angular/cli
# Create new skeleton app
ng new example-app
cd example-app
# run it
ng serve -o
13
BASICS - STRUKTURBASICS - STRUKTUR
14
BASIS - TEMPLATINGBASIS - TEMPLATING
15
TEMPLATING - INTERPOLATIONTEMPLATING - INTERPOLATION
{{ 'ich bin ein string'}}
<!-- String -->
{{ ichBinEineVariable}}
<!-- public property in component -->
{{ 'ich bin ein string' + ichBinEineVariable}}
<!-- Concatenation -->
{{ gibString() }}
<!-- Method Call -->
export class AppComponent {
ichBinEineVariable = 'app';
gibString(): string {
return 'Ich bin ein String';
}
}
16
TEMPLATING - EXPRESSIONSTEMPLATING - EXPRESSIONS
[property]="expression"
17
TEMPLATING - EXPRESSIONSTEMPLATING - EXPRESSIONS
<span [hidden]="isUnchanged">changed</span>
<!-- Sichtbarkeit von Span Element -->
<div *ngFor="let task of tasks">{{task.name}}</div>
<!-- Angular interne Direktive -->
export class AppComponent {
isUnchanged: bool = true;
tasks: Task[] = [];
}
18
TEMPLATING - STATEMENTSTEMPLATING - STATEMENTS
<button (click)="onClick()">Drück mich</button>
<!-- Event Handler -->
export class AppComponent {
onClick(): void {
alert('ich wurde gedrückt');
}
}
19
TEMPLATES - DATA BINDINGTEMPLATES - DATA BINDING
Data direction Syntax Type
One-Way from data source to view
template
{{expression}},
[target]="expression"
Interpolation, Property, Attribute, Class,
Style
One-way from view target to data source (target)="statement" Event
Two-Way [(target)]="expression" Two-Way
20
BASICS - TESTINGBASICS - TESTING
21
TESTING - UNIT-TESTS*TESTING - UNIT-TESTS*
* TESTEN DER KOMPONENTEN SIND EIGENTLICH KEINE UNIT-TESTS, SOLLEN HIER ABER UNSERE KLEINSTE EINHEIT DARSTELLEN.* TESTEN DER KOMPONENTEN SIND EIGENTLICH KEINE UNIT-TESTS, SOLLEN HIER ABER UNSERE KLEINSTE EINHEIT DARSTELLEN.
22
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
23
-
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent)
.toContain('Welcome to app!');
}));
24
BASICS - ROUTINGBASICS - ROUTING
25
ROUTING - DEFINITIONROUTING - DEFINITION
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{ path: 'heroes',component: HeroListComponent, data: {
title: 'Heroes List'
}},
{ path: '', redirectTo: '/heroes', pathMatch: 'full'},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes],
...
})
export class AppModule { }
26
ROUTING - IM TEMPLATEROUTING - IM TEMPLATE
<router-outlet></router-outlet>
27
ROUTING - AUFRUFROUTING - AUFRUF
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">
Crisis Center
</a>
<a routerLink="/heroes" routerLinkActive="active">
Heroes
</a>
</nav>
28
BASICS - DEPENDENCY INJECTIONBASICS - DEPENDENCY INJECTION
29
DEPENDENCY INJECTIONDEPENDENCY INJECTION
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes() { return HEROES; }
}
30
DEPENDENCY INJECTIONDEPENDENCY INJECTION
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
const heroesPromise = Promise.resolve(HEROES);
@Injectable()
export class HeroService {
getHeroes(): Promise<Hero[]> { return heroesPromise; }
}
31
DEPENDENCY INJECTIONDEPENDENCY INJECTION
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
providers: [HeroService],
template: `
<h2>Heroes</h2>
<hero-list></hero-list>
`
})
export class HeroesComponent {
constructor (private service: HeroService) {}
}
32
BASICS - CONCLUSIONBASICS - CONCLUSION
33
ADVANCEDADVANCED
34
ADVANCED - EVENTSADVANCED - EVENTS
35
EVENTS - EINE IDEEEVENTS - EINE IDEE
MESSAGEBUSMESSAGEBUS
36
MESSAGEBUSMESSAGEBUS
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
interface Message {channel: string; data: any;}
@Injectable()
export class MessageService {
private subject = new Subject<Message>();
public publish<T>(message: T): void {
const channel = (<any>message.constructor).name;
this.subject.next({ channel: channel, data: message });
}
public of<T>(messageType: { new(...args: any[]): T }): Observable<any> {
const channel = (<any>messageType).name;
return this.subject.filter(m => m.channel === channel).map(m => m.data);
}
}
37
EVENTS - INNER COMPONENTEVENTS - INNER COMPONENT
import {Component, EventEmitter, Input, Output} from "@angular/core";
@Component({
selector: 'inner-component',
template: '<h1>{{title}}</h1>'
})
export class InnerComponent {
@Input() title: string = '';
}
38
EVENTS -- INNER COMPONENT - SUBMIT EVENTEVENTS -- INNER COMPONENT - SUBMIT EVENT
import {Component, EventEmitter, Input, Output} from "@angular/core";
@Component({
selector: 'inner-component',
template: `
<h1>{{title}}</h1>
<p><button (click)="onClick()">Klick mich</button></p>
`
})
export class InnerComponent {
@Input() title: string = '';
@Output() onClick: EventEmitter<void> = new EventEmitter();
onClick() {
this.onClick.emit();
}
}
39
EVENTS - OUTER COMPONENTEVENTS - OUTER COMPONENT
import {Component} from "@angular/core";
@Component({
selector: 'outer-component',
template: '<inner-component [title]="title"></inner-component>'
})
export class OuterComponent {
title: string = 'Title';
onInnerClick(): void {
alert('Innen wurde gedrückt');
}
}
40
EVENTS - OUTER COMPONENT - CATCHINGEVENTS - OUTER COMPONENT - CATCHING
import {Component} from "@angular/core";
@Component({
selector: 'app',
template: `
<outer-component (onClick)="onInnerClick()">
</outer-component>`
})
export class AppComponent {
}
41
ADVANCED - FORMSADVANCED - FORMS
42
FORMSFORMS
import {Component} from "@angular/core";
@Component({
selector: 'app',
template: `
<form>
<input
type="text"
[(ngModel)]="name"
name="name"
id="name" />
</form>
`
})
export class AppComponent {
name: string = 'Max';
}
43
FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS
44
FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
45
FORMS - REACTIVE FORMS - TEMPLATEFORMS - REACTIVE FORMS - TEMPLATE
<h2>Hero Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="heroForm" novalidate>
<div class="form-group">
<label class="center-block">Name:
<input class="form-control" formControlName="name">
</label>
</div>
</form>
46
FORMS - REACTIVE FORMS - COMPONENTFORMS - REACTIVE FORMS - COMPONENT
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'hero-detail',
templateUrl: 'hero-detail.html'
})
export class HeroDetailComponent {
heroForm: FormGroup;
constructor(private fb: FormBuilder) { this.createForm()}
createForm() {
this.heroForm = this.fb.group({name: ''});
}
}
47
FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS
<p>Form value: {{ heroForm.value | json }}</p>
<p>Form status: {{ heroForm.status | json }}</p>
48
FORMS - REACTIVE FORMS - DOCS LESENFORMS - REACTIVE FORMS - DOCS LESEN
49
PRAXISPRAXIS
RAN AN DEN SPECKRAN AN DEN SPECK
50
DIE APPDIE APP
git clone https://github.com/ElectricMaxxx/froscon-angular-application example-application
cd example application
npm install
ng serve -o
51
AUFGABENAUFGABEN
Unterteile die App in saubere Komponenten
Lagere Logic in Services aus - Verknüpfe per DI
Nutze Reactive-Forms in den Formularen
Externen Code in Service wrappen
Changes -> PR an mein Repository
52
CONCLUSIONCONCLUSION
53
Q&A - EURE PLATTFORM-APPLICATIONQ&A - EURE PLATTFORM-APPLICATION
54
LINKSLINKS
RxJs
Jasmine
Reactive Forms
Reactive Forms on steroids
RxJs Slides
55

More Related Content

What's hot

A short tale about state machine
A short tale about state machineA short tale about state machine
A short tale about state machineŁukasz Chruściel
 
Modularization Strategies - Fixing Class and Package Tangles
Modularization Strategies - Fixing Class and Package TanglesModularization Strategies - Fixing Class and Package Tangles
Modularization Strategies - Fixing Class and Package TanglesCodeOps Technologies LLP
 
Aggregate functions
Aggregate functionsAggregate functions
Aggregate functionssinhacp
 
Aggregate Functions,Final
Aggregate Functions,FinalAggregate Functions,Final
Aggregate Functions,Finalmukesh24pandey
 
Database object, sub query, Join Commands & Lab Assignment
Database object, sub query, Join Commands & Lab AssignmentDatabase object, sub query, Join Commands & Lab Assignment
Database object, sub query, Join Commands & Lab AssignmentArun Sial
 
PHP mysql Aggregate functions
PHP mysql Aggregate functionsPHP mysql Aggregate functions
PHP mysql Aggregate functionsMudasir Syed
 

What's hot (6)

A short tale about state machine
A short tale about state machineA short tale about state machine
A short tale about state machine
 
Modularization Strategies - Fixing Class and Package Tangles
Modularization Strategies - Fixing Class and Package TanglesModularization Strategies - Fixing Class and Package Tangles
Modularization Strategies - Fixing Class and Package Tangles
 
Aggregate functions
Aggregate functionsAggregate functions
Aggregate functions
 
Aggregate Functions,Final
Aggregate Functions,FinalAggregate Functions,Final
Aggregate Functions,Final
 
Database object, sub query, Join Commands & Lab Assignment
Database object, sub query, Join Commands & Lab AssignmentDatabase object, sub query, Join Commands & Lab Assignment
Database object, sub query, Join Commands & Lab Assignment
 
PHP mysql Aggregate functions
PHP mysql Aggregate functionsPHP mysql Aggregate functions
PHP mysql Aggregate functions
 

Similar to Angular Workshop FrOSCon 2018

Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Maximilian Berghoff
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Ontico
 
Angular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAngular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAlexey Frolov
 
Jan 2017 - a web of applications (angular 2)
Jan 2017 - a web of applications (angular 2)Jan 2017 - a web of applications (angular 2)
Jan 2017 - a web of applications (angular 2)Kasper Reijnders
 
Building a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web ServicesBuilding a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web ServicesDavid Giard
 
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdfangular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdfNuttavutThongjor1
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injectionEyal Vardi
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University
 
Angular2 Development for Java developers
Angular2 Development for Java developersAngular2 Development for Java developers
Angular2 Development for Java developersYakov Fain
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법Jeado Ko
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next FrameworkCommit University
 
Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Ahmed Moawad
 
Technozaure - Angular2
Technozaure - Angular2Technozaure - Angular2
Technozaure - Angular2Demey Emmanuel
 
PWA night vol.11 20191218
PWA night vol.11 20191218PWA night vol.11 20191218
PWA night vol.11 20191218bitpart
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationThibault Even
 
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Matt Raible
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 formsEyal Vardi
 

Similar to Angular Workshop FrOSCon 2018 (20)

Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019Angular Mini Hackathon Code Talks 2019
Angular Mini Hackathon Code Talks 2019
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
 
Itsjustangular
ItsjustangularItsjustangular
Itsjustangular
 
Angular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app exampleAngular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app example
 
Angular 2 in-1
Angular 2 in-1 Angular 2 in-1
Angular 2 in-1
 
Jan 2017 - a web of applications (angular 2)
Jan 2017 - a web of applications (angular 2)Jan 2017 - a web of applications (angular 2)
Jan 2017 - a web of applications (angular 2)
 
Building a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web ServicesBuilding a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web Services
 
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdfangular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdf
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injection
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
 
Angular2 Development for Java developers
Angular2 Development for Java developersAngular2 Development for Java developers
Angular2 Development for Java developers
 
Angular 2 binding
Angular 2  bindingAngular 2  binding
Angular 2 binding
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
 
Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1
 
Technozaure - Angular2
Technozaure - Angular2Technozaure - Angular2
Technozaure - Angular2
 
PWA night vol.11 20191218
PWA night vol.11 20191218PWA night vol.11 20191218
PWA night vol.11 20191218
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son application
 
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 

More from Maximilian Berghoff

Sustainability in der deploy pipeline
Sustainability in der deploy pipelineSustainability in der deploy pipeline
Sustainability in der deploy pipelineMaximilian Berghoff
 
Natural language understanding meets php php ruhr 2018
Natural language understanding meets php   php ruhr 2018Natural language understanding meets php   php ruhr 2018
Natural language understanding meets php php ruhr 2018Maximilian Berghoff
 
Search engine optimization for symfony developers
Search engine optimization for symfony developersSearch engine optimization for symfony developers
Search engine optimization for symfony developersMaximilian Berghoff
 
Introduction into FrOSCon PHP Track
Introduction into FrOSCon PHP TrackIntroduction into FrOSCon PHP Track
Introduction into FrOSCon PHP TrackMaximilian Berghoff
 
API Plattform - A Backend in Minutes
API Plattform - A Backend in MinutesAPI Plattform - A Backend in Minutes
API Plattform - A Backend in MinutesMaximilian Berghoff
 
The content manager loves the tree
The content manager loves the treeThe content manager loves the tree
The content manager loves the treeMaximilian Berghoff
 
Reactive Javascript - FrOSCon - 2016
Reactive Javascript - FrOSCon - 2016Reactive Javascript - FrOSCon - 2016
Reactive Javascript - FrOSCon - 2016Maximilian Berghoff
 
Extending a symfony application by cms features
Extending a symfony application by cms featuresExtending a symfony application by cms features
Extending a symfony application by cms featuresMaximilian Berghoff
 
Reactive java script mit rxjs basta! 2016
Reactive java script mit rxjs   basta! 2016Reactive java script mit rxjs   basta! 2016
Reactive java script mit rxjs basta! 2016Maximilian Berghoff
 
Eine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweiternEine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweiternMaximilian Berghoff
 
RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23Maximilian Berghoff
 

More from Maximilian Berghoff (20)

Sustainability in der deploy pipeline
Sustainability in der deploy pipelineSustainability in der deploy pipeline
Sustainability in der deploy pipeline
 
Development is for future
Development is for futureDevelopment is for future
Development is for future
 
Development is for future
Development is for futureDevelopment is for future
Development is for future
 
Natural language understanding meets php php ruhr 2018
Natural language understanding meets php   php ruhr 2018Natural language understanding meets php   php ruhr 2018
Natural language understanding meets php php ruhr 2018
 
NLU meets PHP
NLU meets PHPNLU meets PHP
NLU meets PHP
 
Search engine optimization for symfony developers
Search engine optimization for symfony developersSearch engine optimization for symfony developers
Search engine optimization for symfony developers
 
Introduction into FrOSCon PHP Track
Introduction into FrOSCon PHP TrackIntroduction into FrOSCon PHP Track
Introduction into FrOSCon PHP Track
 
API Plattform - A Backend in Minutes
API Plattform - A Backend in MinutesAPI Plattform - A Backend in Minutes
API Plattform - A Backend in Minutes
 
The content manager loves the tree
The content manager loves the treeThe content manager loves the tree
The content manager loves the tree
 
Aspects Of Code Quality meetup
Aspects Of Code Quality   meetupAspects Of Code Quality   meetup
Aspects Of Code Quality meetup
 
Reactive Javascript - FrOSCon - 2016
Reactive Javascript - FrOSCon - 2016Reactive Javascript - FrOSCon - 2016
Reactive Javascript - FrOSCon - 2016
 
Extending a symfony application by cms features
Extending a symfony application by cms featuresExtending a symfony application by cms features
Extending a symfony application by cms features
 
Concepts of Code Quality
Concepts of Code QualityConcepts of Code Quality
Concepts of Code Quality
 
Mit dem API ins CMS
Mit dem API ins CMSMit dem API ins CMS
Mit dem API ins CMS
 
Reactive java script mit rxjs basta! 2016
Reactive java script mit rxjs   basta! 2016Reactive java script mit rxjs   basta! 2016
Reactive java script mit rxjs basta! 2016
 
Eine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweiternEine Symfony Application um CMS-Funktionen erweitern
Eine Symfony Application um CMS-Funktionen erweitern
 
RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23RESTing on HTTP - FrOSCon 10 - 2015-08-23
RESTing on HTTP - FrOSCon 10 - 2015-08-23
 
RESTing on HTTP
RESTing on HTTPRESTing on HTTP
RESTing on HTTP
 
Symfony-CMF/SeoBundle - unKonf
Symfony-CMF/SeoBundle - unKonfSymfony-CMF/SeoBundle - unKonf
Symfony-CMF/SeoBundle - unKonf
 
Rest
RestRest
Rest
 

Recently uploaded

办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 

Recently uploaded (17)

办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 

Angular Workshop FrOSCon 2018

  • 1. ANGULAR WORKSHOPANGULAR WORKSHOP MAXIMILIAN BERGHOFF - 25.08.2018 - FROSCONMAXIMILIAN BERGHOFF - 25.08.2018 - FROSCON ANGULARANGULAR
  • 2. 1
  • 3. 2
  • 9. AUSBLICKAUSBLICK Basics: Templatating, Komponenten Services Advanced: Forms vs. Reactive Forms 3
  • 11. Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5
  • 13. ANGULAR JSANGULAR JS Controller als Standard für ein "MVC" Komponenten durch Direktiven möglich Data-Binding everywhere 7
  • 14. ANGULARANGULAR Fokus auf Komponenten Data-Binding kann/muss in der Verantwortung des Entwicklers Modul Struktur Typescript als Basis 8
  • 15. faktisch keine Migration von AngularJS auf Angular möglich (außer Rewrite) Angular 2 lässt sich einfach auf 6 migrieren 9
  • 17. Bootstraping - Installation einer Skeleton App mit dem CLI Basics: Templating, Komponenten, App-Struktur, DI Advanced: Forms - Data-Binding oder Reactive Events - Inter-Komponenten-Kommunikation Async - Kommunikation mit einem Server 11
  • 19. TASK 1: BOOTSTRAPINGTASK 1: BOOTSTRAPING # install CLI npm install -g @angular/cli # Create new skeleton app ng new example-app cd example-app # run it ng serve -o 13
  • 20. BASICS - STRUKTURBASICS - STRUKTUR 14
  • 21. BASIS - TEMPLATINGBASIS - TEMPLATING 15
  • 22. TEMPLATING - INTERPOLATIONTEMPLATING - INTERPOLATION {{ 'ich bin ein string'}} <!-- String --> {{ ichBinEineVariable}} <!-- public property in component --> {{ 'ich bin ein string' + ichBinEineVariable}} <!-- Concatenation --> {{ gibString() }} <!-- Method Call --> export class AppComponent { ichBinEineVariable = 'app'; gibString(): string { return 'Ich bin ein String'; } } 16
  • 23. TEMPLATING - EXPRESSIONSTEMPLATING - EXPRESSIONS [property]="expression" 17
  • 24. TEMPLATING - EXPRESSIONSTEMPLATING - EXPRESSIONS <span [hidden]="isUnchanged">changed</span> <!-- Sichtbarkeit von Span Element --> <div *ngFor="let task of tasks">{{task.name}}</div> <!-- Angular interne Direktive --> export class AppComponent { isUnchanged: bool = true; tasks: Task[] = []; } 18
  • 25. TEMPLATING - STATEMENTSTEMPLATING - STATEMENTS <button (click)="onClick()">Drück mich</button> <!-- Event Handler --> export class AppComponent { onClick(): void { alert('ich wurde gedrückt'); } } 19
  • 26. TEMPLATES - DATA BINDINGTEMPLATES - DATA BINDING Data direction Syntax Type One-Way from data source to view template {{expression}}, [target]="expression" Interpolation, Property, Attribute, Class, Style One-way from view target to data source (target)="statement" Event Two-Way [(target)]="expression" Two-Way 20
  • 27. BASICS - TESTINGBASICS - TESTING 21
  • 28. TESTING - UNIT-TESTS*TESTING - UNIT-TESTS* * TESTEN DER KOMPONENTEN SIND EIGENTLICH KEINE UNIT-TESTS, SOLLEN HIER ABER UNSERE KLEINSTE EINHEIT DARSTELLEN.* TESTEN DER KOMPONENTEN SIND EIGENTLICH KEINE UNIT-TESTS, SOLLEN HIER ABER UNSERE KLEINSTE EINHEIT DARSTELLEN. 22
  • 29. import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); }); 23
  • 30. - it(`should have as title 'app'`, async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('app'); })); it('should render title in a h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent) .toContain('Welcome to app!'); })); 24
  • 31. BASICS - ROUTINGBASICS - ROUTING 25
  • 32. ROUTING - DEFINITIONROUTING - DEFINITION import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'hero/:id', component: HeroDetailComponent }, { path: 'heroes',component: HeroListComponent, data: { title: 'Heroes List' }}, { path: '', redirectTo: '/heroes', pathMatch: 'full'}, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(appRoutes], ... }) export class AppModule { } 26
  • 33. ROUTING - IM TEMPLATEROUTING - IM TEMPLATE <router-outlet></router-outlet> 27
  • 34. ROUTING - AUFRUFROUTING - AUFRUF <nav> <a routerLink="/crisis-center" routerLinkActive="active"> Crisis Center </a> <a routerLink="/heroes" routerLinkActive="active"> Heroes </a> </nav> 28
  • 35. BASICS - DEPENDENCY INJECTIONBASICS - DEPENDENCY INJECTION 29
  • 36. DEPENDENCY INJECTIONDEPENDENCY INJECTION import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { getHeroes() { return HEROES; } } 30
  • 37. DEPENDENCY INJECTIONDEPENDENCY INJECTION import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; const heroesPromise = Promise.resolve(HEROES); @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return heroesPromise; } } 31
  • 38. DEPENDENCY INJECTIONDEPENDENCY INJECTION import { Component } from '@angular/core'; import { HeroService } from './hero.service'; @Component({ selector: 'my-heroes', providers: [HeroService], template: ` <h2>Heroes</h2> <hero-list></hero-list> ` }) export class HeroesComponent { constructor (private service: HeroService) {} } 32
  • 39. BASICS - CONCLUSIONBASICS - CONCLUSION 33
  • 42. EVENTS - EINE IDEEEVENTS - EINE IDEE MESSAGEBUSMESSAGEBUS 36
  • 43. MESSAGEBUSMESSAGEBUS import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs/Rx'; interface Message {channel: string; data: any;} @Injectable() export class MessageService { private subject = new Subject<Message>(); public publish<T>(message: T): void { const channel = (<any>message.constructor).name; this.subject.next({ channel: channel, data: message }); } public of<T>(messageType: { new(...args: any[]): T }): Observable<any> { const channel = (<any>messageType).name; return this.subject.filter(m => m.channel === channel).map(m => m.data); } } 37
  • 44. EVENTS - INNER COMPONENTEVENTS - INNER COMPONENT import {Component, EventEmitter, Input, Output} from "@angular/core"; @Component({ selector: 'inner-component', template: '<h1>{{title}}</h1>' }) export class InnerComponent { @Input() title: string = ''; } 38
  • 45. EVENTS -- INNER COMPONENT - SUBMIT EVENTEVENTS -- INNER COMPONENT - SUBMIT EVENT import {Component, EventEmitter, Input, Output} from "@angular/core"; @Component({ selector: 'inner-component', template: ` <h1>{{title}}</h1> <p><button (click)="onClick()">Klick mich</button></p> ` }) export class InnerComponent { @Input() title: string = ''; @Output() onClick: EventEmitter<void> = new EventEmitter(); onClick() { this.onClick.emit(); } } 39
  • 46. EVENTS - OUTER COMPONENTEVENTS - OUTER COMPONENT import {Component} from "@angular/core"; @Component({ selector: 'outer-component', template: '<inner-component [title]="title"></inner-component>' }) export class OuterComponent { title: string = 'Title'; onInnerClick(): void { alert('Innen wurde gedrückt'); } } 40
  • 47. EVENTS - OUTER COMPONENT - CATCHINGEVENTS - OUTER COMPONENT - CATCHING import {Component} from "@angular/core"; @Component({ selector: 'app', template: ` <outer-component (onClick)="onInnerClick()"> </outer-component>` }) export class AppComponent { } 41
  • 49. FORMSFORMS import {Component} from "@angular/core"; @Component({ selector: 'app', template: ` <form> <input type="text" [(ngModel)]="name" name="name" id="name" /> </form> ` }) export class AppComponent { name: string = 'Max'; } 43
  • 50. FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS 44
  • 51. FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 45
  • 52. FORMS - REACTIVE FORMS - TEMPLATEFORMS - REACTIVE FORMS - TEMPLATE <h2>Hero Detail</h2> <h3><i>FormControl in a FormGroup</i></h3> <form [formGroup]="heroForm" novalidate> <div class="form-group"> <label class="center-block">Name: <input class="form-control" formControlName="name"> </label> </div> </form> 46
  • 53. FORMS - REACTIVE FORMS - COMPONENTFORMS - REACTIVE FORMS - COMPONENT import { Component } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'hero-detail', templateUrl: 'hero-detail.html' }) export class HeroDetailComponent { heroForm: FormGroup; constructor(private fb: FormBuilder) { this.createForm()} createForm() { this.heroForm = this.fb.group({name: ''}); } } 47
  • 54. FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS <p>Form value: {{ heroForm.value | json }}</p> <p>Form status: {{ heroForm.status | json }}</p> 48
  • 55. FORMS - REACTIVE FORMS - DOCS LESENFORMS - REACTIVE FORMS - DOCS LESEN 49
  • 56. PRAXISPRAXIS RAN AN DEN SPECKRAN AN DEN SPECK 50
  • 57. DIE APPDIE APP git clone https://github.com/ElectricMaxxx/froscon-angular-application example-application cd example application npm install ng serve -o 51
  • 58. AUFGABENAUFGABEN Unterteile die App in saubere Komponenten Lagere Logic in Services aus - Verknüpfe per DI Nutze Reactive-Forms in den Formularen Externen Code in Service wrappen Changes -> PR an mein Repository 52
  • 60. Q&A - EURE PLATTFORM-APPLICATIONQ&A - EURE PLATTFORM-APPLICATION 54