Introdução ao Angular

Prévia do material em texto

Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/1
Angular
O que é?
Framework para a criação de Single-Page 
Applications.
Murillo Barata Rodrigues
MSc. e BSc. em Ciência da Computação
Desenvolvedor Full Stack
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/2
SINGLE PAGE APPLICATION
Melhor Experiência
de Usuário
Mais Performance Facilidade de 
Manutenção
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/3
Fonte: https://medium.com/@aalphaindia/top-benefits-of-single-page-application-spa-development-d266a066cc63
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/4
Etapas:
01. Criando um projeto Angular
O que é preciso saber?
03. Trocando de página
Como funciona a navegação em uma
SPA com Angular?
04. Exibindo conteúdo dinâmico
Como carregar dados de uma API?
02. Criando o layout
Como reutilizar código criando 
componentes?
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/5
O que é preciso saber?
Mas calma, mesmo sem saber algo da lista fica que o nosso foco é o Angular!
HTML CSS/SCSS/SASS JavaScript TypeScript Rest/Json
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/6
O que é preciso ter?
Ah… para criar e trabalhar em uma aplicação Angular, você precisará ter:
NodeJS
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/7
Criando e executando 
um projeto Angular
Instalar Angular CLI1
Criar uma aplicação inicial 2
Rodar a aplicação3
C
om
an
d
o
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/8
Criando e executando 
um projeto Angular
Instalar Angular CLI1
Criar uma aplicação inicial 2
Rodar a aplicação3
C
om
an
d
o
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/9
Criando e executando 
um projeto Angular
Instalar Angular CLI1
Criar uma aplicação inicial 2
Rodar a aplicação3
C
om
an
d
o
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/10
Fonte: https://angular.io/guide/setup-local
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/11
Estrutura de um 
projeto Angular
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/12
Etapas:
01. Criando um projeto Angular
O que é preciso saber?
02. Criando o layout
Como reutilizar código criando 
componentes?
03. Trocando de página
Como funciona a navegação em uma
SPA com Angular?
04. Exibindo conteúdo dinâmico
Como carregar dados de uma API?
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/13
Criando um Header
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/14
Criando um Card
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/15
Criando um 
componente
Executar o comando:1
C
om
an
d
o
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/16
Dica:
Uma forma legal de organizar o código é separar 
componentes que são elementos de uma página de componentes que são páginas em si:
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/17
Angular Component
Um component Angular possui um arquivo para estrutura (HTML), 
um arquivo para estilização da estrutura (SCSS),
um arquivo para lógica (TypeScript) e
um arquivo para testes (spec.ts).
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/18
Angular Component
A ideia de um component é aproveitar ao máximo o reuso de código.
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/19
Sintaxe de Template
O Angular nos fornece as chamadas “directives”, 
que são ferramentas que auxiliam na manipulação
da página HTML.
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/20
Sintaxe de Template
O Angular também fornece a interpolação, 
que é uma maneira de exibir o valor de uma variável do arquivo de lógica (.ts)
no arquivo HTML.
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/21
Etapas:
01. Criando um projeto Angular
O que é preciso saber?
03. Trocando de página
Como funciona a navegação em uma
SPA com Angular?
04. Exibindo conteúdo dinâmico
Como carregar dados de uma API?
02. Criando o layout
Como reutilizar código criando 
componentes?
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/22
Criando rotas
Uma rota um caminho para cada component referente a uma página:
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/23
Acessando as rotas
E, em seguida, fornecer uma maneira para os usuários navegarem entre essas rotas:
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/24
Etapas:
01. Criando um projeto Angular
O que é preciso saber?
03. Trocando de página
Como funciona a navegação em uma
SPA com Angular?
04. Exibindo conteúdo dinâmico
Como carregar dados de uma API?
02. Criando o layout
Como reutilizar código criando 
componentes?
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/25
Criando um “service”
Os “services” são os arquivos responsáveis por fornecerem as informações aos componentes.
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/26
HttpClientModule
O primeiro passo para realizar requisições HTTP é adicionar o módulo
HttpClientModule no arquivo app.module.ts, em “imports”.
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/27
Escrever a requisição
Em seguida, basta importar o Angular HttpClient e 
ter acesso ao métodos .get( ), .post( ), .put( ) e delete( ).
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/28
Realizar a requisição
Para carregar os dados de uma API, basta importar o service no component desejado:
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/29
Próximas
Etapas:
01. Revisar criando a visualização de 
“séries populares”
03. Refatorar requisições
Utilizar o arquivo enviroments.ts e utilizar 
interceptors para adicionar o token da API
04. Build da aplicação
Fazer o build da aplicação e colocá-la no 
ar utilizando Heroku (por exemplo).
02. Enviar informações na 
mudança de rotas
Exibir detalhes de um card ao clicar em um
Angular por Murillo Barata https://www.linkedin.com/in/murillobarata/30
OBRIGADO!