Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2
-
Upload
hugo-magalhaes -
Category
Software
-
view
75 -
download
3
Transcript of Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2
![Page 1: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/1.jpg)
Conhecendo os fundamentos e desenvolvendo uma aplicação básica com Angular 2
Hugo MagalhãesFundador do [email protected]
![Page 2: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/2.jpg)
O QUE É O ANGULAR?
Plataforma de desenvolvimento frontend para criação de
aplicações mobile e desktop
![Page 3: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/3.jpg)
POR QUE UMA NOVA VERSÃO?
Web components, mobile e padrões
![Page 4: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/4.jpg)
POR QUE UMA NOVA VERSÃO?
Re-escrita do angular 1, levando em conta tudo que foi aprendido nos últimos 5 anos
![Page 5: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/5.jpg)
![Page 6: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/6.jpg)
TypeScript
![Page 7: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/7.jpg)
TypeScript
ECMAScript 6
ECMAScript 5
Junho 2015
Dezembro 2009
my-script.tsTypeScript
transpiler
my-script.jsECMA5
![Page 8: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/8.jpg)
Vantagens do TypeScript
Tipos explicitamente documentados: fácil
compreensão.
![Page 9: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/9.jpg)
Vantagens do TypeScript
Uso de decorators: poder à injeção de
dependências.
![Page 10: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/10.jpg)
Estrutura básica de uma aplicação Angular
![Page 11: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/11.jpg)
Template <…>
Component {…}
Directive {…}
InjectorService A
Service B
Property binding Event
binding Metadata
![Page 12: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/12.jpg)
TALK LESS. CODE MORE.
![Page 13: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/13.jpg)
Mini-cursoCriando um cadastro de usuários simples
utilizando Angular 2
![Page 14: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/14.jpg)
![Page 15: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/15.jpg)
![Page 16: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/16.jpg)
01.CONFIGURANDO O AMBIENTE E ARQUIVOS DE CONFIGURAÇÃO
![Page 17: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/17.jpg)
01.
Agenda
1. Instalar Node.js e npm 2. Criar e configurar o projeto 3. Criar a aplicação 4. Criar um componente e adicionar à aplicação 5. Iniciar a aplicação 6. Definir a página inicial 7. Criar folha de estilos 8. Compilar a rodar a aplicação 9. Fazer alterações em tempo real
![Page 18: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/18.jpg)
01.
1. Instalar Node.js e npm
node v5.x.x ou superior npm 3.x.x ou superior
npm -v
node -v
![Page 19: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/19.jpg)
01.
2. Criar e configurar o projeto
mkdir angular2-secomp-userscd angular2-secomp-users
Baixar o projeto com os arquivos base: package.json, tsconfig.json, typings.json, systemjs.config.js
https://github.com/hugomn/angular2-secomp-users/releases/tag/base
![Page 20: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/20.jpg)
01.
2. Criar e configurar o projeto
Instalar pacote do Node.js listados no package.json:
npm install
![Page 21: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/21.jpg)
01.
3. Criar a aplicação
mkdir app
![Page 22: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/22.jpg)
01.
4. Criar um componente
![Page 23: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/23.jpg)
01.
Editamos nosso módulo para incluir nosso componente:
![Page 24: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/24.jpg)
01.
5. Iniciar a aplicação
![Page 25: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/25.jpg)
01.
6. Definir a página inicial
![Page 26: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/26.jpg)
01.
7. Criar folha de estilos
![Page 27: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/27.jpg)
01.
8. Compilar e rodar a aplicação
npm start
![Page 28: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/28.jpg)
01.
8. Alterações em tempo real
Altere o arquivo app.component.ts e verifique se o browser recarregará.
![Page 29: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/29.jpg)
02.CRIANDO O EDITOR DE USUÁRIOS
![Page 30: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/30.jpg)
02.
Agenda
1. Exibindo um usuários 2. Criando classe de usuários 3. Alterando o html 4. Editando nosso usuário 5. Two-way binding
![Page 31: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/31.jpg)
02.
1. Exibindo um usuário
![Page 32: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/32.jpg)
02.
2. Criando classe de alunos
![Page 33: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/33.jpg)
02.
3. Alterando o html
![Page 34: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/34.jpg)
02.
4. Editando nosso aluno
![Page 35: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/35.jpg)
02.
5. Importar FormsModule e usar ngModel para two-way binding
![Page 36: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/36.jpg)
03.EXIBINDO UMA LISTA DE USUÁRIOS
![Page 37: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/37.jpg)
03.
Agenda
1. Definindo nossos usuários 2. Exibindo os usuários 3. Alterando o estilo 4. Selecionando os usuários 5. Destacando o usuário selecionado
![Page 38: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/38.jpg)
03.
1. Definindo os usuários
![Page 39: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/39.jpg)
03.
2. Exibindo os usuários
![Page 40: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/40.jpg)
03.
2. Exibindo os usuários
![Page 41: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/41.jpg)
03.
3. Alterando o estilo (css)
![Page 42: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/42.jpg)
03.
4. Selecionando os usuários
![Page 43: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/43.jpg)
03.
5. Destacando usuário
selecionado
![Page 44: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/44.jpg)
04.CRIANDO COMPONENTES REUTILIZÁVEIS
![Page 45: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/45.jpg)
04.
Agenda
1. Criando componente para exibir detalhes do usuário 2. Dizendo ao componente o que exibir 3. Importando o novo componente
![Page 46: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/46.jpg)
04.
1. Criando componente de
detalhe do usuário touch app/user-detail.component.ts
![Page 47: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/47.jpg)
04.
1. Criando componente de
detalhe do usuário
![Page 48: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/48.jpg)
04.
1. Criando componente de
detalhe do usuário
Criamos a classe User isolada para reutilizá-la:
touch app/user.ts
![Page 49: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/49.jpg)
04.
1. Criando componente de
detalhe do usuário
Importando a classe User:
![Page 50: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/50.jpg)
04.
2. Dizendo ao componente o
que exibir
![Page 51: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/51.jpg)
04.
3. Importando o novo
componente
![Page 52: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/52.jpg)
05.CRIANDO SERVICES
![Page 53: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/53.jpg)
05.
Agenda
1. Criando Service que fornece os dados dos usuários 2. Criando mock de usuários 3. Recuperando os usuários do mock 4. Usando o service de usuários 5. Usando o hook ngOnInit para carregar os usuários 6. Usando promises
![Page 54: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/54.jpg)
05.
1. Criando Service que
fornece os dados dos
usuários touch app/user.service.ts
![Page 55: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/55.jpg)
05.
2. Criando mock de usuários
touch app/mock-user.ts
![Page 56: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/56.jpg)
05.
3. Recuperando os usuários do
mock
![Page 57: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/57.jpg)
05.
4. Usando o service de
usuários
![Page 58: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/58.jpg)
05.
4. Usando o service de
usuários
![Page 59: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/59.jpg)
05.
5. Usando o hook
ngOnInit para carregar os
usuários
![Page 60: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/60.jpg)
05.
6. Usando Promises
![Page 61: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/61.jpg)
06.UTILIZANDO ROTAS
![Page 62: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/62.jpg)
06.
Agenda1. Quebrando o AppComponent 2. Adicionando rotas 3. Disponibilizando rotas 4. Criando um dashboard 5. Redirecionando para o dashboard 6. Adicionando a navegação 7. Separando htmls e css 8. Nova rota para exibir detalhes 9. Adicionando botão voltar 10. Link para a tela de detalhes 11. Adicionando novos estilos
![Page 63: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/63.jpg)
06.
1. Quebrando nosso
AppComponent em
UserComponent Nossa lógica de usuário está toda no AppComponent, então renomeamos para UserComponent e criamos outro AppComponent.
![Page 64: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/64.jpg)
06.
1. Quebrando nosso
AppComponent em
UserComponent
![Page 65: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/65.jpg)
06.
2. Adicionando rotas
Precisamos adicionar a base tag no index para guiar o Router.
![Page 66: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/66.jpg)
06.
2. Adicionando rotas
![Page 67: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/67.jpg)
06.
3. Disponibilizando
as rotas
![Page 68: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/68.jpg)
06.
4. Criando um dashboard
touch app/dashboard.component.ts
![Page 69: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/69.jpg)
06.
5. Redirecionando
para o dashboard
![Page 70: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/70.jpg)
06.
6. Adicionando a navegação
![Page 71: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/71.jpg)
06.
7. Separando html e css
![Page 72: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/72.jpg)
06.
7. Separando html e css
![Page 73: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/73.jpg)
06.
8. Nova rota para exibir detalhes
![Page 74: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/74.jpg)
06.
8. Nova rota para exibir detalhes
![Page 75: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/75.jpg)
06.
9. Adicionando o botão voltar
![Page 76: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/76.jpg)
06.
10. Links para a tela de detalhes
![Page 77: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/77.jpg)
06.
11. Adicionando novos estilos
touch app/user-detail.component.css
touch app/dashboard.component.css
touch app/app.component.css
![Page 78: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/78.jpg)
07.UTILIZANDO HTTP
![Page 79: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/79.jpg)
07.
Agenda
1. Utilizando HttpModule 2. Simulando uma API web 3. Salvando os dados do usuário 4. Adicionando um usuário 5. Removendo um usuário
![Page 80: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/80.jpg)
07.
1. Utilizando HttpModule
![Page 81: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/81.jpg)
07.
2. Simulando uma API web
touch app/in-memory-data.service.ts
![Page 82: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/82.jpg)
07.rm app/mock-users.ts
2. Simulando uma API web
![Page 83: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/83.jpg)
07.
2. Simulando uma API web
![Page 84: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/84.jpg)
07.
3. Salvando dados do usuário
![Page 85: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/85.jpg)
07.
4. Adicionando um usuário
![Page 86: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/86.jpg)
07.
4. Removendo um usuário
![Page 87: Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2](https://reader034.fdocuments.net/reader034/viewer/2022042722/589b25c51a28ab2d4c8b505b/html5/thumbnails/87.jpg)
OBRIGADO!Hugo Magalhã[email protected]