SlideShare uma empresa Scribd logo
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:
!==
Angular 2 em 60 minutos
Angular 2 em 60 minutos
Angular 2 em 60 minutos
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
Angular 2 em 60 minutos
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
Propriedades
Binding de
Eventos
Módulos
Angular 2 em 60 minutos
Imports das classes
Angular 2 em 60 minutos
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ódulo
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
Angular 2 em 60 minutos
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
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
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
Angular 2 em 60 minutos
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
Angular 2 em 60 minutos
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
*ngIf
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
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
Angular 2 em 60 minutos
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"
Angular 2 em 60 minutos
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 quando Component é inicializado
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
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
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
Angular 2 em 60 minutos
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
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 componente
Ponto
ts -> extensão typescript
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,
pipe.ts, directive.ts, etc
Angular 2 em 60 minutos
Angular 2 em 60 minutos
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 ARQUIVO APENAS)
MINIFICAÇÃO
DEPLOY
Compilação "normal"
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 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
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-crud-rest
•https://github.com/loiane/angular2-crud-auth-routing
http://loiane.training
Curso Gratuito!
Angular 2 em 60 minutos
http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training

Mais conteúdo relacionado

Mais procurados

Python For SEO specialists and Content Marketing - Hand in Hand
Python For SEO specialists and Content Marketing - Hand in HandPython For SEO specialists and Content Marketing - Hand in Hand
Python For SEO specialists and Content Marketing - Hand in Hand
Dido Grigorov
 
Alice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu - WordPress For Beginners
Alice Phieu - WordPress For Beginners
Alice Phieu
 
Intro tot language models voor SEO
Intro tot language models voor SEOIntro tot language models voor SEO
Intro tot language models voor SEO
Michael Van Den Reym
 
What is Delegation Inheritance in Odoo 15
What is Delegation Inheritance in Odoo 15What is Delegation Inheritance in Odoo 15
What is Delegation Inheritance in Odoo 15
Celine George
 
Hacking GA4 for SEO - Brighton SEO - Apr 2023
Hacking GA4 for SEO - Brighton SEO - Apr 2023Hacking GA4 for SEO - Brighton SEO - Apr 2023
Hacking GA4 for SEO - Brighton SEO - Apr 2023
Nitesh Sharoff
 
BrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdf
BrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdfBrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdf
BrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdf
Steven van Vessum
 
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
Jessica Maloney
 
Brighton SEO 2021 - A Deep Dive into the Depths of DevTools
Brighton SEO 2021 - A Deep Dive into the Depths of DevToolsBrighton SEO 2021 - A Deep Dive into the Depths of DevTools
Brighton SEO 2021 - A Deep Dive into the Depths of DevTools
ChrisJohnson792
 
Hannah Rogers - Facing Your SEO Fears: Forecasting
Hannah Rogers - Facing Your SEO Fears: ForecastingHannah Rogers - Facing Your SEO Fears: Forecasting
Hannah Rogers - Facing Your SEO Fears: Forecasting
HannahRogers52
 
Software Testing for SEO
Software Testing for SEOSoftware Testing for SEO
Software Testing for SEO
Michael King
 
Odoo ORM Methods | Object Relational Mapping in Odoo15
Odoo ORM Methods | Object Relational Mapping in Odoo15 Odoo ORM Methods | Object Relational Mapping in Odoo15
Odoo ORM Methods | Object Relational Mapping in Odoo15
Celine George
 
GretaMunari - The redemption of content automation
GretaMunari - The redemption of content automationGretaMunari - The redemption of content automation
GretaMunari - The redemption of content automation
GretaMunari1
 
Crafting an SEO Strategy That WORKS [Case Study]
Crafting an SEO Strategy That WORKS [Case Study]Crafting an SEO Strategy That WORKS [Case Study]
Crafting an SEO Strategy That WORKS [Case Study]
Ryan Stewart
 
chima mmeje brighton seo speaker slide april22
chima mmeje   brighton seo speaker slide april22chima mmeje   brighton seo speaker slide april22
chima mmeje brighton seo speaker slide april22
chima mmeje
 
Brighton SEO October 2022: How your website impacts the planet - and what yo...
Brighton SEO October 2022: How your website impacts the planet -  and what yo...Brighton SEO October 2022: How your website impacts the planet -  and what yo...
Brighton SEO October 2022: How your website impacts the planet - and what yo...
Stuart Davies
 
The Value of Featured Snippets (BrightonSEO 2023).pdf
The Value of Featured Snippets (BrightonSEO 2023).pdfThe Value of Featured Snippets (BrightonSEO 2023).pdf
The Value of Featured Snippets (BrightonSEO 2023).pdf
Niki Mosier
 
Odoo - Smart buttons
Odoo - Smart buttonsOdoo - Smart buttons
Odoo - Smart buttons
Odoo
 
Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...
Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...
Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...
Luis
 
Flywaydb
FlywaydbFlywaydb
The Worst Technical SEO Nightmares and How to Avoid Them
The Worst Technical SEO Nightmares and How to Avoid ThemThe Worst Technical SEO Nightmares and How to Avoid Them
The Worst Technical SEO Nightmares and How to Avoid Them
Aleyda Solís
 

Mais procurados (20)

Python For SEO specialists and Content Marketing - Hand in Hand
Python For SEO specialists and Content Marketing - Hand in HandPython For SEO specialists and Content Marketing - Hand in Hand
Python For SEO specialists and Content Marketing - Hand in Hand
 
Alice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu - WordPress For Beginners
Alice Phieu - WordPress For Beginners
 
Intro tot language models voor SEO
Intro tot language models voor SEOIntro tot language models voor SEO
Intro tot language models voor SEO
 
What is Delegation Inheritance in Odoo 15
What is Delegation Inheritance in Odoo 15What is Delegation Inheritance in Odoo 15
What is Delegation Inheritance in Odoo 15
 
Hacking GA4 for SEO - Brighton SEO - Apr 2023
Hacking GA4 for SEO - Brighton SEO - Apr 2023Hacking GA4 for SEO - Brighton SEO - Apr 2023
Hacking GA4 for SEO - Brighton SEO - Apr 2023
 
BrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdf
BrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdfBrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdf
BrightonSEO October 2022 - Log File Analysis - Steven van Vessum.pdf
 
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
 
Brighton SEO 2021 - A Deep Dive into the Depths of DevTools
Brighton SEO 2021 - A Deep Dive into the Depths of DevToolsBrighton SEO 2021 - A Deep Dive into the Depths of DevTools
Brighton SEO 2021 - A Deep Dive into the Depths of DevTools
 
Hannah Rogers - Facing Your SEO Fears: Forecasting
Hannah Rogers - Facing Your SEO Fears: ForecastingHannah Rogers - Facing Your SEO Fears: Forecasting
Hannah Rogers - Facing Your SEO Fears: Forecasting
 
Software Testing for SEO
Software Testing for SEOSoftware Testing for SEO
Software Testing for SEO
 
Odoo ORM Methods | Object Relational Mapping in Odoo15
Odoo ORM Methods | Object Relational Mapping in Odoo15 Odoo ORM Methods | Object Relational Mapping in Odoo15
Odoo ORM Methods | Object Relational Mapping in Odoo15
 
GretaMunari - The redemption of content automation
GretaMunari - The redemption of content automationGretaMunari - The redemption of content automation
GretaMunari - The redemption of content automation
 
Crafting an SEO Strategy That WORKS [Case Study]
Crafting an SEO Strategy That WORKS [Case Study]Crafting an SEO Strategy That WORKS [Case Study]
Crafting an SEO Strategy That WORKS [Case Study]
 
chima mmeje brighton seo speaker slide april22
chima mmeje   brighton seo speaker slide april22chima mmeje   brighton seo speaker slide april22
chima mmeje brighton seo speaker slide april22
 
Brighton SEO October 2022: How your website impacts the planet - and what yo...
Brighton SEO October 2022: How your website impacts the planet -  and what yo...Brighton SEO October 2022: How your website impacts the planet -  and what yo...
Brighton SEO October 2022: How your website impacts the planet - and what yo...
 
The Value of Featured Snippets (BrightonSEO 2023).pdf
The Value of Featured Snippets (BrightonSEO 2023).pdfThe Value of Featured Snippets (BrightonSEO 2023).pdf
The Value of Featured Snippets (BrightonSEO 2023).pdf
 
Odoo - Smart buttons
Odoo - Smart buttonsOdoo - Smart buttons
Odoo - Smart buttons
 
Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...
Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...
Brighton SEO - Luis Bueno Tabernero - How to do an ASO Audit like in the 90's...
 
Flywaydb
FlywaydbFlywaydb
Flywaydb
 
The Worst Technical SEO Nightmares and How to Avoid Them
The Worst Technical SEO Nightmares and How to Avoid ThemThe Worst Technical SEO Nightmares and How to Avoid Them
The Worst Technical SEO Nightmares and How to Avoid Them
 

Destaque

Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2 Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2
Loiane Groner
 
Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutesAngular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
Loiane Groner
 
Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10
Loiane Groner
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na pratica
Loiane Groner
 
Angular 2
Angular 2Angular 2
Angular 2
Loiane Groner
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
Loiane Groner
 
DevFest BH: Ionic 2
DevFest BH: Ionic 2DevFest BH: Ionic 2
DevFest BH: Ionic 2
Loiane Groner
 
Tutorial do app e o divulgador
Tutorial do app e o divulgadorTutorial do app e o divulgador
Tutorial do app e o divulgador
Adeilton R
 
DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2
Loiane Groner
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
Loiane Groner
 
TDC SP 2016: Ionic 2
TDC SP 2016: Ionic 2TDC SP 2016: Ionic 2
TDC SP 2016: Ionic 2
Loiane Groner
 
Open Source Mobile Experience: Ionic 2
Open Source Mobile Experience: Ionic 2Open Source Mobile Experience: Ionic 2
Open Source Mobile Experience: Ionic 2
Loiane Groner
 
Oficina App Inventor
Oficina App InventorOficina App Inventor
Oficina App Inventor
Marco Antonio Sanches
 

Destaque (13)

Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2 Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2
 
Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutesAngular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
 
Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na pratica
 
Angular 2
Angular 2Angular 2
Angular 2
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
 
DevFest BH: Ionic 2
DevFest BH: Ionic 2DevFest BH: Ionic 2
DevFest BH: Ionic 2
 
Tutorial do app e o divulgador
Tutorial do app e o divulgadorTutorial do app e o divulgador
Tutorial do app e o divulgador
 
DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
TDC SP 2016: Ionic 2
TDC SP 2016: Ionic 2TDC SP 2016: Ionic 2
TDC SP 2016: Ionic 2
 
Open Source Mobile Experience: Ionic 2
Open Source Mobile Experience: Ionic 2Open Source Mobile Experience: Ionic 2
Open Source Mobile Experience: Ionic 2
 
Oficina App Inventor
Oficina App InventorOficina App Inventor
Oficina App Inventor
 

Semelhante a Angular 2 em 60 minutos

Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + Firebase
Bruno Catão
 
Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e Além
Andre Baltieri
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Daniel Makiyama
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLI
Vanessa Me Tonini
 
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWSAcelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Amazon Web Services LATAM
 
Python 08
Python 08Python 08
Python 08
Bruno Catão
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
Elmano Cavalcanti
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
Alvaro Viebrantz
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
antonio sérgio nogueira
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Allyson Barros
 
Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5
Andre A. Verissimo da Silva
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
Rodrigo Branas
 
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas RápidasDevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
Amazon Web Services LATAM
 
Cucumber-QA_Night
Cucumber-QA_NightCucumber-QA_Night
Cucumber-QA_Night
Taise Dias da Silva
 
[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados
Samanta Cicilia
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
elliando dias
 
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
Dextra Sistemas / Etec Itu
 
Cucumber
CucumberCucumber
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-end
Giovanny Valente
 
Desenvolvimento Web com Simfony Framework.
Desenvolvimento Web com Simfony Framework.Desenvolvimento Web com Simfony Framework.
Desenvolvimento Web com Simfony Framework.
Vinícius de Paula
 

Semelhante a Angular 2 em 60 minutos (20)

Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + Firebase
 
Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e Além
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLI
 
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWSAcelerando a entrega de software com as ferramentas de desenvolvimento da AWS
Acelerando a entrega de software com as ferramentas de desenvolvimento da AWS
 
Python 08
Python 08Python 08
Python 08
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
 
Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
 
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas RápidasDevOps na AWS: Construindo Sistemas para Entregas Rápidas
DevOps na AWS: Construindo Sistemas para Entregas Rápidas
 
Cucumber-QA_Night
Cucumber-QA_NightCucumber-QA_Night
Cucumber-QA_Night
 
[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
 
Cucumber
CucumberCucumber
Cucumber
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-end
 
Desenvolvimento Web com Simfony Framework.
Desenvolvimento Web com Simfony Framework.Desenvolvimento Web com Simfony Framework.
Desenvolvimento Web com Simfony Framework.
 

Último

Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdfEletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
barbosajucy47
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
Segurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptxSegurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptx
Divina Vitorino
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 

Último (7)

Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdfEletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
Segurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptxSegurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptx
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 

Angular 2 em 60 minutos