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
From Zero to Azure with Angular
Search
Fabian Gosebrink
March 01, 2018
Technology
1
310
From Zero to Azure with Angular
Slides for my talk "From Zero to Azure with Angular" at the Microsoft TechSummit 2018
Fabian Gosebrink
March 01, 2018
Tweet
Share
More Decks by Fabian Gosebrink
See All by Fabian Gosebrink
Why State is the Most Important Part of Your Angular Application
fabiangosebrink
0
43
Angular testing made easy with Jest and Cypress
fabiangosebrink
0
78
Introducing state management into an application with NgRx
fabiangosebrink
0
120
Scalable architectures in Angular with Nx
fabiangosebrink
0
100
My Biggest Angular Mistakes and How To Avoid Them
fabiangosebrink
0
200
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
130
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
320
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
96
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
97
Other Decks in Technology
See All in Technology
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
Lazy application authentication with Tailscale
bluehatbrit
0
170
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
18
6.1k
モバイル界のMCPを考える
naoto33
0
420
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.2k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
Connect 100+を支える技術
kanyamaguc
0
190
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Being A Developer After 40
akosma
90
590k
Practical Orchestrator
shlominoach
188
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Writing Fast Ruby
sferik
628
62k
Producing Creativity
orderedlist
PRO
346
40k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
A Tale of Four Properties
chriscoyier
160
23k
Building Adaptive Systems
keathley
43
2.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
None
None
@FabianGosebrink
@FabianGosebrink @EverythingGoats
@FabianGosebrink
None
None
None
Frontend
Server Client HTTP
Keep it
None
None
None
None
None
> npm install <myPackage>
> npm install <myPackage> -g
None
None
Angular CLI
focus
None
> ng g c myFirst
None
REST-Service Component Component Component
None
Component Component Component REST-Service
None
Presentational Component Smart Component Presentational Component REST-Service Presentational Component Smart
Component Presentational Component REST-Service Presentational Component Smart Component Presentational Component REST-Service
Presentational Component Smart Component Presentational Component REST-Service (…) […] (…)
[…]
None
None
AppModule
Component Component Component AppModule
Component Component Component Component Component Component AppModule
AppModule Component Component Component Component Component Component Component Component Component
Component Component Component Component Component Component Component Component Component Component
Component Component AppModule
Separate into modules
None
When to create a module?
“When to create a module?”
Component App
Component App Components Pipes Directives Feature etc.
Component Component Component Component Component Component Feature Component App Components
Pipes Directives Feature etc.
Component Component Component Component Component Component Feature Component App Components
Pipes Directives Feature Service Service Service Core etc. etc.
Component Component Component Component Component Component Feature Component App Components
Pipes Directives Feature Service Service Service Core Components Pipes Directives Shared etc. etc. etc.
https://stackblitz.com/edit/angular-q3ruah
Module Core
Module Shared
None
None
None
None
Component Services
Component
Store Component
None
None
None
Store Component Reducer
None
Store Component Reducer
Store Component Reducer store.select(…)
Store Component Reducer store.select(…) store.dispatch(…)
None
None
Smart component Pres. component store.select(…) @Input(…) store.dispatch(…) @Output(…)
Store Component Reducer store.select(…) store.dispatch(…) Effects
None
Store Component Reducer store.select(…) store.dispatch(…) Effects
Store Component Reducer store.select(…) store.dispatch(…) Effects Services
None
None
None
None
Lazy Loading
None
a great production build
treeshaking
ahead of time compilation
> ng build --prod
None
Demo
Change your code
Automate
None
None
https://offering.solutions https://angular-academy.ch https://swissangular.com https://github.com/FabianGosebrink/ ASPNETCore-Angular-Ngrx @FabianGosebrink