Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

From Zero to Azure with Angular

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
Why State Is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
45
Scalable Angular Architectures with Route-Based Architecture
Avatar for Fabian Gosebrink fabiangosebrink
0
36
Advanced Signal Store: Structuring State for Real Angular Applications
Avatar for Fabian Gosebrink fabiangosebrink
0
130
NgRx Signal Store - A Deeper Dive
Avatar for Fabian Gosebrink fabiangosebrink
0
85
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
150
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
170
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
190
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
280
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
280

Other Decks in Technology

See All in Technology
『SAR衛星データ解析入門』の ご紹介とその応用
Avatar for じゃらしまる syuchimu
0
120
日本語に強いオープンな大規模言語モデル「LLM-jp」
Avatar for Yusuke Oda odashi
4
1.1k
コンテナ運用におけるネットワーク・コンテナコストの削減方法／How to Reduce Network and Container Costs in Container Operations
Avatar for モブエンジニア masakiokuda
1
200
Getting Started with Google Antigravity
Avatar for Guillaume Laforge glaforge
0
310
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
8
3.1k
自作バイナリを動かす「入口」8選
Avatar for Takumi Sueda puhitaku
2
1.3k
[JAWS-UG彩の国埼玉#12]そろそろ準備する？re:Invent2026をやさしく解説 / reinvent2026-sainokuni
Avatar for sh_fk2 sh_fk2
1
340
サブエージェントと Claude Mods で作る独自 Advisor ツールの話
Avatar for Kenichi Odo kenichiodo
2
160
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
770
Classmethod Company Deck
Avatar for Satoshi7 satoshi7
1
690
How to Design Configuration for Rails Applications
Avatar for Shinichi Maeshima willnet
1
790
TinyGoでオブザーバビリティ？OpenTelemetryはTinyGoで使えるのか / Is OpenTelemetry available in TinyGo environment?
Avatar for ymotongpoo ymotongpoo
2
140

Featured

See All Featured
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
460
Designing for Performance
Avatar for Lara Hogan lara
612
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
870
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Visualization
Avatar for Eitan Lees eitanlees
153
17k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
410
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
430
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
310
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
2
2k

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