Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Zero to Azure with Angular

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Fabian Gosebrink Fabian Gosebrink
March 01, 2018
Technology
320
1

From Zero to Azure with Angular

Slides for my talk "From Zero to Azure with Angular" at the Microsoft TechSummit 2018

Avatar for Fabian Gosebrink

Fabian Gosebrink

March 01, 2018

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Advanced Signal Store: Structuring State for Real Angular Applications
Avatar for Fabian Gosebrink fabiangosebrink
0
79
NgRx Signal Store - A Deeper Dive
Avatar for Fabian Gosebrink fabiangosebrink
0
55
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
95
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
130
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
160
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
240
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
220
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
330
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
220

Other Decks in Technology

See All in Technology
脆弱性対応、どこで線を引くか
Avatar for ryoji miyamoto rymiyamoto
1
420
MUSUBI 田中裕一『AIと共に行う「しごとのリデザイン」- スモールバックオフィス編』AI Ops Lab #4
Avatar for MUSUBI musubi
0
270
生成 AI 実践ガイド (概略版) AIガバナンス編
Avatar for Asei Sugiyama asei
0
120
スタートアップにAmazon EKSは早すぎる？ マルチプロダクト戦略を加速する Platform Engineeringの実践 / Is Amazon EKS Too Soon for Startups? Practical Platform Engineering to Accelerate a Multi-Product Strategy
Avatar for elmo elmodev09
0
370
Lightning近況報告
Avatar for Koji NAKAMURA kozy4324
0
190
徹底討論！ECS vs EKS！
Avatar for 高棹大樹 daitak
0
230
Kubernetesにおける学習基盤とLLMOpsの概要
Avatar for ry ry
1
320
不要なレビューをAIにまかせて AIコーディングの環境改善を加速した
Avatar for shoota shoota
1
230
【NRUG vol.18】KubernetesにおけるNew Relicデータ取得量削減の考え方
Avatar for NRUG member nrug_member
0
170
iAEONの段階的リアーキテクト戦略 / iAEON's_Gradual_Re-architecture_Strategy
Avatar for AEON aeonpeople
0
230
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
180
ぼっちではじめた登壇が「51名」「241件」の発信に化けた
Avatar for subroh_0508 subroh0508
1
240

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
8.1k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
460
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.5k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
730
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k

Transcript

  1. None
  2. None

  3. @FabianGosebrink

  4. @FabianGosebrink @EverythingGoats

  5. @FabianGosebrink

  6. None
  7. None
  8. None

  9. Frontend

  10. Server Client HTTP

  11. Keep it

  12. None
  13. None
  14. None
  15. None
  16. None

  17. > npm install <myPackage>

  18. > npm install <myPackage> -g

  19. None
  20. None

  21. Angular CLI

  22. focus

  23. None

  24. > ng g c myFirst

  25. None

  26. REST-Service Component Component Component

  27. None

  28. Component Component Component REST-Service

  29. None

  30. Presentational Component Smart Component Presentational Component REST-Service Presentational Component Smart

    Component Presentational Component REST-Service Presentational Component Smart Component Presentational Component REST-Service

  31. Presentational Component Smart Component Presentational Component REST-Service (…) […] (…)

    […]
  32. None
  33. None

  34. AppModule

  35. Component Component Component AppModule

  36. Component Component Component Component Component Component AppModule

  37. AppModule Component Component Component Component Component Component Component Component Component

  38. Component Component Component Component Component Component Component Component Component Component

    Component Component AppModule

  39. Separate into modules

  40. None

  41. When to create a module?

  42. “When to create a module?”

  43. Component App

  44. Component App Components Pipes Directives Feature etc.

  45. Component Component Component Component Component Component Feature Component App Components

    Pipes Directives Feature etc.

  46. Component Component Component Component Component Component Feature Component App Components

    Pipes Directives Feature Service Service Service Core etc. etc.

  47. Component Component Component Component Component Component Feature Component App Components

    Pipes Directives Feature Service Service Service Core Components Pipes Directives Shared etc. etc. etc.

  48. https://stackblitz.com/edit/angular-q3ruah

  49. Module Core

  50. Module Shared

  51. None
  52. None
  53. None
  54. None

  55. Component Services

  56. Component

  57. Store Component

  58. None
  59. None
  60. None

  61. Store Component Reducer

  62. None

  63. Store Component Reducer

  64. Store Component Reducer store.select(…)

  65. Store Component Reducer store.select(…) store.dispatch(…)

  66. None
  67. None

  68. Smart component Pres. component store.select(…) @Input(…) store.dispatch(…) @Output(…)

  69. Store Component Reducer store.select(…) store.dispatch(…) Effects

  70. None

  71. Store Component Reducer store.select(…) store.dispatch(…) Effects

  72. Store Component Reducer store.select(…) store.dispatch(…) Effects Services

  73. None
  74. None
  75. None
  76. None

  77. Lazy Loading

  78. None

  79. a great production build

  80. treeshaking

  81. ahead of time compilation

  82. > ng build --prod

  83. None

  84. Demo

  85. Change your code

  86. Automate

  87. None
  88. None

  89. https://offering.solutions https://angular-academy.ch https://swissangular.com https://github.com/FabianGosebrink/ ASPNETCore-Angular-Ngrx @FabianGosebrink