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