Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular von 0 auf 100

185 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Angular von 0 auf 100

  1. 1. Angular von 0 auf 100 Dr. Yvette Teiken
  2. 2. Logistik  Dr. Yvette Teiken  CTO und Gründerin erminas GmbH  @yteiken  Code: yte424  https://github.com/yte424/truckcall
  3. 3. Agenda  Einführung in Angular  Demo App bauen  Rapid Prototyping  Weiterführende Themen
  4. 4. Was ist Angular?
  5. 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. 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. 7. War braucht man für den Einstieg?  Notwendig:  JavaScript  HTML  CSS  Wünschenswert  OOP Konzepte kennen  C++, Java, C#, …
  8. 8. TypeScript als Programmiersprache für Angular  „Standardsprache“ für Angular Applikationen  „Typisiertes JavaScript“  Klassen/Objekte  Precompiler erzeugt JavaScript  …
  9. 9. Editoren  Visual Studio  Visual Studio Code  WebStorm  Atom  Eclipse  Sublime  ….
  10. 10. Rapid Prototyping Angular in Aktion
  11. 11. Wellpappe
  12. 12. 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!
  13. 13. 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
  14. 14. App Grundgerüst  Einstiegspunkt  Konfiguration: angular.json  Definiert das komplette Projekt und deren Abhängigkeiten  Folder: angular.json
  15. 15. 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>
  16. 16. Rapid Prototyping Logik hinzufügen
  17. 17. 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 }
  18. 18. 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}, ];
  19. 19. 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
  20. 20. 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; } }
  21. 21. 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>
  22. 22. 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
  23. 23. Trennung von Verantwortlichkeiten  Idee: Separation of Concerns  Job Liste und Detail Ansicht splitten in einzelne Komponenten  Erhöht Wiederverwertbarkeit ng generate component job-detail
  24. 24. 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
  25. 25. 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
  26. 26. Job Service  Service erstellen ng generate service job job.service: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class JobService { constructor() { } }
  27. 27. 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); }
  28. 28. 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; } }
  29. 29. Recap – Was haben wir?  Komponenten  Services  Master Detail
  30. 30. Was ist mit dem Nutzer?
  31. 31. Neue Anforderung  Ich als Gabelstapler Fahrer möchte eine Übersicht für alle offenen Fahraufträge haben, damit ich diese gezielt annehmen kann.
  32. 32. 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
  33. 33. User Experience
  34. 34. Routing „Design“
  35. 35. 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>
  36. 36. 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>
  37. 37. 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); } }
  38. 38. Dashboard Sicht
  39. 39. 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 { }
  40. 40. 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(); }
  41. 41. Fertig!  App auf http://localhost:4200/  Code C:UsersyvetteDropboxDevANGULARtruckcall
  42. 42. Weitermachen
  43. 43. 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
  44. 44. Unsere Weiterentwicklung  App und Webanwendung  Webanwendung: Disponenten  App für die Gabelstapler Fahrer  Ionic für Mobile Android App
  45. 45. Linde Truck Call
  46. 46. Fertig Truck Call App
  47. 47. Selber weitermachen https://github.com/yte424/truckcall
  48. 48. Danke Twitter: @yteiken E-Mail: yvette.teiken@erminas.de

×