O documento apresenta um mini-curso sobre desenvolvimento de aplicações com Angular 2. Ele ensina como configurar o ambiente, criar componentes, exibir dados, utilizar serviços, implementar rotas e requisições HTTP. O curso é dividido em sete seções que cobrem tópicos como template, binding, formulários, listas, componentes reutilizáveis e arquitetura MVC.

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. O QUE É
O ANGULAR?
Plataforma de desenvolvimento
frontend para criação de
aplicações mobile e desktop

3. POR QUE UMA
NOVA VERSÃO?
Web components,
mobile e padrões

4. POR QUE UMA
NOVA VERSÃO?
Re-escrita do angular 1,
levando em conta tudo que foi
aprendido nos últimos 5 anos

6. TypeScript

7. TypeScript
ECMAScript 6
ECMAScript 5
Junho 2015
Dezembro 2009
my-script.ts
TypeScript
transpiler
my-script.js
ECMA5

8. Vantagens do
TypeScript
Tipos explicitamente
documentados: fácil
compreensão.

9. Vantagens do
TypeScript
Uso de decorators:
poder à injeção de
dependências.

10. Estrutura básica de uma
aplicação Angular

11. Template
<…>
Component
{…}
Directive
{…}
Injector
Service A
Service B
Property
binding Event
bindingMetadata

12. TALK LESS.
CODE MORE.

13. Mini-curso
Criando um cadastro de usuários simples
utilizando Angular 2

16. 01.
CONFIGURANDO O AMBIENTE E
ARQUIVOS DE CONFIGURAÇÃO

17. 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

18. 01.
1. Instalar Node.js e npm
node v5.x.x ou superior
npm 3.x.x ou superior
npm -v
node -v

19. 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

20. 01.
2. Criar e configurar o projeto
Instalar pacote do Node.js listados no package.json:
npm install

21. 01.
3. Criar a aplicação
mkdir app

22. 01.
4. Criar um componente

23. 01.
Editamos nosso módulo para incluir nosso componente:

24. 01.
5. Iniciar a aplicação

25. 01.
6. Definir a página inicial

26. 01.
7. Criar folha de estilos

27. 01.
8. Compilar e rodar a aplicação
npm start

28. 01.
8. Alterações em tempo real
Altere o arquivo app.component.ts e verifique se o
browser recarregará.

29. 02.
CRIANDO O EDITOR DE USUÁRIOS

30. 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

31. 02.
1. Exibindo um usuário

32. 02.
2. Criando classe de alunos

33. 02.
3. Alterando o html

34. 02.
4. Editando nosso aluno

35. 02.
5. Importar FormsModule e usar
ngModel para two-way binding

36. 03.
EXIBINDO UMA LISTA DE USUÁRIOS

37. 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

38. 03.
1. Definindo os
usuários

39. 03.
2. Exibindo os
usuários

40. 03.
2. Exibindo os
usuários

41. 03.
3. Alterando o
estilo (css)

42. 03.
4. Selecionando
os usuários

43. 03.
5. Destacando
usuário
selecionado

44. 04.
CRIANDO COMPONENTES
REUTILIZÁVEIS

45. 04.
Agenda
1. Criando componente para exibir detalhes do usuário
2. Dizendo ao componente o que exibir
3. Importando o novo componente

46. 04.
1. Criando
componente de
detalhe do
usuário touch app/user-detail.component.ts

47. 04.
1. Criando
componente de
detalhe do
usuário

48. 04.
1. Criando
componente de
detalhe do
usuário
Criamos a classe User isolada para reutilizá-la:
touch app/user.ts

49. 04.
1. Criando
componente de
detalhe do
usuário
Importando a classe User:

50. 04.
2. Dizendo ao
componente o
que exibir

51. 04.
3. Importando o
novo
componente

52. 05.
CRIANDO SERVICES

53. 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

54. 05.
1. Criando
Service que
fornece os
dados dos
usuários
touch app/user.service.ts

55. 05.
2. Criando
mock de
usuários
touch app/mock-user.ts

56. 05.
3. Recuperando
os usuários do
mock

57. 05.
4. Usando o
service de
usuários

58. 05.
4. Usando o
service de
usuários

59. 05.
5. Usando o
hook
ngOnInit para
carregar os
usuários

60. 05.
6. Usando
Promises

61. 06.
UTILIZANDO ROTAS

62. 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

63. 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.

64. 06.
1. Quebrando
nosso
AppComponent
em
UserComponent

65. 06.
2. Adicionando
rotas
Precisamos adicionar a base tag no index para guiar o Router.

66. 06.
2. Adicionando
rotas

67. 06.
3.
Disponibilizando
as rotas

68. 06.
4. Criando um
dashboard
touch app/dashboard.component.ts

69. 06.
5.
Redirecionando
para o dashboard

70. 06.
6. Adicionando a
navegação

71. 06.
7. Separando
html e css

72. 06.
7. Separando
html e css

73. 06.
8. Nova rota para
exibir detalhes

74. 06.
8. Nova rota para
exibir detalhes

75. 06.
9. Adicionando o
botão voltar

76. 06.
10. Links para a
tela de detalhes

77. 06.
11. Adicionando
novos estilos
touch app/user-detail.component.css
touch app/dashboard.component.css
touch app/app.component.css

78. 07.
UTILIZANDO HTTP

79. 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

80. 07.
1. Utilizando
HttpModule

81. 07.
2. Simulando uma
API web
touch app/in-memory-data.service.ts

82. 07.
rm app/mock-users.ts
2. Simulando uma
API web

83. 07.
2. Simulando uma
API web

84. 07.
3. Salvando dados
do usuário

85. 07.
4. Adicionando um
usuário

86. 07.
4. Removendo um
usuário

87. OBRIGADO!
Hugo Magalhães
hugo@meuingresso.com