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
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
91
NgRx Signal Store - A Deeper Dive
Avatar for Fabian Gosebrink fabiangosebrink
0
65
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
110
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
140
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
180
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
260
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
240
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
340
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
220

Other Decks in Technology

See All in Technology
QAと開発の両側から進める AI活用　-QAプロセスAI支援ツールキットと Inner Loop / Outer Loopの取り組み-
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
2
380
Retriever と Reranker、結局どうする？
Avatar for hkazuakey kazuaki
1
530
テックカンファレンス三大ステークホルダーの文化人類学 ─ 違いを認め合う関係性作り
Avatar for bash0C7 bash0c7
5
1.4k
ここは地獄！つらい朝会を体験することで、チームとしてのより良い振る舞いに気づくワークショップ / The stand-up meeting from hell in the game industry
Avatar for scrummasudar scrummasudar
0
440
PLaMo 3.0 Primeの構造化出力サポート
Avatar for Preferred Networks pfn
PRO
0
140
20260801_スクフェス大阪
Avatar for hikari kgnkhkr
0
130
GMOフィナンシャルゲートが挑む、「止まらない」決済インフラ構築の裏側【SORACOM Discovery 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
110
「待ち時間」の消滅と「自我消耗」の加速：生成AI時代のエンジニアを救うメンタル・リソース管理
Avatar for フクイ poropinai1966
0
370
AI エージェント時代のデジタルアイデンティティ
Avatar for Naohiro Fujie fujie
2
1.2k
データ活用研修 データマネジメント【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
4
820
それでも、技術なブログを書く理由 #kichijojipm / Why I Still Write Tech Blogs Even Now
Avatar for ShinkuFencer shinkufencer
0
1.4k
PLaMo 3.0 Primeの事後学習
Avatar for Preferred Networks pfn
PRO
0
210

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
400
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
160
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
9.9k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
620
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k

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