Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Angular 2
Loiane Groner
github.com/loiane
loiane.com
loiane.training
@loiane
em 60 minutos
• 10+ XP TI
• Java, JavaScript, Sencha, Angular
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training
• Meus livros:
!==
TYPESCRIPT
TypeScript
ECMAScript 6
ECMAScript 5
ES 2015
Novembro 2009
meu-script.ts
transpiler
meu-script.js
ES5
Classes e...
O QUE PRECISAMOS INSTALAR
https://nodejs.org
TYPESCRIPT
https://www.typescriptlang.org/
TYPESCRIPT
$ npm install -g typescript
$ sudo npm install -g typescript
SOMENTE MAC OU LINUX
> npm install -g angular-cli
> ng new meu-projeto
> cd meu-projeto
> ng serve
> ng build
> ng test
> ng e2e
> ng deploy
Editores/ IDEs
COMPONENTES DIRETIVAS
ROTEAMENTOSERVIÇOS
TEMPLATE
DATA BINDINGINJEÇÃO
DEPENDÊNCIA
MÓDULOS
Blocos Principais
COMPONENTE
{…}
TEMPLATE
<..>
COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
Binding de
Eventos
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
Binding de
Propriedades
Binding de
Eventos
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B
Binding de
Propriedades
Binding de
Eventos
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B MÓDULO X
MÓDULO A
MÓDULO B
Binding de
Propriedade...
Módulos
Imports das classes
Declaração dos
Components, Directives, Pipes que
queremos usar no projeto
Declaração dos
Components, Directives, Pipes que
queremos usar no projeto
Import dos Módulos que
serão usados por esse mód...
Declaração dos
Components, Directives, Pipes que
queremos usar no projeto
Import dos Módulos que
serão usados por esse mód...
Também podemos ter
módulo de funcionalidade
pra ajudar a organizar o
projeto
Também podemos ter
módulo de funcionalidade
pra ajudar a organizar o
projeto
Fornecedores de serviços
Admin
Usuários
Permissões
Shared/Common
Validações
Pipes
Produtos
ProdutosPainel
ProdutoLista
ProdutoDetalhe
ProdutoForm
C...
Componentes
Passo 1: Criar e Declarar Componente
Passo 1: Criar e Declarar Componente
Passo 1: Criar e Declarar Componente
Passo 1: Criar e Declarar Componente
Nome da tag a ser
utilizada
Passo 2: Importar e Declarar no módulo (e exportar caso queira
expor a outros módulos
Passo 3: Usar a tag do Componente criado
Passo 3: Usar a tag do Componente criado
Templates
Template contém o HTML que será renderizado
Pode ser declarado inline (no próprio componente)
Pode ser declarado inline (no próprio componente)
Ou num arquivo separado
Ou num arquivo separado
Estilizando componentes/
templates
Data
Binding
DATA BINDING
<TEMPLATE>
{COMPONENT}
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
[(ngModel)]="propriedade"
#1: Interpolação
#1: Interpolação
#1: Interpolação
#2: Binding de propriedades (property binding)
#2: Binding de propriedades (property binding)
Todas as imagens tem o
mesmo resultado
#3: Class binding (também é property binding)
#3: Class binding (também é property binding)
Variável local
chamada class
#3: Class binding (também é property binding)
Variável local
chamada class
Property binding
#4: Style binding (também é property binding)
#4: Style binding (também é property binding)
Mostra o estilo
ou não?
#4: Style binding (também é property binding)
Mostra o estilo
ou não?
Expressão com o
valor da variável
#5: Event binding (binding de evento)
#5: Event binding (binding de evento)
Evento a ser
"escutado"
#5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada
#5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada
#5: Event binding (binding de evento)
Evento a ser
"escutado"
Método/Função a
ser executada
Como manter o template e o
componente atualizados?
Como manter o template e o
componente atualizados?
Como manter o template e o
componente atualizados?
Como manter o template e o
componente atualizados?
Property binding +
event binding
Como manter o template e o
componente atualizados?
#6: Binding de Model (two-way data-binding)
#6: Binding de Model (two-way data-binding)
#6: Binding de Model (two-way data-binding)
Two-way
data binding com
NgModel
Diretivas
TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*...
TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*...
Condicional If: JavaScript
Diretiva *ngIf
Loop for: JavaScript
Diretiva *ngFor
Property binding de classe
Diretiva ngClass
Criando uma diretiva customizada
Usando a diretiva
E como os componentes se comunicam?
Componente parente <-> filho?
Comunicação parente -> filho através de @Input()
Comunicação parente -> Filho através de @Input()
Comunicação parente -> Filho através de @Input()
2 - Usamos a anotação @Input nos atributos que
queremos expor
Comunicação filho -> parente através de @Output()
Comunicação filho -> parente através de @Output()
Emitimos o evento
"clicked"
Com @Output podemos escutar eventos customizados
Com @Output podemos escutar eventos customizados
Serviços
Passo 1: Criar uma classe com métodos!
Passo 1: Criar uma classe com métodos!
Injeção de
Dependência
Passo 2: Decorar a classe
Passo 2: Decorar a classe
Importar
Passo 3: Importar e registrar como
fornecedor de dados no módulo
Passo 3: Importar e registrar como
fornecedor de dados no módulo
Importar
Passo 4: Importar e passar o serviço para o construtor da classe
Passo 4: Importar e passar o serviço para o construtor da classe
Importar
Passo 1: Importar e Injetar na classe (serviço)
Passo 1: Importar e Injetar na classe (serviço)
Importar
Não esquecer de ter o módulo Http importado no módulo
também
Não esquecer de ter o módulo Http importado no módulo
também
Importar o
módulo
Só usar os métodos get, post, put e delete!
Exemplo CRUD com REST
Upload Arquivo
https://github.com/angular/http/issues/75
Por enquanto: upload de arquivo "na mão"
Coisa linda!
Coisa linda!
fluxos:
.do
.map
.filter
.when
.add
Coisa linda!
fluxos:
.do
.map
.filter
.when
.add
Programação reativa!
No componente é só se inscrever no Observador (Observable)
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 qua...
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 qua...
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 qua...
Roteamento
Passo 1: app.routing.ts
Passo 1: app.routing.ts
Passo 1: app.routing.ts
Passo 1: app.routing.ts
Passo 2: importar arquivo no app.module e declarar nos imports
Importar as rotas
Passo 3: Adicionar o router-outlet no seu componente principal
Passo 4: Adicionar os links de roteamento na aplicação
Organizando as
rotas do projeto
Módulo Usuários: criar arquivo users.routing.ts
(também não esquecer de importar no app.module.ts
Pode passar parâmetro pra rota também!
E pra obter o parâmetro da rota:
E pra obter o parâmetro da rota:
Não esquecer de importar e injetar no construtor
Rotas filhas
Passo 1: Declarar rota parente e rotas filhas
Passo 1: Declarar rota parente e rotas filhas
Passo 2: no componente parente também é
preciso de declarar o router-outlet
Passo 2: no componente parente também é
preciso de declarar o router-outlet
Guards:
canActivate
canDeactivate
Passo 1: Adicionar a guarda na rota
Passo 1: Adicionar a guarda na rota
Passo 2: criar um serviço com a lógica (usuário logado, etc)
Passo 2: criar um serviço com a lógica (usuário logado, etc)
Passo 2: criar um serviço com a lógica (usuário logado, etc)
Passo 2: criar um serviço com a lógica (usuário logado, etc)
Passo 3: declarar o serviço guarda como provider no módulo
Passo 3: declarar o serviço guarda como provider no módulo
Passo 1: criar serviço de guarda
Passo 2: implementar a lógica
No desativamento da rota, verificar se tem mudanças no formulário.
Passo 3: adicionar guarda na rota
Passo 3: adicionar guarda na rota
e tem mais!
Pipes
Decortator @Pipe
Pra usar: | nomeDoPipe
Formulários
2 TIPOS NO ANGULAR 2
•Data-driven (Formulário reativo)
•Lógica de validação no Component
•Template driven
•Lógica de valid...
Template-driven
Template-driven
Template-driven
Template-driven
Super hiper mega
importante!
Template-driven
Template-driven
Template-driven
Template-driven
Template-driven
Template-driven
Template-driven
Template-driven
Super hiper mega
importante!
Variável
local referenciando o campo
pra validação
Template-driven
Template-driven
Data-driven
Data-driven
Data-driven
Super hiper mega
importante #1
Data-driven
Data-driven
Data-driven
Super hiper mega
importante #2
Data-driven
Data-driven
Data-driven
Data-driven
Data-driven: submit: já temos o form!
Data-driven: validação customizada
> npm install -g angular-cli
> ng new meu-projeto
> cd meu-projeto
> ng serve
ANGULAR CLI: CRIANDO COMPONENTS
> cd NomeProjeto
> ng generate component meu-primeiro
> ng g component meu-primeiro
ANGULAR CLI: CRIANDO COMPONENTS
Convenção de nomenclatura
meu-primeiro.component.ts
Palavras separadas por “-“
Ponto
“component" -> para indicar que é um ...
Convenção de nomenclatura
export class MeuPrimeiroComponent {}
meu-primeiro.component.ts
Convenção de nomenclatura
export class MeuPrimeiroComponent {}
meu-primeiro.component.ts
O mesmo se aplica a service.ts,
p...
Dicas
Projetos
Grandes
Lazy loading +
módulos
Roteamento:
loadChildren
Roteamento:
loadChildren
Carrega a aplicação
Carrega o módulo
Ahead of Time
Compilation
DESENVOLVIMENTO DO PROJETO COM ANGULAR 2 + TYPESCRIPT
COMPILAÇÃO DA APLICAÇÃO COM TSC (COMPILADOR TS)
BUNDLING (TUDO EM UM...
DOWNLOAD DE TODOS OS ARQUIVOS JAVASCRIPT
BOOTSTRAP DO ANGULAR 2
COMPILAÇÃO EM TEMPO REAL
APLICAÇÃO É RENDERIZADA
DESENVOLVIMENTO DO PROJETO COM ANGULAR 2 + TYPESCRIPT
COMPILAÇÃO DA APLICAÇÃO COM NGC (ANGULAR2 COMPILER)
BUNDLING (TUDO E...
DOWNLOAD DE TODOS OS ARQUIVOS JAVASCRIPT
BOOTSTRAP DO ANGULAR 2
APLICAÇÃO É RENDERIZADA
ANGULAR CLI: NG SERVE OU BUILD —AOT
> cd NomeProjeto
> ng serve —-aot
> ng build —-aot
Juntando tudo!
Demo
•https://github.com/loiane/curso-angular2
•https://github.com/loiane/angular2-pokedex
•https://github.com/loiane/angular2-...
http://loiane.training
Curso Gratuito!
http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://l...
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Upcoming SlideShare
Loading in …5
×

Angular 2 em 60 minutos

361 views

Published on

Palestra de overview sobre Angular 2 (components, services, directives, template, data binding, pipes, forms: template driven e data driven forms, rotas: rotas filhas, route guard, canActivate, canDeactive) e mais.

Published in: Technology
  • Be the first to comment

Angular 2 em 60 minutos

  1. 1. Angular 2 Loiane Groner github.com/loiane loiane.com loiane.training @loiane em 60 minutos
  2. 2. • 10+ XP TI • Java, JavaScript, Sencha, Angular Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
  3. 3. • Meus livros:
  4. 4. !==
  5. 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. 6. O QUE PRECISAMOS INSTALAR https://nodejs.org
  7. 7. TYPESCRIPT https://www.typescriptlang.org/
  8. 8. TYPESCRIPT $ npm install -g typescript $ sudo npm install -g typescript SOMENTE MAC OU LINUX
  9. 9. > npm install -g angular-cli > ng new meu-projeto > cd meu-projeto > ng serve
  10. 10. > ng build > ng test > ng e2e > ng deploy
  11. 11. Editores/ IDEs
  12. 12. COMPONENTES DIRETIVAS ROTEAMENTOSERVIÇOS TEMPLATE DATA BINDINGINJEÇÃO DEPENDÊNCIA MÓDULOS Blocos Principais
  13. 13. COMPONENTE {…} TEMPLATE <..>
  14. 14. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades
  15. 15. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades Binding de Eventos
  16. 16. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} Binding de Propriedades Binding de Eventos
  17. 17. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B Binding de Propriedades Binding de Eventos
  18. 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. 19. Módulos
  20. 20. Imports das classes
  21. 21. Declaração dos Components, Directives, Pipes que queremos usar no projeto
  22. 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. 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. 24. Também podemos ter módulo de funcionalidade pra ajudar a organizar o projeto
  25. 25. Também podemos ter módulo de funcionalidade pra ajudar a organizar o projeto Fornecedores de serviços
  26. 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. 27. Componentes
  28. 28. Passo 1: Criar e Declarar Componente
  29. 29. Passo 1: Criar e Declarar Componente
  30. 30. Passo 1: Criar e Declarar Componente
  31. 31. Passo 1: Criar e Declarar Componente Nome da tag a ser utilizada
  32. 32. Passo 2: Importar e Declarar no módulo (e exportar caso queira expor a outros módulos
  33. 33. Passo 3: Usar a tag do Componente criado
  34. 34. Passo 3: Usar a tag do Componente criado
  35. 35. Templates
  36. 36. Template contém o HTML que será renderizado
  37. 37. Pode ser declarado inline (no próprio componente)
  38. 38. Pode ser declarado inline (no próprio componente)
  39. 39. Ou num arquivo separado
  40. 40. Ou num arquivo separado
  41. 41. Estilizando componentes/ templates
  42. 42. Data Binding
  43. 43. DATA BINDING <TEMPLATE> {COMPONENT}
  44. 44. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }}
  45. 45. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor"
  46. 46. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  47. 47. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler" [(ngModel)]="propriedade"
  48. 48. #1: Interpolação
  49. 49. #1: Interpolação
  50. 50. #1: Interpolação
  51. 51. #2: Binding de propriedades (property binding)
  52. 52. #2: Binding de propriedades (property binding) Todas as imagens tem o mesmo resultado
  53. 53. #3: Class binding (também é property binding)
  54. 54. #3: Class binding (também é property binding) Variável local chamada class
  55. 55. #3: Class binding (também é property binding) Variável local chamada class Property binding
  56. 56. #4: Style binding (também é property binding)
  57. 57. #4: Style binding (também é property binding) Mostra o estilo ou não?
  58. 58. #4: Style binding (também é property binding) Mostra o estilo ou não? Expressão com o valor da variável
  59. 59. #5: Event binding (binding de evento)
  60. 60. #5: Event binding (binding de evento) Evento a ser "escutado"
  61. 61. #5: Event binding (binding de evento) Evento a ser "escutado" Método/Função a ser executada
  62. 62. #5: Event binding (binding de evento) Evento a ser "escutado" Método/Função a ser executada
  63. 63. #5: Event binding (binding de evento) Evento a ser "escutado" Método/Função a ser executada
  64. 64. Como manter o template e o componente atualizados?
  65. 65. Como manter o template e o componente atualizados?
  66. 66. Como manter o template e o componente atualizados?
  67. 67. Como manter o template e o componente atualizados?
  68. 68. Property binding + event binding Como manter o template e o componente atualizados?
  69. 69. #6: Binding de Model (two-way data-binding)
  70. 70. #6: Binding de Model (two-way data-binding)
  71. 71. #6: Binding de Model (two-way data-binding) Two-way data binding com NgModel
  72. 72. Diretivas
  73. 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. 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. 75. Condicional If: JavaScript
  76. 76. Diretiva *ngIf
  77. 77. Loop for: JavaScript
  78. 78. Diretiva *ngFor
  79. 79. Property binding de classe
  80. 80. Diretiva ngClass
  81. 81. Criando uma diretiva customizada
  82. 82. Usando a diretiva
  83. 83. E como os componentes se comunicam? Componente parente <-> filho?
  84. 84. Comunicação parente -> filho através de @Input()
  85. 85. Comunicação parente -> Filho através de @Input()
  86. 86. Comunicação parente -> Filho através de @Input() 2 - Usamos a anotação @Input nos atributos que queremos expor
  87. 87. Comunicação filho -> parente através de @Output()
  88. 88. Comunicação filho -> parente através de @Output() Emitimos o evento "clicked"
  89. 89. Com @Output podemos escutar eventos customizados
  90. 90. Com @Output podemos escutar eventos customizados
  91. 91. Serviços
  92. 92. Passo 1: Criar uma classe com métodos!
  93. 93. Passo 1: Criar uma classe com métodos!
  94. 94. Injeção de Dependência
  95. 95. Passo 2: Decorar a classe
  96. 96. Passo 2: Decorar a classe Importar
  97. 97. Passo 3: Importar e registrar como fornecedor de dados no módulo
  98. 98. Passo 3: Importar e registrar como fornecedor de dados no módulo Importar
  99. 99. Passo 4: Importar e passar o serviço para o construtor da classe
  100. 100. Passo 4: Importar e passar o serviço para o construtor da classe Importar
  101. 101. Passo 1: Importar e Injetar na classe (serviço)
  102. 102. Passo 1: Importar e Injetar na classe (serviço) Importar
  103. 103. Não esquecer de ter o módulo Http importado no módulo também
  104. 104. Não esquecer de ter o módulo Http importado no módulo também Importar o módulo
  105. 105. Só usar os métodos get, post, put e delete!
  106. 106. Exemplo CRUD com REST
  107. 107. Upload Arquivo https://github.com/angular/http/issues/75
  108. 108. Por enquanto: upload de arquivo "na mão"
  109. 109. Coisa linda!
  110. 110. Coisa linda! fluxos: .do .map .filter .when .add
  111. 111. Coisa linda! fluxos: .do .map .filter .when .add Programação reativa!
  112. 112. No componente é só se inscrever no Observador (Observable)
  113. 113. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado
  114. 114. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado
  115. 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. 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. 117. Roteamento
  118. 118. Passo 1: app.routing.ts
  119. 119. Passo 1: app.routing.ts
  120. 120. Passo 1: app.routing.ts
  121. 121. Passo 1: app.routing.ts
  122. 122. Passo 2: importar arquivo no app.module e declarar nos imports Importar as rotas
  123. 123. Passo 3: Adicionar o router-outlet no seu componente principal
  124. 124. Passo 4: Adicionar os links de roteamento na aplicação
  125. 125. Organizando as rotas do projeto
  126. 126. Módulo Usuários: criar arquivo users.routing.ts (também não esquecer de importar no app.module.ts
  127. 127. Pode passar parâmetro pra rota também!
  128. 128. E pra obter o parâmetro da rota:
  129. 129. E pra obter o parâmetro da rota:
  130. 130. Não esquecer de importar e injetar no construtor
  131. 131. Rotas filhas
  132. 132. Passo 1: Declarar rota parente e rotas filhas
  133. 133. Passo 1: Declarar rota parente e rotas filhas
  134. 134. Passo 2: no componente parente também é preciso de declarar o router-outlet
  135. 135. Passo 2: no componente parente também é preciso de declarar o router-outlet
  136. 136. Guards: canActivate canDeactivate
  137. 137. Passo 1: Adicionar a guarda na rota
  138. 138. Passo 1: Adicionar a guarda na rota
  139. 139. Passo 2: criar um serviço com a lógica (usuário logado, etc)
  140. 140. Passo 2: criar um serviço com a lógica (usuário logado, etc)
  141. 141. Passo 2: criar um serviço com a lógica (usuário logado, etc)
  142. 142. Passo 2: criar um serviço com a lógica (usuário logado, etc)
  143. 143. Passo 3: declarar o serviço guarda como provider no módulo
  144. 144. Passo 3: declarar o serviço guarda como provider no módulo
  145. 145. Passo 1: criar serviço de guarda
  146. 146. Passo 2: implementar a lógica No desativamento da rota, verificar se tem mudanças no formulário.
  147. 147. Passo 3: adicionar guarda na rota
  148. 148. Passo 3: adicionar guarda na rota
  149. 149. e tem mais!
  150. 150. Pipes
  151. 151. Decortator @Pipe
  152. 152. Pra usar: | nomeDoPipe
  153. 153. Formulários
  154. 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. 155. Template-driven
  156. 156. Template-driven
  157. 157. Template-driven
  158. 158. Template-driven Super hiper mega importante!
  159. 159. Template-driven
  160. 160. Template-driven
  161. 161. Template-driven
  162. 162. Template-driven
  163. 163. Template-driven
  164. 164. Template-driven
  165. 165. Template-driven
  166. 166. Template-driven Super hiper mega importante! Variável local referenciando o campo pra validação
  167. 167. Template-driven
  168. 168. Template-driven
  169. 169. Data-driven
  170. 170. Data-driven
  171. 171. Data-driven Super hiper mega importante #1
  172. 172. Data-driven
  173. 173. Data-driven
  174. 174. Data-driven Super hiper mega importante #2
  175. 175. Data-driven
  176. 176. Data-driven
  177. 177. Data-driven
  178. 178. Data-driven
  179. 179. Data-driven: submit: já temos o form!
  180. 180. Data-driven: validação customizada
  181. 181. > npm install -g angular-cli > ng new meu-projeto > cd meu-projeto > ng serve
  182. 182. ANGULAR CLI: CRIANDO COMPONENTS > cd NomeProjeto > ng generate component meu-primeiro > ng g component meu-primeiro
  183. 183. ANGULAR CLI: CRIANDO COMPONENTS
  184. 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. 185. Convenção de nomenclatura export class MeuPrimeiroComponent {} meu-primeiro.component.ts
  186. 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. 187. Dicas Projetos Grandes
  188. 188. Lazy loading + módulos
  189. 189. Roteamento: loadChildren
  190. 190. Roteamento: loadChildren
  191. 191. Carrega a aplicação
  192. 192. Carrega o módulo
  193. 193. Ahead of Time Compilation
  194. 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. 195. DOWNLOAD DE TODOS OS ARQUIVOS JAVASCRIPT BOOTSTRAP DO ANGULAR 2 COMPILAÇÃO EM TEMPO REAL APLICAÇÃO É RENDERIZADA
  196. 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. 197. DOWNLOAD DE TODOS OS ARQUIVOS JAVASCRIPT BOOTSTRAP DO ANGULAR 2 APLICAÇÃO É RENDERIZADA
  198. 198. ANGULAR CLI: NG SERVE OU BUILD —AOT > cd NomeProjeto > ng serve —-aot > ng build —-aot
  199. 199. Juntando tudo! Demo
  200. 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. 201. http://loiane.training Curso Gratuito!
  202. 202. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×