SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Angular von 0 auf 100
Dr. Yvette Teiken
Logistik
 Dr. Yvette Teiken
 CTO und Gründerin erminas GmbH
 @yteiken
 Code: yte424
 https://github.com/yte424/truckcall
Agenda
 Einführung in Angular
 Demo App bauen
 Rapid Prototyping
 Weiterführende Themen
Was ist Angular?
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
AngularJS  Angular
 2009 Angular 1.0  AngularJS
 Schnell populär geworden
 2016 Rewrite
 Angular 2 jetzt nur noch Angular
 Aktuell: Angular 6.1
War braucht man für den Einstieg?
 Notwendig:
 JavaScript
 HTML
 CSS
 Wünschenswert
 OOP Konzepte kennen
 C++, Java, C#, …
TypeScript als Programmiersprache für
Angular
 „Standardsprache“ für Angular Applikationen
 „Typisiertes JavaScript“
 Klassen/Objekte
 Precompiler erzeugt JavaScript
 …
Editoren
 Visual Studio
 Visual Studio Code
 WebStorm
 Atom
 Eclipse
 Sublime
 ….
Rapid Prototyping
Angular in Aktion
Wellpappe
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!
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
App Grundgerüst
 Einstiegspunkt
 Konfiguration: angular.json
 Definiert das komplette Projekt und deren
Abhängigkeiten
 Folder: angular.json
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>
Rapid Prototyping
Logik hinzufügen
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
}
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},
];
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
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;
}
}
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>
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
Trennung von Verantwortlichkeiten
 Idee: Separation of Concerns
 Job Liste und Detail Ansicht splitten in einzelne Komponenten
 Erhöht Wiederverwertbarkeit ng generate component job-detail
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
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
Job Service
 Service erstellen ng generate service job
job.service:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class JobService {
constructor() { }
}
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);
}
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;
}
}
Recap – Was haben wir?
 Komponenten
 Services
 Master Detail
Was ist mit dem Nutzer?
Neue Anforderung
 Ich als Gabelstapler Fahrer
möchte eine Übersicht für alle
offenen Fahraufträge haben,
damit ich diese gezielt annehmen
kann.
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
User Experience
Routing „Design“
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>
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>
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);
}
}
Dashboard Sicht
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 { }
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();
}
Fertig!
 App auf http://localhost:4200/
 Code C:UsersyvetteDropboxDevANGULARtruckcall
Weitermachen
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
Unsere Weiterentwicklung
 App und Webanwendung
 Webanwendung: Disponenten
 App für die Gabelstapler Fahrer
 Ionic für Mobile Android App
Linde Truck Call
Fertig Truck Call App
Selber weitermachen
https://github.com/yte424/truckcall
Danke
Twitter: @yteiken
E-Mail: yvette.teiken@erminas.de

Weitere ähnliche Inhalte

Was ist angesagt?

Api Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformApi Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformStefan Adolf
 
JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)Michael Kurz
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile ServicesSascha Dittmann
 
IPC 2015 Zend Framework 3 Reloaded
IPC 2015 Zend Framework 3 ReloadedIPC 2015 Zend Framework 3 Reloaded
IPC 2015 Zend Framework 3 ReloadedRalf Eggert
 
Enterprise Java Batch mit Spring
Enterprise Java Batch mit SpringEnterprise Java Batch mit Spring
Enterprise Java Batch mit Springdenschu
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTddjlink
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 

Was ist angesagt? (8)

Api Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformApi Platform: the ultimate API Platform
Api Platform: the ultimate API Platform
 
JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Services
 
IPC 2015 Zend Framework 3 Reloaded
IPC 2015 Zend Framework 3 ReloadedIPC 2015 Zend Framework 3 Reloaded
IPC 2015 Zend Framework 3 Reloaded
 
Enterprise Java Batch mit Spring
Enterprise Java Batch mit SpringEnterprise Java Batch mit Spring
Enterprise Java Batch mit Spring
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTdd
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 

Ähnlich wie Angular von 0 auf 100

Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Manfred Steyer
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetManfred Steyer
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2Manfred Steyer
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1Manfred Steyer
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenPhilipp Burgmer
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit antroskakori
 
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 2015Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Manfred Steyer
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Sven Haiges
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Manfred Steyer
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenJens Klein
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutschHanns Nolan
 
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 MiddlewaresMatthias Jauernig
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtAndreas Schiweck
 
Lightweight AOP with CDI and JPA
Lightweight AOP with CDI and JPALightweight AOP with CDI and JPA
Lightweight AOP with CDI and JPAmh0708
 

Ähnlich wie Angular von 0 auf 100 (20)

Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpen
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
 
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
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
 
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
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
 
Lightweight AOP with CDI and JPA
Lightweight AOP with CDI and JPALightweight AOP with CDI and JPA
Lightweight AOP with CDI and JPA
 

Mehr von Yvette Teiken

BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...Yvette Teiken
 
Datenanalyse in der Praxis
Datenanalyse in der PraxisDatenanalyse in der Praxis
Datenanalyse in der PraxisYvette Teiken
 
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der WissensgesellschaftPraktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der WissensgesellschaftYvette Teiken
 
A common meta model for data analysis based on DSM
A common meta model for data analysis based on DSMA common meta model for data analysis based on DSM
A common meta model for data analysis based on DSMYvette Teiken
 
Using SLE for creation of data warehouses
Using SLE for creation of data warehousesUsing SLE for creation of data warehouses
Using SLE for creation of data warehousesYvette Teiken
 
MIcrosoft Self Service BI
MIcrosoft Self Service BIMIcrosoft Self Service BI
MIcrosoft Self Service BIYvette Teiken
 
Microsoft on Big Data
Microsoft on Big DataMicrosoft on Big Data
Microsoft on Big DataYvette Teiken
 
Mobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaMobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaYvette Teiken
 
Microsoft Azure in der Praxis
Microsoft Azure in der PraxisMicrosoft Azure in der Praxis
Microsoft Azure in der PraxisYvette Teiken
 
Net ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_introNet ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_introYvette Teiken
 

Mehr von Yvette Teiken (10)

BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
BPW Vortragsabend: Praktisches Selbst- und Zeitmanagement in der Wissensgesel...
 
Datenanalyse in der Praxis
Datenanalyse in der PraxisDatenanalyse in der Praxis
Datenanalyse in der Praxis
 
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der WissensgesellschaftPraktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
Praktisches Selbst- und Zeitmanagement in der Wissensgesellschaft
 
A common meta model for data analysis based on DSM
A common meta model for data analysis based on DSMA common meta model for data analysis based on DSM
A common meta model for data analysis based on DSM
 
Using SLE for creation of data warehouses
Using SLE for creation of data warehousesUsing SLE for creation of data warehouses
Using SLE for creation of data warehouses
 
MIcrosoft Self Service BI
MIcrosoft Self Service BIMIcrosoft Self Service BI
MIcrosoft Self Service BI
 
Microsoft on Big Data
Microsoft on Big DataMicrosoft on Big Data
Microsoft on Big Data
 
Mobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaMobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache Cordova
 
Microsoft Azure in der Praxis
Microsoft Azure in der PraxisMicrosoft Azure in der Praxis
Microsoft Azure in der Praxis
 
Net ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_introNet ug oldenburg_2015_03_intro
Net ug oldenburg_2015_03_intro
 

Angular von 0 auf 100

  • 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
  • 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  ….
  • 11.
  • 13.
  • 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
  • 16.
  • 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>
  • 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
  • 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>
  • 39.
  • 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); } }
  • 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
  • 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

Hinweis der Redaktion

  1. Tonspur: Wo immer der Begriff Digitalisierung fällt, ist meist ein ganz bestimmter Teilbereich gemeint. Wenn wir über Datenpotenziale sprechen, müssen wir zunächst versuchen, uns einen Überblick zu verschaffen.
  2. Tonspur: Wo immer der Begriff Digitalisierung fällt, ist meist ein ganz bestimmter Teilbereich gemeint. Wenn wir über Datenpotenziale sprechen, müssen wir zunächst versuchen, uns einen Überblick zu verschaffen.
  3. Artikel zur https://nitayneeman.com/posts/understanding-the-angular-cli-workspace-file/
  4. Nicht zwangsweise css, kann auch less oder sas sein  Cli anpassen
  5. Beim Typen Bindung wird on the fly validiert
  6. Kein NgIF  wird nicht in Dom eingebaut
  7. In der Regel nich bockiernde  Spezialfall
  8. Jeder mal wenn observabel nuenen Wert wird die auch aktualisiert Subscribe bleibt immer bestehen. Auch mal Unssubscribe verwenden ngOnDistroy Alternativ await async
  9. Short beim erstellen –_routing alles fertig Modula pp: bei mehren modulen wichtig