[Imersão tech] Fundamentos do Angular

Transcript

1. { Angular Imersão Tech } Sejam bem vindas
2. @nast.dev alessandra-nastassja Alessandra Nastassja Software Enginner @Bradesco Apaixonada por Front-end 💜 Mãe do Bolinha, Bolota e Pituco 🐱🐱🐶 Fã de jogos de terror e universos fantásticos 🎮
3. @womakerscodebr Conheça a Womakers Code Comunidade voltada para impulionar meninas e mulheres diversas na tecnologia com cursos, eventos, mentorias e conexão com o mercado.
4. Agenda Recomendações Estudo Documentação do Angular TypeScript Guia de SASS Ambiente VS Code (recomendado) Node 20 (LTS) Angular CLI ou Vite Requisítos HTML,CSS e Javascript ☀️ Manhã Fundamentos do Angular Setup + primeiros passos Construção da interface 🌇 Tarde Interações e lógica Evolução do app Finalização
5. { Let's Angular }
6. { Angular } O que é
7. É um framework front-end para construir aplicações web modernas Parceira: Google + Microsoft É diferente da versão do AngularJS 1.x Open source
8. { Angular } É muito utilizado?
9. É um framework corporativo, utilizado em big techs
10. { Angular } Como funciona
11. Tudo gira em torno de componentes Um component é tudo que o usuário vai ver
12. Vamos pensar em um bolo Um component é a "fatia" de um bolo
13. Decoração (CSS/SCSS) É o estilo, as cores, os detalhes visuais que deixam bonito Massa (HTML) É a estrutura, o que aparece na tela, os elementos Receita (Typescript) É a lógica do componente, o comportamento, as regras e os dados Tendo 4 parte principais É o que conecta tudo isso, fazendo a interface reagit, aos dados Data binding (HTML)
14. "Tudo que nós temos na nossa aplicação é um componente"
15. Cabeçalho (Barra de navegação) Barra lateral Posts
16. Cabeçalho (Barra de navegação) Barra lateral Post Post Post
17. Cabeçalho (Barra de navegação) Barra lateral Post Interações Post
18. Barra lateral Cabeçalho (Barra de navegação) Posts
19. "Processo conhecido como componentização "
20. { Angular } Integração com o back-end
21. Componente Back-end Comunica Java, Node, .Net... O componente pode se comunicar diretamente com o back-end, mas....
22. Componente Service Back-end Fornece e persiste dados Centraliza regras negócio e faz a comunicação O indicado é que:
23. "O serviço é o que faz comunicação do componente com o back-end "
24. { Componentes } Como carregar diferentes
25. Site tradicional Angular (SPA) Cada clique carrega a página inteira Carrega 1 vez e troca apenas os componentes Clica Sempre recarrega a página inteira Não carrega a página
26. Roteamento decide qual componente irá aparecer Tudo isso é feito através do routing
27. Componente Injeção de dependência Template HTML Service Data binding Roteamento { Revisão } Entre em www.kahoot.it PIN do jogo: 12345678
28. { Angular } Configurando projeto
29. Setup Recomendações Extesões Angular File Generator Angular-cli vscode-styled-components Thunder Client Tema Thunder Client VS Code Node instalado Angular CLI ou Vite
30. Almoço (12h30 ás 13h30)
31. Controle de gastos O que vamos contruir hoje Figma Repositório (github)
32. O que construimos juntas Integração do Front-end com o back-end
33. DOM e Component tree Sendo a árvore de componentes, que depois o Angular renderiza no DOM lá no navegador
34. Desafio Agora é com você [] Conexão com o back-end [ ] Adicionar receita (valor positivo) [ ] Criar filtro por categoria [ ] Exibir saldo total (receitas - gastos) [ ] Melhorar a interface (cores, ícones, etc)
35. Sugestões Cursos que recomendo
36. Além do tech Carreira em front-end Mercado e oportunidades Dúvidas e inseguranças ⏱️ Tempo: 10 min Espaço aberto para conversar sobre:
37. Hora de dar tchau Obrigada!
38. Referências Documentação do Angular TypeScript Guia de SASS