Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Intro from Global Azure Bootcamp, 2017 ...
Search
Manfred Steyer
PRO
April 22, 2017
Programming
0
210
Angular Intro from Global Azure Bootcamp, 2017 in Linz
Angular Intro from Global Azure Bootcamp, 2017 in Linz
Manfred Steyer
PRO
April 22, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
8
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
5つのアンチパターンから学ぶLT設計
narihara
1
160
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
230
Deep Dive into ~/.claude/projects
hiragram
13
2.4k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.1k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.3k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Gamification - CAS2011
davidbonilla
81
5.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Rails Girls Zürich Keynote
gr2m
94
14k
Practical Orchestrator
shlominoach
188
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
Angular und Azure Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer ManfredSteyer
Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
Inhalt • Motivation • Eine erste Komponente mit Angular •
DEMO
Motivation Page ▪ 4
Plattformen und Usability HTML + JavaScript
Single Page Application (SPA) Page ▪ 6 Services HTML/ JavaScript-Client
HTTP
Google Community v1: 1,2 Mio Entwickler Weltweit V2/4: 600K Entwickler
angular- connect, London Folie▪ 10
angular- connect, London Folie▪ 11
Was ist Angular? Page ▪ 12 SPA- Framework Performance Komponenten
Modern Web Flexibler Renderer
TypeScript ES 6 Sprachen Page ▪ 13 ES 5 Kompilierung
Eine erste Komponente Page ▪ 14
Komponente als TypeScript-Klasse Page ▪ 15 @Component({ selector: 'flug-suchen', templateUrl:
'./flug-suchen.html' }) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(http: Http) { } search(): void { [...] } select(flug: Flug): void { [...] } }
Template Page ▪ 16 <input [(ngModel)]="von"> <input [(ngModel)]="nach"> <button [disabled]="!von
|| !nach" (click)="search()"> Search </button> <table> <tr *ngFor="let flug of fluege"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table> Two-Way-Binding Event-Binding Property-Binding Template
Anwendung == Kompontentenbaum Page ▪ 17 Root-Component
Anwendung == Kompontentenbaum Page ▪ 18 AppComponent FlugSuchen Component
AppComponent Page ▪ 19 @Component({ selector: 'flug-app', template: './app.component.html' })
export class AppComponent { }
AppComponent Page ▪ 20 <nav class="..."> <!-- Menü --> </nav>
<div class="container"> <flug-suchen></flug-suchen> </div>
Projektstart
Projektstart mit Angular CLI
Material Design Light
DEMO Page ▪ 24
Tooling CLI: Scaffoling und Build Augury: Debugging Angular Language Service
VS Code Snippets und Plugins
Zusammenfassung Weite Verbreitung TypeScript Komponenten Datenbindung Tooling
Kontakt [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer