From Zero to Azure with Angular

Transcript

1. 1.

   None
2. 2.

   None
3. 3.

   @FabianGosebrink

4. 4.

   @FabianGosebrink @EverythingGoats

5. 5.

   @FabianGosebrink

6. 6.

   None
7. 7.

   None
8. 8.

   None
9. 9.

   Frontend

10. 10.

    Server Client HTTP

11. 11.

    Keep it

12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

    > npm install <myPackage>

18. 18.

    > npm install <myPackage> -g

19. 19.

    None
20. 20.

    None
21. 21.

    Angular CLI

22. 22.

    focus

23. 23.

    None
24. 24.

    > ng g c myFirst

25. 25.

    None
26. 26.

    REST-Service Component Component Component

27. 27.

    None
28. 28.

    Component Component Component REST-Service

29. 29.

    None
30. 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. 31.

    Presentational Component Smart Component Presentational Component REST-Service (…) […] (…)

    […]
32. 32.

    None
33. 33.

    None
34. 34.

    AppModule

35. 35.

    Component Component Component AppModule

36. 36.

    Component Component Component Component Component Component AppModule

37. 37.

    AppModule Component Component Component Component Component Component Component Component Component

38. 38.

    Component Component Component Component Component Component Component Component Component Component

    Component Component AppModule
39. 39.

    Separate into modules

40. 40.

    None
41. 41.

    When to create a module?

42. 42.

    “When to create a module?”

43. 43.

    Component App

44. 44.

    Component App Components Pipes Directives Feature etc.

45. 45.

    Component Component Component Component Component Component Feature Component App Components

    Pipes Directives Feature etc.
46. 46.

    Component Component Component Component Component Component Feature Component App Components

    Pipes Directives Feature Service Service Service Core etc. etc.
47. 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. 48.

    https://stackblitz.com/edit/angular-q3ruah

49. 49.

    Module Core

50. 50.

    Module Shared

51. 51.

    None
52. 52.

    None
53. 53.

    None
54. 54.

    None
55. 55.

    Component Services

56. 56.

    Component

57. 57.

    Store Component

58. 58.

    None
59. 59.

    None
60. 60.

    None
61. 61.

    Store Component Reducer

62. 62.

    None
63. 63.

    Store Component Reducer

64. 64.

    Store Component Reducer store.select(…)

65. 65.

    Store Component Reducer store.select(…) store.dispatch(…)

66. 66.

    None
67. 67.

    None
68. 68.

    Smart component Pres. component store.select(…) @Input(…) store.dispatch(…) @Output(…)

69. 69.

    Store Component Reducer store.select(…) store.dispatch(…) Effects

70. 70.

    None
71. 71.

    Store Component Reducer store.select(…) store.dispatch(…) Effects

72. 72.

    Store Component Reducer store.select(…) store.dispatch(…) Effects Services

73. 73.

    None
74. 74.

    None
75. 75.

    None
76. 76.

    None
77. 77.

    Lazy Loading

78. 78.

    None
79. 79.

    a great production build

80. 80.

    treeshaking

81. 81.

    ahead of time compilation

82. 82.

    > ng build --prod

83. 83.

    None
84. 84.

    Demo

85. 85.

    Change your code

86. 86.

    Automate

87. 87.

    None
88. 88.

    None
89. 89.

    https://offering.solutions https://angular-academy.ch https://swissangular.com https://github.com/FabianGosebrink/ ASPNETCore-Angular-Ngrx @FabianGosebrink