Tweet
Tweet

Slide 1

Slide 1 text

Angular und Azure Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer ManfredSteyer

Slide 2

Slide 2 text

Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer

Slide 3

Slide 3 text

Inhalt • Motivation • Eine erste Komponente mit Angular • DEMO

Slide 4

Slide 4 text

Motivation Page ▪ 4

Slide 5

Slide 5 text

Plattformen und Usability HTML + JavaScript

Slide 6

Slide 6 text

Single Page Application (SPA) Page ▪ 6 Services HTML/ JavaScript-Client HTTP

Slide 7

Slide 7 text

Google Community v1: 1,2 Mio Entwickler Weltweit V2/4: 600K Entwickler

Slide 8

Slide 8 text

angular- connect, London Folie▪ 10

Slide 9

Slide 9 text

angular- connect, London Folie▪ 11

Slide 10

Slide 10 text

Was ist Angular? Page ▪ 12 SPA- Framework Performance Komponenten Modern Web Flexibler Renderer

Slide 11

Slide 11 text

TypeScript ES 6 Sprachen Page ▪ 13 ES 5 Kompilierung

Slide 12

Slide 12 text

Eine erste Komponente Page ▪ 14

Slide 13

Slide 13 text

Komponente als TypeScript-Klasse Page ▪ 15 @Component({ selector: 'flug-suchen', templateUrl: './flug-suchen.html' }) export class FlugSuchenComponent { von: string; nach: string; fluege: Array; constructor(http: Http) { } search(): void { [...] } select(flug: Flug): void { [...] } }

Slide 14

Slide 14 text

Template Page ▪ 16 Search {{flug.id}} {{flug.datum}} {{flug.von}} {{flug.nach}} Two-Way-Binding Event-Binding Property-Binding Template

Slide 15

Slide 15 text

Anwendung == Kompontentenbaum Page ▪ 17 Root-Component

Slide 16

Slide 16 text

Anwendung == Kompontentenbaum Page ▪ 18 AppComponent FlugSuchen Component

Slide 17

Slide 17 text

AppComponent Page ▪ 19 @Component({ selector: 'flug-app', template: './app.component.html' }) export class AppComponent { }

Slide 18

Slide 18 text

AppComponent Page ▪ 20

Slide 19

Slide 19 text

Projektstart

Slide 20

Slide 20 text

Projektstart mit Angular CLI

Slide 21

Slide 21 text

Material Design Light

Slide 22

Slide 22 text

DEMO Page ▪ 24

Slide 23

Slide 23 text

Tooling CLI: Scaffoling und Build Augury: Debugging Angular Language Service VS Code Snippets und Plugins

Slide 24

Slide 24 text

Zusammenfassung Weite Verbreitung TypeScript Komponenten Datenbindung Tooling

Slide 25

Slide 25 text

Kontakt [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer