Slide 1
Slide 1 text
Os primeiros passos num framework front end
com
@anabneri
Slide 2
Slide 2 text
Até uns tempos atrás meu mundo era:
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Eis que
Então é assim que o Angular funciona
Slide 5
Slide 5 text
ng g c Ana
Engenheira de Software
Organizadora de comunidades
Meu blog:
https://anabneri.github.io/
@anabneri
linkedln.com/in/anabeatrizdev/
Slide 6
Slide 6 text
Agenda:
Projeto de demo
Por que o Angular
Versionamento
Estrutura
TypeScript
Ambiente
Service
O que é o angular
Slide 7
Slide 7 text
O Case:
Slide 8
Slide 8 text
Desenvolvimento backend
Experiência com linguagem
tipada
Amor pelo SpringBoot
Meu cenário:
Slide 9
Slide 9 text
VOU FAZER EM ANGULAR!!!
Slide 10
Slide 10 text
O Que é o angular?
Slide 11
Slide 11 text
Um framework completo front end
Slide 12
Slide 12 text
Single-Page
Applications
Que utiliza as seguintes tecnologias
Slide 13
Slide 13 text
Single-Page Applications
Slide 14
Slide 14 text
Por que o Angular?
Slide 15
Slide 15 text
Pra quem vem do backend (java) é a melhor
opção
TIPADO
Slide 16
Slide 16 text
Um novo paradigma de programação, que se
preocupa com o fluxo de dados e a
propagação da mudança
REATIVO
Slide 17
Slide 17 text
A comunidade é gigante, com muito conteúdo
gratuito
ROBUSTO
Slide 18
Slide 18 text
Versionamento
Slide 19
Slide 19 text
X Y Z
major minor patch
Slide 20
Slide 20 text
Estrutura
Slide 21
Slide 21 text
Possibilitam a criação de códigos que possam
ser reutilizados
Componentes
Slide 22
Slide 22 text
Onde é possível definir as propriedades de um
componente
Decorator
Slide 23
Slide 23 text
Classes
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
É TUDO TÃO
ORGANIZADO *--*
Slide 26
Slide 26 text
Agrupar, exportar e esconder arquivos
Módulos
Cada aplicação tem um module root da
aplicação que é gerado pelo NgModule
Slide 27
Slide 27 text
Módulos
Código html
Componentes typescripts
Modulos typescripts
Rotas da página
Slide 28
Slide 28 text
Módulos
Slide 29
Slide 29 text
Template
<....>
Component
{....}
Directive
{....}
API BD
Injector
Service A
Service B
Property
Binding
Slide 30
Slide 30 text
Typescript
Slide 31
Slide 31 text
Funções menores e mais integradas
Vantagens
Você não precisa saber typescript para usar o
Angular
Consigo criar funções e adicionar
funcionalidades extras
Slide 32
Slide 32 text
Mais um paradigma de programação
Desvantagens
Mais robustez/ verbosidade
Slide 33
Slide 33 text
Ambiente
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Service
Slide 37
Slide 37 text
Firebase
Um serviço para plataformas web, na qual
promove muitos serviços e um deles é o
“develop” que foi o que eu usei
Slide 38
Slide 38 text
Para o que eu precisava o serviço de
construir uma API seria um canhão
para matar uma formiga
Então usando o serviço Develop do
firebase, criando um realtime
database para armazenar meus dados
em tempo real
Slide 39
Slide 39 text
Para incluir no projeto é muito mais
simples, basta colocar as credenciais
no arquivo app.modules.ts
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
YAAAAY agora o Ashi tem sua lista
de pokemons online, administrando
seus pokemons ele tem mais
vantagens
Slide 42
Slide 42 text
Por fim
Who is this next framewrok
JavaScript?
Slide 43
Slide 43 text
DEPENDE
Slide 44
Slide 44 text
Empresas que utilizam angular
Slide 45
Slide 45 text
Por hoje é só!
VLW <3
Me segue nas redes
@anabneri
@unicorn.tech
@womakerscode
@SouJavaSP
Slide 46
Slide 46 text
Referências
• https://angular.io/
• https://loiane.training/curso/angular
• https://movile.blog/aplicacoes-front-angular/
• https://medium.com/better-programming/angular-5-creating-new-component-c6c5236f8024
• https://ng-bootstrap.github.io/#/components/modal/examples
• https://blog.wgbn.com.br/como-usar-seus-componentes-angular-em-qualquer-lugar-3ef1d57c117e
• https://inside.contabilizei.com.br/javascript-seo-desenvolvendo-p%C3%A1ginas-index%C3%A1veis-
910bdb64aef5
• Willian Grasel
• Denis Velrino