Angular 2 em 60 minutos
5 gostaram726 visualizações
1) O documento apresenta informações sobre Angular 2 ministrado por Loiane Groner em 60 minutos, incluindo seus contatos e experiência. 2) São apresentados os principais blocos do Angular 2 como componentes, diretivas, roteamento, serviços, módulos e data binding. 3) O documento fornece um resumo dos principais tópicos para se aprender Angular 2, como tiposcript, criação de projetos, componentes, diretivas, comunicação entre componentes e muito mais.
![DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"](https://image.slidesharecdn.com/angular2-60minutos-161126143507/85/Angular-2-em-60-minutos-54-320.jpg)
![DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"](https://image.slidesharecdn.com/angular2-60minutos-161126143507/85/Angular-2-em-60-minutos-55-320.jpg)
![DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
[(ngModel)]="propriedade"](https://image.slidesharecdn.com/angular2-60minutos-161126143507/85/Angular-2-em-60-minutos-56-320.jpg)
Angular 2 em 60 minutos
- 2. • 10+ XP TI • Java, JavaScript, Sencha, Angular Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
- 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
- 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
- 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
- 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
- 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
- 51. Data Binding
- 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
- 85. Diretiva *ngIf
- 87. Diretiva *ngFor
- 88. Property binding de classe
- 89. Diretiva ngClass
- 90. Criando uma diretiva customizada
- 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!
- 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
- 118. Por enquanto: upload de arquivo "na mão"
- 120. Coisa linda!
- 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
- 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
- 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
- 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
- 184. Data-driven
- 185. Data-driven
- 187. Data-driven
- 188. Data-driven
- 189. Data-driven
- 190. Data-driven
- 191. Data-driven: submit: já temos o form!
- 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
- 205. Carrega a aplicação
- 206. Carrega o módulo
- 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