angular workshop - programm.froscon.de · angular 1.x heißt jetzt angularjs angular 2 und 4 sind...

61
ANGULAR WORKSHOP ANGULAR WORKSHOP MAXIMILIAN BERGHOFF - 25.08.2018 - FROSCON MAXIMILIAN BERGHOFF - 25.08.2018 - FROSCON ANGULAR ANGULAR

Upload: others

Post on 03-Jun-2020

13 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ANGULAR WORKSHOPANGULAR WORKSHOP

MAXIMILIAN BERGHOFF - 25.08.2018 - FROSCONMAXIMILIAN BERGHOFF - 25.08.2018 - FROSCON

ANGULARANGULAR

Page 2: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

1

Page 3: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

2

Page 4: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Maximilian Berghoff

2

Page 5: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Maximilian Berghoff@ElectricMaxxx

2

Page 6: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Maximilian [email protected]/electricmaxxx

2

Page 8: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Maximilian [email protected]/[email protected] GmbH - Würzburg

2

Page 9: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

AUSBLICKAUSBLICKBasics: Templatating, Komponenten ServicesAdvanced: Forms vs. Reactive Forms

3

Page 10: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

HISTORYHISTORY

4

Page 11: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Angular 1.x heißt jetzt AngularJSAngular 2 und 4 sind AngularEntwickelt in Community, der auch Google angehört

5

Page 12: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ANGULARJS VS. ANGULARANGULARJS VS. ANGULAR

6

Page 13: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ANGULAR JSANGULAR JS

Controller als Standard für ein "MVC"Komponenten durch Direktiven möglichData-Binding everywhere

7

Page 14: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ANGULARANGULAR

Fokus auf KomponentenData-Binding kann/muss in der Verantwortung des EntwicklersModul StrukturTypescript als Basis

8

Page 15: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

faktisch keine Migration von AngularJS auf Angular möglich (außer Rewrite)Angular 2 lässt sich einfach auf 6 migrieren

9

Page 16: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

AUSBLICK - THEMENAUSBLICK - THEMEN

10

Page 17: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Bootstraping - Installation einer Skeleton App mit dem CLIBasics:

Templating, Komponenten, App-Struktur, DIAdvanced:

Forms - Data-Binding oder ReactiveEvents - Inter-Komponenten-KommunikationAsync - Kommunikation mit einem Server

11

Page 18: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

LOS GEHT'SLOS GEHT'S

12

Page 19: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 20: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

BASICS - STRUKTURBASICS - STRUKTUR

14

Page 21: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

BASIS - TEMPLATINGBASIS - TEMPLATING

15

Page 22: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 23: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

TEMPLATING - EXPRESSIONSTEMPLATING - EXPRESSIONS [property]="expression"

17

Page 24: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 25: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

TEMPLATING - STATEMENTSTEMPLATING - STATEMENTS <button (click)="onClick()">Drück mich</button> <!-- Event Handler -->

export class AppComponent { onClick(): void { alert('ich wurde gedrückt'); } }

19

Page 26: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

TEMPLATES - DATA BINDINGTEMPLATES - DATA BINDING

Data direction Syntax TypeOne-Way from data source to viewtemplate

{{expression}},[target]="expression"

Interpolation, Property, Attribute, Class,Style

One-way from view target to data source (target)="statement" EventTwo-Way [(target)]="expression" Two-Way

20

Page 27: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

BASICS - TESTINGBASICS - TESTING

21

Page 28: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 29: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 30: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

-

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

Page 31: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

BASICS - ROUTINGBASICS - ROUTING

25

Page 32: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ROUTING - DEFINITIONROUTING - DEFINITIONimport { 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

Page 33: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ROUTING - IM TEMPLATEROUTING - IM TEMPLATE<router-outlet></router-outlet>

27

Page 34: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ROUTING - AUFRUFROUTING - AUFRUF

<nav> <a routerLink="/crisis-center" routerLinkActive="active"> Crisis Center </a> <a routerLink="/heroes" routerLinkActive="active"> Heroes </a> </nav>

28

Page 35: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

BASICS - DEPENDENCY INJECTIONBASICS - DEPENDENCY INJECTION

29

Page 36: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

DEPENDENCY INJECTIONDEPENDENCY INJECTIONimport { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { getHeroes() { return HEROES; } }

30

Page 37: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

DEPENDENCY INJECTIONDEPENDENCY INJECTIONimport { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; const heroesPromise = Promise.resolve(HEROES); @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return heroesPromise; } }

31

Page 38: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

DEPENDENCY INJECTIONDEPENDENCY INJECTIONimport { 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

Page 39: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

BASICS - CONCLUSIONBASICS - CONCLUSION

33

Page 40: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ADVANCEDADVANCED

34

Page 41: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ADVANCED - EVENTSADVANCED - EVENTS

35

Page 42: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

EVENTS - EINE IDEEEVENTS - EINE IDEE

MESSAGEBUSMESSAGEBUS

36

Page 43: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 44: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 45: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 46: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 47: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 48: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

ADVANCED - FORMSADVANCED - FORMS

42

Page 49: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

FORMSFORMSimport {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

Page 50: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS

44

Page 51: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

FORMS - REACTIVE FORMSFORMS - REACTIVE FORMSimport { 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

Page 52: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

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

Page 53: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

FORMS - REACTIVE FORMS - COMPONENTFORMS - REACTIVE FORMS - COMPONENTimport { 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

Page 54: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

FORMS - REACTIVE FORMSFORMS - REACTIVE FORMS<p>Form value: {{ heroForm.value | json }}</p> <p>Form status: {{ heroForm.status | json }}</p>

48

Page 55: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

FORMS - REACTIVE FORMS - DOCS LESENFORMS - REACTIVE FORMS - DOCS LESEN

49

Page 56: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

PRAXISPRAXISRAN AN DEN SPECKRAN AN DEN SPECK

50

Page 57: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

DIE APPDIE APPgit clone https://github.com/ElectricMaxxx/froscon-angular-application example-application cd example application npm install ng serve -o

51

Page 58: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

AUFGABENAUFGABENUnterteile die App in saubere KomponentenLagere Logic in Services aus - Verknüpfe per DINutze Reactive-Forms in den FormularenExternen Code in Service wrappenChanges -> PR an mein Repository

52

Page 59: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

CONCLUSIONCONCLUSION

53

Page 60: ANGULAR WORKSHOP - programm.froscon.de · Angular 1.x heißt jetzt AngularJS Angular 2 und 4 sind Angular Entwickelt in Community, der auch Google angehört 5. ANGULARJS VS. ANGULAR

Q&A - EURE PLATTFORM-APPLICATIONQ&A - EURE PLATTFORM-APPLICATION

54