Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Conhecendo os fundamentos e desenvolvendo
uma aplicação básica com Angular 2
Hugo Magalhães
Fundador do meuingresso.com
hu...
O QUE É
O ANGULAR?
Plataforma de desenvolvimento
frontend para criação de
aplicações mobile e desktop
POR QUE UMA
NOVA VERSÃO?
Web components,
mobile e padrões
POR QUE UMA
NOVA VERSÃO?
Re-escrita do angular 1,
levando em conta tudo que foi
aprendido nos últimos 5 anos
TypeScript
TypeScript
ECMAScript 6
ECMAScript 5
Junho 2015
Dezembro 2009
my-script.ts
TypeScript
transpiler
my-script.js
ECMA5
Vantagens do
TypeScript
Tipos explicitamente
documentados: fácil
compreensão.
Vantagens do
TypeScript
Uso de decorators:
poder à injeção de
dependências.
Estrutura básica de uma
aplicação Angular
Template
<…>
Component
{…}
Directive
{…}
Injector
Service A
Service B
Property
binding Event
bindingMetadata
TALK LESS.
CODE MORE.
Mini-curso
Criando um cadastro de usuários simples
utilizando Angular 2
01.
CONFIGURANDO O AMBIENTE E
ARQUIVOS DE CONFIGURAÇÃO
01.
Agenda
1. Instalar Node.js e npm
2. Criar e configurar o projeto
3. Criar a aplicação
4. Criar um componente e adiciona...
01.
1. Instalar Node.js e npm
node v5.x.x ou superior
npm 3.x.x ou superior
npm -v
node -v
01.
2. Criar e configurar o projeto
mkdir angular2-secomp-users
cd angular2-secomp-users
Baixar o projeto com os arquivos b...
01.
2. Criar e configurar o projeto
Instalar pacote do Node.js listados no package.json:
npm install
01.
3. Criar a aplicação
mkdir app
01.
4. Criar um componente
01.
Editamos nosso módulo para incluir nosso componente:
01.
5. Iniciar a aplicação
01.
6. Definir a página inicial
01.
7. Criar folha de estilos
01.
8. Compilar e rodar a aplicação
npm start
01.
8. Alterações em tempo real
Altere o arquivo app.component.ts e verifique se o
browser recarregará.
02.
CRIANDO O EDITOR DE USUÁRIOS
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 ...
02.
1. Exibindo um usuário
02.
2. Criando classe de alunos
02.
3. Alterando o html
02.
4. Editando nosso aluno
02.
5. Importar FormsModule e usar
ngModel para two-way binding
03.
EXIBINDO UMA LISTA DE USUÁRIOS
03.
Agenda
1. Definindo nossos usuários
2. Exibindo os usuários
3. Alterando o estilo
4. Selecionando os usuários
5. Destac...
03.
1. Definindo os
usuários
03.
2. Exibindo os
usuários
03.
2. Exibindo os
usuários
03.
3. Alterando o
estilo (css)
03.
4. Selecionando
os usuários
03.
5. Destacando
usuário
selecionado
04.
CRIANDO COMPONENTES
REUTILIZÁVEIS
04.
Agenda
1. Criando componente para exibir detalhes do usuário
2. Dizendo ao componente o que exibir
3. Importando o nov...
04.
1. Criando
componente de
detalhe do
usuário touch app/user-detail.component.ts
04.
1. Criando
componente de
detalhe do
usuário
04.
1. Criando
componente de
detalhe do
usuário
Criamos a classe User isolada para reutilizá-la:
touch app/user.ts
04.
1. Criando
componente de
detalhe do
usuário
Importando a classe User:
04.
2. Dizendo ao
componente o
que exibir
04.
3. Importando o
novo
componente
05.
CRIANDO SERVICES
05.
Agenda
1. Criando Service que fornece os dados dos usuários
2. Criando mock de usuários
3. Recuperando os usuários do ...
05.
1. Criando
Service que
fornece os
dados dos
usuários
touch app/user.service.ts
05.
2. Criando
mock de
usuários
touch app/mock-user.ts
05.
3. Recuperando
os usuários do
mock
05.
4. Usando o
service de
usuários
05.
4. Usando o
service de
usuários
05.
5. Usando o
hook
ngOnInit para
carregar os
usuários
05.
6. Usando
Promises
06.
UTILIZANDO ROTAS
06.
Agenda
1. Quebrando o AppComponent
2. Adicionando rotas
3. Disponibilizando rotas
4. Criando um dashboard
5. Redirecio...
06.
1. Quebrando
nosso
AppComponent
em
UserComponent
Nossa lógica de usuário está toda no AppComponent, então
renomeamos p...
06.
1. Quebrando
nosso
AppComponent
em
UserComponent
06.
2. Adicionando
rotas
Precisamos adicionar a base tag no index para guiar o Router.
06.
2. Adicionando
rotas
06.
3.
Disponibilizando
as rotas
06.
4. Criando um
dashboard
touch app/dashboard.component.ts
06.
5.
Redirecionando
para o dashboard
06.
6. Adicionando a
navegação
06.
7. Separando
html e css
06.
7. Separando
html e css
06.
8. Nova rota para
exibir detalhes
06.
8. Nova rota para
exibir detalhes
06.
9. Adicionando o
botão voltar
06.
10. Links para a
tela de detalhes
06.
11. Adicionando
novos estilos
touch app/user-detail.component.css
touch app/dashboard.component.css
touch app/app.comp...
07.
UTILIZANDO HTTP
07.
Agenda
1. Utilizando HttpModule
2. Simulando uma API web
3. Salvando os dados do usuário
4. Adicionando um usuário
5. ...
07.
1. Utilizando
HttpModule
07.
2. Simulando uma
API web
touch app/in-memory-data.service.ts
07.
rm app/mock-users.ts
2. Simulando uma
API web
07.
2. Simulando uma
API web
07.
3. Salvando dados
do usuário
07.
4. Adicionando um
usuário
07.
4. Removendo um
usuário
OBRIGADO!
Hugo Magalhães
hugo@meuingresso.com
Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2
Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2
Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2
Upcoming SlideShare
Loading in …5
×

Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2

141 views

Published on

Slides do mini-curso de Angular2 aplicado durante a II Semana Acadêmica de Computação da UFES, em Alegre no Espírito Santo. Construiu-se um aplicativo de gerenciamento de usuários durante o curso, repassando sobre os conceitos mais importantes do Angular2.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Conhecendo os fundamentos e desenvolvendo uma apliação básica com Angular2

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

×