From Zero to Azure with Angular

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

Transcript

3. @FabianGosebrink
4. @FabianGosebrink @EverythingGoats
5. @FabianGosebrink
9. Frontend
10. Server Client HTTP
11. Keep it
17. > npm install <myPackage>
18. > npm install <myPackage> -g
21. Angular CLI
22. focus
24. > ng g c myFirst
26. REST-Service Component Component Component
28. Component Component Component REST-Service
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 (…) […] (…) […]
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
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
55. Component Services
56. Component
57. Store Component
61. Store Component Reducer
63. Store Component Reducer
64. Store Component Reducer store.select(…)
65. Store Component Reducer store.select(…) store.dispatch(…)
68. Smart component Pres. component store.select(…) @Input(…) store.dispatch(…) @Output(…)
69. Store Component Reducer store.select(…) store.dispatch(…) Effects
71. Store Component Reducer store.select(…) store.dispatch(…) Effects
72. Store Component Reducer store.select(…) store.dispatch(…) Effects Services
77. Lazy Loading
79. a great production build
80. treeshaking
81. ahead of time compilation
82. > ng build --prod
84. Demo
85. Change your code
86. Automate
89. https://offering.solutions https://angular-academy.ch https://swissangular.com https://github.com/FabianGosebrink/ ASPNETCore-Angular-Ngrx @FabianGosebrink