Inttrodução ao Angular

Transcript

1. Introdução ao Angular do básico ao app
2. Lucas Stoque Front-End Developer lucastoque.com github.com/stoque twitter.com/ostoque
3. Introdução O que é Angular?
4. Angular é uma plataforma que facilita a criação de aplicativos com a web. Introdução
5. Releases Angular 2, 4 … 8?
6. Primeira Release 14 de Setembro de 2016 Releases
7. 2.0.0 - Setembro 2016 3.0.0 4.0.0 - Março 2017 5.0.0 - Novembro 2019 6.0.0 - Maio 2018 7.0.0 - Outubro 2018 8.0.0 - Maio 2019 Releases
8. 9.0.0 Outubro/Novembro 2019 Releases
9. Semantic Version X . Y . Z MAJOR MINOR PATCH Releases
10. Semantic Version X . Y . Z MAJOR MINOR PATCH Releases
11. Semantic Version X . Y . Z MAJOR MINOR PATCH Releases
12. Frequência de Releases • Major release release a cada 6 meses • 1-3 minor releases para cada major • Um patch release quase toda semana Releases
13. Angular CLI Uma poderosa ferramenta
14. Angular CLI • Scaffolding & Generating • Serving & Developing • Building & Distributing • E2E & Unit Testing
15. Angular CLI
16. • ng new • ng generate • ng serve • ng build • ng upgrade • ng lint, ng test, ng e2e Angular CLI
17. Angular CLI ng new todolist
18. Angular CLI
19. Angular CLI
20. Modules Deixando sua aplicação modular
21. • declarations • exports • imports • providers • bootstrap Modules
22. • declarations Declara quais componentes, diretivas e pipes pertencem ao módulo. Modules
23. • exports Torna públicos alguns desses componentes, diretivas e pipes, para que componentes de outros módulos possam utilizá-los. Modules
24. • imports Importa outros módulos com os componentes, diretivas e pipes que os componentes no módulo atual precisam. Modules
25. • providers Fornece serviços que os componentes desse módulo possam utilizar. Modules
26. • bootstrap Declara o componente inicial da aplicação. Modules
27. Modules
28. Modules
29. Modules
30. Modules
31. Components Quebre sua aplicação em pequenos partes
32. Componentes são pequenos partes que juntos compõem uma funcionalidade/módulo Components
33. Components
34. Components
35. Stateful x Stateless Components Container Presentational Inteligente Burro
36. Stateful • Provê dados para os componentes stateless • Tem conhecimento do estado da aplicação • É informado, através de eventos, quando um componente stateless necessita de mudança • Se comunica com dependências externas • Renderiza componentes stateless Components
37. Stateless • Não faz request de dados por dependências externas • Os dados necessários para renderização são passados via binding • Invoca um evento do componente pai para executar ações • Pode renderizar outros componentes stateless ou stateful • Pode ter um controle de estado local para controle de UI • É um fragmento de uma interface mais complexa Components
38. Components
39. Components
40. <app> <todos> TodosService Components stateful stateless
41. <app> <todos> TodosService Components <todo-form> <todo-list> <todo> stateful stateless
42. Components
43. Components
44. Components
45. Components Lifecycle Hooks
46. Implementação do componente stateful app-todos Components
47. Components
48. Components
49. Components
50. Components
51. Components
52. Components
53. Components
54. Components
55. Components
56. Components
57. Components
58. Components
59. Components
60. Components
61. Components
62. Components
63. Components
64. Implementação do componente stateless app-todo-form Components
65. Components
66. Components
67. Components
68. Components
69. Components
70. Components
71. Implementação do componente stateless app-todo-list Components
72. Components
73. Components
74. Components
75. Components
76. Implementação do componente stateless app-todo Components
77. Components
78. Components
79. Components
80. Components
81. Components
82. Services Isole suas requisições
83. Services
84. Services
85. Services
86. Services
87. Services
88. Services
89. Services
90. Services
91. Services Observables
92. Services
93. Routes Definindo rotas
94. Routes Auth Module Todolist Module /auth /todolist
95. Routes
96. Routes
97. Routes
98. Routes
99. Routes
100. Routes
101. Routes
102. Routes
103. Routes
104. Routes
105. Routes
106. Routes
107. Routes
108. Routes
109. Routes
110. Routes
111. Routes
112. Routes
113. Routes
114. Routes
115. Onde aprender mais? • Documentação Oficial - angular.io • Curso Angular - Loiane Groner - youtube.com/user/Loianeg • Angular Rio - meetup.com/pt-BR/Angular-RJ/ • NG Conf - youtube.com/user/ngconfvideos • Palestras do William Grasel • ...
116. Referências • https://angular.io • https://ultimatecourses.com/blog/stateful-stateless-components • Front In Sampa 2018 - William Grasel: E o Angular? Ainda vive? https://www.youtube.com/watch?v=aLYORNqq5qc
117. Obrigado :) @ostoque