From Zero to Azure with Angular

From Zero to Azure with Angular

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

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

March 01, 2018
Tweet

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