Devfest Cerrado: Angular 2

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

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

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

64. 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 modiﬁcam a estrutura do DOM e/ou código HTML *ngFor *ngIf

74. TEXT TIPOS DE DIRETIVAS DIRETIVAS ESTRUTURAIS Interagem com a view e modiﬁcam 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 <-> ﬁlho?

84. Comunicação parente -> ﬁlho 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 ﬁlho -> parente através de @Output()

88. Comunicação ﬁlho -> 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! ﬂuxos: .do .map .ﬁlter .when .add

111. Coisa linda! ﬂuxos: .do .map .ﬁlter .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

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 ﬁlhas

132. Passo 1: Declarar rota parente e rotas ﬁlhas

133. Passo 1: Declarar rota parente e rotas ﬁlhas

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)

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, veriﬁcar 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

158. Template-driven Super hiper mega importante!

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

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