Palestra sobre Angular 2 apresentada no GDG DevFest Cerrado 2016 em Goiânia no dia 15 de Outrubro.

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. !==

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

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

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

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

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

14. > ng build
> ng test
> ng e2e
> ng deploy

15. Editores/ IDEs

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

17. COMPONENTE
{…}
TEMPLATE
<..>

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

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

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

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

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

23. Módulos

25. Imports das classes

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

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

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

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

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

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

34. Componentes

35. Passo 1: Criar e Declarar Componente

36. Passo 1: Criar e Declarar Componente

37. Passo 1: Criar e Declarar Componente

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

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

40. Passo 3: Usar a tag do Componente criado

41. Passo 3: Usar a tag do Componente criado

43. Templates

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

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

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

47. Ou num arquivo separado

48. Ou num arquivo separado

49. Estilizando componentes/
templates

51. Data
Binding

52. DATA BINDING
<TEMPLATE>
{COMPONENT}

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

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

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

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

57. #1: Interpolação

58. #1: Interpolação

59. #1: Interpolação

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

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

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

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

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

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

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

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

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

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

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

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

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

73. Como manter o template e o
componente atualizados?

74. Como manter o template e o
componente atualizados?

75. Como manter o template e o
componente atualizados?

76. Como manter o template e o
componente atualizados?

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

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

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

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

81. Diretivas

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

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

84. Condicional If: JavaScript

85. Diretiva *ngIf

86. Loop for: JavaScript

87. Diretiva *ngFor

88. Property binding de classe

89. Diretiva ngClass

90. Criando uma diretiva customizada

91. Usando a diretiva

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

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

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

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

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

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

98. Com @Output podemos escutar eventos customizados

99. Com @Output podemos escutar eventos customizados

100. Serviços

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

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

103. Injeção de
Dependência

104. Passo 2: Decorar a classe

105. Passo 2: Decorar a classe
Importar

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

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

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

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

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

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

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

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

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

116. Exemplo CRUD com REST

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

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

120. Coisa linda!

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

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

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

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

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

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

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

128. Roteamento

129. Passo 1: app.routing.ts

130. Passo 1: app.routing.ts

131. Passo 1: app.routing.ts

132. Passo 1: app.routing.ts

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

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

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

136. Organizando as
rotas do projeto

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

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

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

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

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

142. Rotas filhas

143. Passo 1: Declarar rota parente e rotas filhas

144. Passo 1: Declarar rota parente e rotas filhas

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

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

147. Guards:
canActivate
canDeactivate

148. Passo 1: Adicionar a guarda na rota

149. Passo 1: Adicionar a guarda na rota

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

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

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

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

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

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

156. Passo 1: criar serviço de guarda

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

158. Passo 3: adicionar guarda na rota

159. Passo 3: adicionar guarda na rota

160. e tem mais!

161. Pipes

162. Decortator @Pipe

163. Pra usar: | nomeDoPipe

164. Formulários

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

167. Template-driven

168. Template-driven

169. Template-driven

170. Template-driven
Super hiper mega
importante!

171. Template-driven

172. Template-driven

173. Template-driven

174. Template-driven

175. Template-driven

176. Template-driven

177. Template-driven

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

179. Template-driven

180. Template-driven

181. Data-driven

182. Data-driven

183. Data-driven
Super hiper mega
importante #1

184. Data-driven

185. Data-driven

186. Data-driven
Super hiper mega
importante #2

187. Data-driven

188. Data-driven

189. Data-driven

190. Data-driven

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

192. Data-driven: validação customizada

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

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

195. ANGULAR CLI: CRIANDO COMPONENTS

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

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

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

201. Dicas
Projetos
Grandes

202. Lazy loading +
módulos

203. Roteamento:
loadChildren

204. Roteamento:
loadChildren

205. Carrega a aplicação

206. Carrega o módulo

207. Ahead of Time
Compilation

208. 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"

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

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

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

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

213. Juntando tudo!
Demo

214. •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

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

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