Primeiros passos num framework front end

com

@anabneri
Até uns tempos atrás meu mundo era:
Eis que

Então é assim que o Angular funciona

ng g c Ana

Engenheira de Software

Organizadora de comunidades

Meu blog: anabneri.com.br

linkedln.com/in/anabeatrizdev/

@anabneri
 Agenda:

Projeto de demo
TypeScript
O que é o angular Ambiente
Por que o Angular Service
Versionamento

Estrutura
O Case:

Eu preciso d
e um
site para list
ar
meus pokem
ons!!
 Meu cenário:

Desenvolvimento backend

Experiência com linguagem

tipada

Amor pelo SpringBoot

VOU FAZER EM ANGULAR!!!
O Que é o angular?
Um framework completo front end
Que utiliza as seguintes tecnologias

Single-Page
Applications
Single-Page Applications
Por que o Angular?
TIPADO
Pra quem vem do backend (java) é a melhor
opção
REATIVO
Um novo paradigma de programação, que se
preocupa com o fluxo de dados e a propagação
da mudança
ROBUSTO
A comunidade é gigante, com muito conteúdo
gratuito
Versionamento
X Y Z
major minor patch
Estrutura
 Componentes
Possibilitam a criação de códigos que possam
ser reutilizados
Decorator
Onde é possível definir as propriedades de um
componente
Classes
 É TUDO TÃO
ORGANIZADO *--*
 Módulos
Agrupar, exportar e esconder arquivos

Cada aplicação tem um module root da

aplicação que é gerado pelo NgModule
Módulos

Código html

Componentes typescripts
Modulos typescripts

Rotas da página
Módulos
 Directive
Template {....}
<....>
Property
Binding

Injector Component
API BD
Service A {....}
Service B
Typescript
 Vantagens
Funções menores e mais integradas

Você não precisa saber Typescript para usar o

Angular

Consigo criar funções e adicionar

funcionalidades extras
 Desvantagens
Mais um paradigma de programação

Mais robustez/ verbosidade

Ambiente
Service
Firebase

Um serviço para plataformas web, na qual

promove muitos serviços e um deles é o
“develop” que foi o que eu usei
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
Para incluir no projeto é muito mais
simples, basta colocar as credenciais
no arquivo app.modules.ts
MAS E MEU
SITE
DE
POKEMONS
?????
YAAAAY agora o Ashi tem sua lista de
pokemons online, administrando seus
pokemons ele tem mais vantagens
Por fim
Who is this next framewrok
JavaScript?
DEPENDE
Empresas que utilizam angular
Por hoje é só!

VLW <3
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-910bdb6
4aef5