Angular von 0 auf 100 Vortrag auf der Web Developer Konferenz 2018 von Dr. Yvette Teiken

1. Angular von 0 auf 100
Dr. Yvette Teiken

2. Logistik
 Dr. Yvette Teiken
 CTO und Gründerin erminas GmbH
 @yteiken
 Code: yte424
 https://github.com/yte424/truckcall

3. Agenda
 Einführung in Angular
 Demo App bauen
 Rapid Prototyping
 Weiterführende Themen

4. Was ist Angular?

5. Was ist Angular?
 Open Source JavaScript Framework für clientseitige Anwendungen
 Warum:
 Vielseitige Datenbindung
 Modular by Design
 Built-in Back-End Integration
 Man kommt schnell zum Ziel
 Weit verbreitet
 Defacto Standard

6. AngularJS  Angular
 2009 Angular 1.0  AngularJS
 Schnell populär geworden
 2016 Rewrite
 Angular 2 jetzt nur noch Angular
 Aktuell: Angular 6.1

7. War braucht man für den Einstieg?
 Notwendig:
 JavaScript
 HTML
 CSS
 Wünschenswert
 OOP Konzepte kennen
 C++, Java, C#, …

8. TypeScript als Programmiersprache für
Angular
 „Standardsprache“ für Angular Applikationen
 „Typisiertes JavaScript“
 Klassen/Objekte
 Precompiler erzeugt JavaScript
 …

9. Editoren
 Visual Studio
 Visual Studio Code
 WebStorm
 Atom
 Eclipse
 Sublime
 ….

10. Rapid Prototyping
Angular in Aktion

12. Wellpappe

14. Aufgabe
 User Stories
 Ich als Disponent möchte den Transport von Papierrollen managen, um eine
reibungslose Produktion zu gewährleisten.
 Ich als Disponent möchte eine Übersicht über die aktuellen Fahraufträge haben.
 Technik-ferne Zielgruppe  Protoyping machen
 Umsetzung:
 Fahraufträge
 Liste von Fahraufträgen
  Angular!

15. Vorbereitung Angular CLI
 Generator für Angular Komponenten
 Folgt Best Practices
 Angular CLI installieren
 App erstellen
 ca. 18.000 Dateien
 Öffnen
Code:
npm install -g @angular/cli
ng new truckcall
ng serve --open

17. App Grundgerüst
 Einstiegspunkt
 Konfiguration: angular.json
 Definiert das komplette Projekt und deren
Abhängigkeiten
 Folder: angular.json

18. Grundlegende Datei Struktur und {{
 Jede Angular Komponente besteht aus
 *.css: Modul spezifisches Styling
 *.html: Das Aussehen des Moduls
 *.ts: Modul Definition und Logik
 *.spec.ts : E2E Test
<div class="container">
<div style="text-align:center">
<h1>
Willkommen zu {{ title }}!
</h1>
</div>
<div>

19. Rapid Prototyping
Logik hinzufügen

20. Domänenmodell: Fahrauftrag
Job.ts
export class Job{
id: number;
source: string;
destination: string;
asap : boolean;
status : JobStatus;
item: string;
}
export enum JobStatus {
todo,
inProgress,
done
}

21. Liste von Fahraufträgen mocken
mock.job.ts
import {Job, JobStatus} from './Job';
export const JOBS: Job[] = [
{id: 108168324, source: "Maschine 2", destination: "Lager", item:"Aviretta Welle 100g",
asap: true, status: JobStatus.inProgress},
{id: 10168612, source: "Maschine 3", destination: "Lager", item:"Brown Kraftfilter 186g",
asap: true, status: JobStatus.inProgress},
{id: 15, source: "Lager 2", destination: "Maschine 3",item:"Jass Testliner 3 120g", asap:
true, status: JobStatus.inProgress},
{id: 16, source: "Maschine 27", destination: "Lager", item:"Jass EHZ HArtwelle 130g",
asap: true, status: JobStatus.inProgress},
{id: 17, source: "Lager", destination: "Lager",item:"Jass Testliner 3 163g", asap: false,
status: JobStatus.inProgress},
{id: 18, source: "Lager", destination: "Maschine 4",item:"Aviretta Welle 80g", asap: true,
status: JobStatus.inProgress},
{id: 19, source: "Lager", destination: "Maschine 4", item: "EifelLiner STD", asap: false,
status: JobStatus.inProgress},
{id: 20, source: "Maschine 2", destination: "Lager", item:"Aviretta Welle 80g", asap:
false, status: JobStatus.inProgress},
];

22. Neues Modul - Component
 Job Komponente
 Anzeigen von Joblisten
 Anzeigen von Jobs
 Logik definieren
 Model Anbindung und Zuweisung zur Selektion
 HTML Template zur Anzeige
 Einbindung in App
ng generate component job

23. job.component.ts
job.component.ts:
import { Component, OnInit } from '@angular/core';
import { Job } from '../Job';
import { JobStatus } from '../Job';
import { JOBS } from '../mock-jobs‘;
@Component({
selector: 'app-job',
templateUrl: './job.component.html',
styleUrls: ['./job.component.css']
})
export class JobComponent implements OnInit {
jobList: Array<Job> = JOBS;
selectedJob: Job;
constructor() { }
ngOnInit() {
}
onSelect(job: Job): void {
this.selectedJob = job;
}
}

24. Job.component.html
<div class="row">
<div class="list-group col-8">
<h3>Übersicht über Fahraufträge</h3>
<a class="list-group-item list-group-item-action" *ngFor="let job of jobList"
[class.active]="job === selectedJob"
(click)="onSelect(job)">
{{job.item}} von {{job.source}} nach {{job.destination}}
</a>
</div>
<div class="col-4">
<h3>Detail Informationen</h3><br>
<div *ngIf="selectedJob" class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Aktueller Fahrauftrag</div>
<div class="card-body">
<p class="card-text">
<span>AuftragsId: {{selectedJob.id}}</span> <br>
<span>Was: {{selectedJob.item}}</span><br>
<span>Abholort: {{selectedJob.source}}</span> <br>
<span>Ziel: {{selectedJob.destination}}</span> <br>
<span>Status: {{selectedJob.status}}</span>
</p>
…
</div>

25. app.component.html
 C:UsersyvetteDropboxDevANGULARtruckcall List And
Selectionsrcapp
<div class="container">
<div style="text-align:center">
<h1>
Willkommen zu {{ title }}!
</h1>
</div>
<div>
<app-job></app-job>
</div>
</div>
Folder App with List

26. Trennung von Verantwortlichkeiten
 Idee: Separation of Concerns
 Job Liste und Detail Ansicht splitten in einzelne Komponenten
 Erhöht Wiederverwertbarkeit ng generate component job-detail

27. Extraktion der Details in eigene
KomponenteJob.component.html:
<div class="col-4">
<app-job-detail
[selectedJob]="selectedJob">
</app-job-detail>
</div>
…
job-detail.component.ts:
@Input() selectedJob: Job;
job-detail.component.htm:
<div *ngIf="selectedJob" class="card border-secondary mb
<h3>Detail Informationen</h3><br>
<div class="card-header">Aktueller Fahrauftrag</div>
<div class="card-body">
<p class="card-text">
<span>AuftragsId: {{selectedJob.id}}</span> <br>
<span>Was: {{selectedJob.item}}</span><br>
<span>Abholort: {{selectedJob.source}}</span> <br>
<span>Ziel: {{selectedJob.destination}}</span> <br>
<span>Status: {{selectedJob.status}}</span>
</p>
</div>
</div>
src: master Detail

28. Mehr Trennung: Services
 Aufgaben von Angular Components:
 Anzeigen von Daten
 Aufbereiten von Daten |Filtern
 Services
 Daten holen
 Daten manipulieren
 Daten speichern
 Unsere App:
 Mock Daten direkt aus
Component holen
 Umbau:
 Verwendung von Services

29. Job Service
 Service erstellen ng generate service job
job.service:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class JobService {
constructor() { }
}

30. Basis Implementierung
 Asynchronität Non-Blocking des
Web:
 Observables
Job.service.ts:
import { Injectable } from '@angular/core';
import {Job} from './Job';
import {JOBS} from './mock-jobs';
@Injectable({
providedIn: 'root'
})
export class JobService {
getJobs(): Job[] {
return JOBS;
}
constructor() { }
}
import { Observable, of } from 'rxjs’;
…
getJobs(): Observable<Job[]> {
return of(JOBS);
}

31. Observable Job Component
job.component.ts:
import { Component, OnInit } from '@angular/core';
import { Job } from '../Job';
import {JobService} from '../job.service';
@Component({ … })
export class JobComponent implements OnInit {
jobList :Job[];
selectedJob: Job;
constructor(private jobService : JobService) { }
ngOnInit() {
this.getJobs();
}
getJobs(): void {
this.jobService.getJobs()
.subscribe(jobs => this.jobList = jobs);
}
onSelect(job: Job): void {
this.selectedJob = job;
}
}

32. Recap – Was haben wir?
 Komponenten
 Services
 Master Detail

33. Was ist mit dem Nutzer?

34. Neue Anforderung
 Ich als Gabelstapler Fahrer
möchte eine Übersicht für alle
offenen Fahraufträge haben,
damit ich diese gezielt annehmen
kann.

35. Unterschiedliche Sichten
 Umsetzen
 Übersicht über offene Aufträge für Fahrer
 Eine Gesamtliste für die Disponenten
 Eine Detailsicht der Aufträge für beide
 Unterschiedliche Sichten auf die App

36. User Experience

37. Routing „Design“

38. App.component.html erweitern
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Fahraufträge</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expande
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/dashboard">Home <span class="sr-only">(current)</span></a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="/dashboard">Hotlist</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="list">Alle</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<div style="text-align:center">
<h1>
<br> Willkommen zu {{ title }}! <br>
</h1>
</div>
</div>
</div>

40. Basic Router Module
 Auf Browser Veränderung hören:
 RouterModule.forRoot(routes)
 Platzhalter für Inhalt:
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {MyComponent} from ./*';
const routes: Routes = [
// hier Routen definieren
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
ng generate module app-routing --flat --module=app
app.component.html:
<h1>{{title}}</h1>
<router-outlet></router-outlet>

41. Dashboard: Komponente für Offene
Aufträge
ng generate component dashboard
<div class="grid grid-pad">
<a *ngFor="let job of openjobs" class="col-1" routerLink="/detail/{{job.id}}">
<div class="module ">
<h4>{{job.item}} nach {{job.destination}}</h4>
…
import { Component, OnInit } from '@angular/core‘;
…
@Component({ …})
export class DashboardComponent implements OnInit
openjobs: Job[] = [];
constructor(private jobservice: JobService) { }
ngOnInit() {
this.getOpenJobs();
}
getOpenJobs(): void {
this.jobservice.getOpenJobs()
.subscribe(jobs => this.openjobs = jobs);
}
}

42. Dashboard Sicht

43. Routen erweitern
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {JobComponent} from './job/job.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { JobDetailComponent } from './job-detail/job-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'list', component: JobComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: JobDetailComponent },
{ path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }

44. Detailansicht für Fahraufträge:
job-detail.component.html:
import { Component, OnInit, Input} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Job } from '../Job';
import {JobService} from '../job.service';
@Component({ … })
export class JobDetailComponent implements OnInit {
@Input() selectedJob: Job;
constructor(
private route: ActivatedRoute,
private jobService: JobService,
) { }
getJob(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.jobService.getJob(id)
.subscribe(hero => this.selectedJob = hero);
}
ngOnInit() {
this.getJob();
}

45. Fertig!
 App auf http://localhost:4200/
 Code C:UsersyvetteDropboxDevANGULARtruckcall

46. Weitermachen

47. Ergebnisse Prototyp
 Managing der Erwartungshaltung des Kunden
 Möchtest du das so?
 Kann man das so bedienen?
 Löst das unser Problem?
 Vorteil von Angular: Rapid Prototyping vor Ort:
 Weitere Verfeinerung des Konzepts

48. Unsere Weiterentwicklung
 App und Webanwendung
 Webanwendung: Disponenten
 App für die Gabelstapler Fahrer
 Ionic für Mobile Android App

49. Linde Truck Call

50. Fertig Truck Call App

51. Selber weitermachen
https://github.com/yte424/truckcall

52. Danke
Twitter: @yteiken
E-Mail: yvette.teiken@erminas.de