Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

From Zero to Azure with Angular

Avatar for Fabian Gosebrink Fabian Gosebrink
March 01, 2018
Technology
1
320

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
71
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
110
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
180
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
150
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
260
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
160
Mastering State Management in Angular with the NgRx Signal Store
Avatar for Fabian Gosebrink fabiangosebrink
0
390
Angular Architectures with NgRx Stores & Effects
Avatar for Fabian Gosebrink fabiangosebrink
0
120
Angular Testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
120

Other Decks in Technology

See All in Technology
【AWS re:Invent 2025速報】AIビルダー向けアップデートをまとめて解説！
Avatar for みのるん minorun365
4
510
手動から自動へ、そしてその先へ
Avatar for Sammy(MoritaMasami) moritamasami
0
300
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
Avatar for maaaato maaaato
0
280
乗りこなせAI駆動開発の波
Avatar for Ikko Eltociear Ashimine eltociear
1
1.1k
ログ管理の新たな可能性？CloudWatchの新機能をご紹介
Avatar for Ikumi Ono ikumi_ono
1
690
SSO方式とJumpアカウント方式の比較と設計方針
Avatar for Yuto Obayashi yuobayashi
7
620
Reinforcement Fine-tuning 基礎〜実践まで
Avatar for Morita ch6noota
0
180
グレートファイアウォールを自宅に建てよう
Avatar for 綿糸てせ ctes091x
0
150
形式手法特論：CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
Avatar for y_taka_23 ytaka23
2
460
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.4k
AWS Security Agentの紹介/introducing-aws-security-agent
Avatar for tomoki10 tomoki10
0
220
Edge AI Performance on Zephyr Pico vs. Pico 2
Avatar for misoji engineer iotengineer22
0
140

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
It's Worth the Effort
Avatar for 3n 3n
187
29k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k

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