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
manfredsteyer
PRO
0
160
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
510
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
370
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
130
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
180
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
330
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
220
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
190
Other Decks in Programming
See All in Programming
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
440
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
530
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
230
ワープロって実は計算機で
pepepper
2
1.1k
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2k
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
390
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
940
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
190
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Balancing Empowerment & Direction
lara
1
530
Into the Great Unknown - MozCon
thekraken
40
2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
The Cult of Friendly URLs
andyhume
79
6.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Fireside Chat
paigeccino
38
3.6k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Speed Design
sergeychernyshev
32
1.1k
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