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

From Zero to Azure with Angular

Avatar for Fabian Gosebrink 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

Avatar for Fabian Gosebrink

Fabian Gosebrink

March 01, 2018
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
49
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
88
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
130
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
110
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
210
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
140
Mastering State Management in Angular with the NgRx Signal Store
Avatar for Fabian Gosebrink fabiangosebrink
0
320
Angular Architectures with NgRx Stores & Effects
Avatar for Fabian Gosebrink fabiangosebrink
0
100
Angular Testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
100

Other Decks in Technology

See All in Technology
AI駆動開発 with MixLeap Study【大阪支部 #3】
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
280
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
Avatar for Yusuke Kuroiwa wakinchan
0
180
Rubyの国のPerlMonger
Avatar for AnaTofuZ anatofuz
1
410
【Λ（らむだ）】最近のアプデ情報 / RPALT20250729
Avatar for Λ lambda
0
190
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
Avatar for Tomoaki tomoaki25
0
240
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
Avatar for NTT docomo Business nttcom
1
230
少人数でも回る！ DevinとPlaybookで支える運用改善
Avatar for ishikawa-pro ishikawa_pro
5
2k
私とAWSとの関わりの歩み～意志あるところに道は開けるかも？～
Avatar for nagisa_53 nagisa53
1
140
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
Avatar for knt44kw knt44kw
0
110
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
Avatar for Arthur arthur1
0
210
MCPと認可まわりの話 / mcp_and_authorization
Avatar for convto convto
2
340
Mambaで物体検出 完全に理解した
Avatar for Reiki Shirasawa shirarei24
2
160

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
KATA
Avatar for Megan Lloyd mclloyd
31
14k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.6k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k

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