1.
Angular 2
Loiane Groner
github.com/loiane
loiane.com
loiane.training
@loiane

2.
• 10+ XP TI
• Java, JavaScript, Sencha, Angular
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training

3.
• Meus livros:

4.
!==

5.
TYPESCRIPT
TypeScript
ECMAScript 6
ECMAScript 5
ES 2015
Novembro 2009
meu-script.ts
transpiler
meu-script.js
ES5
Classes e Módulos
ECMAScript 7
ES 2016
Decorators e Async
Tipagem de dados, interfaces

6.
O QUE PRECISAMOS INSTALAR
https://nodejs.org

7.
TYPESCRIPT
https://www.typescriptlang.org/

8.
TYPESCRIPT
$ npm install -g typescript
$ sudo npm install -g typescript
SOMENTE MAC OU LINUX

9.
> npm install -g angular-cli
> ng new meu-projeto
> cd meu-projeto
> ng serve

10.
> ng build
> ng test
> ng e2e
> ng deploy

11.
Editores/ IDEs

12.
COMPONENTES DIRETIVAS
ROTEAMENTOSERVIÇOS
TEMPLATE
DATA BINDINGINJEÇÃO
DEPENDÊNCIA
MÓDULOS
Blocos Principais

13.
COMPONENTE
{…}
TEMPLATE
<..>

14.
COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades

15.
COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
Binding de
Eventos

16.
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
Binding de
Propriedades
Binding de
Eventos

17.
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B
Binding de
Propriedades
Binding de
Eventos

18.
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B MÓDULO X
MÓDULO A
MÓDULO B
Binding de
Propriedades
Binding de
Eventos

19.
Módulos

20.
Imports das classes

21.
Declaração dos
Components, Directives, Pipes que
queremos usar no projeto

22.
Declaração dos
Components, Directives, Pipes que
queremos usar no projeto
Import dos Módulos que
serão usados por esse módulo

23.
Declaração dos
Components, Directives, Pipes que
queremos usar no projeto
Import dos Módulos que
serão usados por esse módulo
Componente principal
da aplicação

24.
Também podemos ter
módulo de funcionalidade
pra ajudar a organizar o
projeto

25.
Também podemos ter
módulo de funcionalidade
pra ajudar a organizar o
projeto
Fornecedores de serviços

26.
Admin
Usuários
Permissões
Shared/Common
Validações
Pipes
Produtos
ProdutosPainel
ProdutoLista
ProdutoDetalhe
ProdutoForm
Clientes
ClientesPainel
ClienteLista
ClienteDetalhe
ClienteForm
Vendas
VendasPainel
VendaLista
VendaDetalhe
VendaForm
VendaProdutosForm
Relatórios
RelatorioPrincipal
RelatorioClientes
RelatorioBuscaClientes
RelatorioProdutos
RelatorioBuscaProdutos
RelatorioVendas
RelatorioBuscaVendas
ExportarExcel
ExportarPDF
Raiz
AppComponent
NavBar
Menu

27.
Componentes

28.
Passo 1: Criar e Declarar Componente

29.
Passo 1: Criar e Declarar Componente

30.
Passo 1: Criar e Declarar Componente

31.
Passo 1: Criar e Declarar Componente
Nome da tag a ser
utilizada

32.
Passo 2: Importar e Declarar no módulo (e exportar caso queira
expor a outros módulos

33.
Passo 3: Usar a tag do Componente criado

34.
Passo 3: Usar a tag do Componente criado

35.
Templates

36.
Template contém o HTML que será renderizado

37.
Pode ser declarado inline (no próprio componente)

38.
Pode ser declarado inline (no próprio componente)

39.
Ou num arquivo separado

40.
Ou num arquivo separado

41.
Estilizando componentes/
templates

42.
Data
Binding

43.
DATA BINDING
<TEMPLATE>
{COMPONENT}

44.
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}

45.
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"

46.
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"

47.
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
[(ngModel)]="propriedade"

48.
#1: Interpolação

49.
#1: Interpolação

50.
#1: Interpolação

51.
#2: Binding de propriedades (property binding)

52.
#2: Binding de propriedades (property binding)
Todas as imagens tem o
mesmo resultado

53.
#3: Class binding (também é property binding)

54.
#3: Class binding (também é property binding)
Variável local
chamada class

55.
#3: Class binding (também é property binding)
Variável local
chamada class
Property binding

56.
#4: Style binding (também é property binding)

57.
#4: Style binding (também é property binding)
Mostra o estilo
ou não?

58.
#4: Style binding (também é property binding)
Mostra o estilo
ou não?
Expressão com o
valor da variável

59.
#5: Event binding (binding de evento)

60.
#5: Event binding (binding de evento)
Evento a ser
"escutado"

61.
#5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada

62.
#5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada

63.
#5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada

64.
Como manter o template e o
componente atualizados?

65.
Como manter o template e o
componente atualizados?

66.
Como manter o template e o
componente atualizados?

67.
Como manter o template e o
componente atualizados?

68.
Property binding +
event binding
Como manter o template e o
componente atualizados?

69.
#6: Binding de Model (two-way data-binding)

70.
#6: Binding de Model (two-way data-binding)

71.
#6: Binding de Model (two-way data-binding)
Two-way
data binding com
NgModel

72.
Diretivas

73.
TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*ngIf

74.
TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*ngIf
DIRETIVAS DE ATRIBUTOS
Interagem com o elemento em
que foram aplicadas
ng-class
ng-style

75.
Condicional If: JavaScript

76.
Diretiva *ngIf

77.
Loop for: JavaScript

78.
Diretiva *ngFor

79.
Property binding de classe

80.
Diretiva ngClass

81.
Criando uma diretiva customizada

82.
Usando a diretiva

83.
E como os componentes se comunicam?
Componente parente <-> filho?

84.
Comunicação parente -> filho através de @Input()

85.
Comunicação parente -> Filho através de @Input()

86.
Comunicação parente -> Filho através de @Input()
2 - Usamos a anotação @Input nos atributos que
queremos expor

87.
Comunicação filho -> parente através de @Output()

88.
Comunicação filho -> parente através de @Output()
Emitimos o evento
"clicked"

89.
Com @Output podemos escutar eventos customizados

90.
Com @Output podemos escutar eventos customizados

91.
Serviços

92.
Passo 1: Criar uma classe com métodos!

93.
Passo 1: Criar uma classe com métodos!

94.
Injeção de
Dependência

95.
Passo 2: Decorar a classe

96.
Passo 2: Decorar a classe
Importar

97.
Passo 3: Importar e registrar como
fornecedor de dados no módulo

98.
Passo 3: Importar e registrar como
fornecedor de dados no módulo
Importar

99.
Passo 4: Importar e passar o serviço para o construtor da classe

100.
Passo 4: Importar e passar o serviço para o construtor da classe
Importar

101.
Passo 1: Importar e Injetar na classe (serviço)

102.
Passo 1: Importar e Injetar na classe (serviço)
Importar

103.
Não esquecer de ter o módulo Http importado no módulo
também

104.
Não esquecer de ter o módulo Http importado no módulo
também
Importar o
módulo

105.
Só usar os métodos get, post, put e delete!

106.
Exemplo CRUD com REST

107.
Upload Arquivo
https://github.com/angular/http/issues/75

108.
Por enquanto: upload de arquivo "na mão"

109.
Coisa linda!

110.
Coisa linda!
fluxos:
.do
.map
.filter
.when
.add

111.
Coisa linda!
fluxos:
.do
.map
.filter
.when
.add
Programação reativa!

112.
No componente é só se inscrever no Observador (Observable)

113.
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado

114.
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado

115.
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
ngAfterContentInit4 depois de inserir conteúdo externo na view
ngAfterContentChecked5 a cada verificação de conteúdo inserido
ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho

116.
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
ngAfterContentInit4 depois de inserir conteúdo externo na view
ngAfterContentChecked5 a cada verificação de conteúdo inserido
ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho
ngOnDestroy7 antes da diretiva/component ser destruído

117.
Roteamento

118.
Passo 1: app.routing.ts

119.
Passo 1: app.routing.ts

120.
Passo 1: app.routing.ts

121.
Passo 1: app.routing.ts

122.
Passo 2: importar arquivo no app.module e declarar nos imports
Importar as rotas

123.
Passo 3: Adicionar o router-outlet no seu componente principal

124.
Passo 4: Adicionar os links de roteamento na aplicação

125.
Organizando as
rotas do projeto

126.
Módulo Usuários: criar arquivo users.routing.ts
(também não esquecer de importar no app.module.ts

127.
Pode passar parâmetro pra rota também!

128.
E pra obter o parâmetro da rota:

129.
E pra obter o parâmetro da rota:

130.
Não esquecer de importar e injetar no construtor

131.
Rotas filhas

132.
Passo 1: Declarar rota parente e rotas filhas

133.
Passo 1: Declarar rota parente e rotas filhas

134.
Passo 2: no componente parente também é
preciso de declarar o router-outlet

135.
Passo 2: no componente parente também é
preciso de declarar o router-outlet

136.
Guards:
canActivate
canDeactivate

137.
Passo 1: Adicionar a guarda na rota

138.
Passo 1: Adicionar a guarda na rota

139.
Passo 2: criar um serviço com a lógica (usuário logado, etc)

140.
Passo 2: criar um serviço com a lógica (usuário logado, etc)

141.
Passo 2: criar um serviço com a lógica (usuário logado, etc)

142.
Passo 2: criar um serviço com a lógica (usuário logado, etc)

143.
Passo 3: declarar o serviço guarda como provider no módulo

144.
Passo 3: declarar o serviço guarda como provider no módulo

145.
Passo 1: criar serviço de guarda

146.
Passo 2: implementar a lógica
No desativamento da rota, verificar se tem mudanças no formulário.

147.
Passo 3: adicionar guarda na rota

148.
Passo 3: adicionar guarda na rota

149.
e tem mais!

150.
Pipes

151.
Decortator @Pipe

152.
Pra usar: | nomeDoPipe

153.
Formulários

154.
2 TIPOS NO ANGULAR 2
•Data-driven (Formulário reativo)
•Lógica de validação no Component
•Template driven
•Lógica de validação no form

155.
Template-driven

156.
Template-driven

157.
Template-driven

158.
Template-driven
Super hiper mega
importante!

159.
Template-driven

160.
Template-driven

161.
Template-driven

162.
Template-driven

163.
Template-driven

164.
Template-driven

165.
Template-driven

166.
Template-driven
Super hiper mega
importante!
Variável
local referenciando o campo
pra validação

167.
Template-driven

168.
Template-driven

169.
Data-driven

170.
Data-driven

171.
Data-driven
Super hiper mega
importante #1

172.
Data-driven

173.
Data-driven

174.
Data-driven
Super hiper mega
importante #2

175.
Data-driven

176.
Data-driven

177.
Data-driven

178.
Data-driven

179.
Data-driven: submit: já temos o form!

180.
Data-driven: validação customizada

181.
> npm install -g angular-cli
> ng new meu-projeto
> cd meu-projeto
> ng serve

182.
ANGULAR CLI: CRIANDO COMPONENTS
> cd NomeProjeto
> ng generate component meu-primeiro
> ng g component meu-primeiro

183.
ANGULAR CLI: CRIANDO COMPONENTS

184.
Convenção de nomenclatura
meu-primeiro.component.ts
Palavras separadas por “-“
Ponto
“component" -> para indicar que é um componente
Ponto
ts -> extensão typescript

185.
Convenção de nomenclatura
export class MeuPrimeiroComponent {}
meu-primeiro.component.ts

186.
Convenção de nomenclatura
export class MeuPrimeiroComponent {}
meu-primeiro.component.ts
O mesmo se aplica a service.ts,
pipe.ts, directive.ts, etc

187.
Dicas
Projetos
Grandes

188.
Lazy loading +
módulos

189.
Roteamento:
loadChildren

190.
Roteamento:
loadChildren

191.
Carrega a aplicação

192.
Carrega o módulo

193.
Ahead of Time
Compilation

194.
DESENVOLVIMENTO DO PROJETO COM ANGULAR 2 + TYPESCRIPT
COMPILAÇÃO DA APLICAÇÃO COM TSC (COMPILADOR TS)
BUNDLING (TUDO EM UM ARQUIVO APENAS)
MINIFICAÇÃO
DEPLOY
Compilação "normal"

195.
DOWNLOAD DE TODOS OS ARQUIVOS JAVASCRIPT
BOOTSTRAP DO ANGULAR 2
COMPILAÇÃO EM TEMPO REAL
APLICAÇÃO É RENDERIZADA

196.
DESENVOLVIMENTO DO PROJETO COM ANGULAR 2 + TYPESCRIPT
COMPILAÇÃO DA APLICAÇÃO COM NGC (ANGULAR2 COMPILER)
BUNDLING (TUDO EM UM ARQUIVO APENAS)
MINIFICAÇÃO
DEPLOY
COMPILAÇÃO DO PROJETO E TEMPLATES PARA TS
COMPILAÇÃO DO PROJETO DE TS PARA JS
Compilação aot

197.
DOWNLOAD DE TODOS OS ARQUIVOS JAVASCRIPT
BOOTSTRAP DO ANGULAR 2
APLICAÇÃO É RENDERIZADA

198.
ANGULAR CLI: NG SERVE OU BUILD —AOT
> cd NomeProjeto
> ng serve —-aot
> ng build —-aot

199.
Juntando tudo!
Demo

200.
•https://github.com/loiane/curso-angular2
•https://github.com/loiane/angular2-pokedex
•https://github.com/loiane/angular2-crud-rest
•https://github.com/loiane/angular2-crud-auth-routing

201.
http://loiane.training
Curso Gratuito!

202.
http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training