Tweet
Tweet

Slide 1

Slide 1 text

Java + Angular Como dominar essa stack?

Slide 2

Slide 2 text

Kamila Santos Dev Backend

Slide 3

Slide 3 text

Entre em contato :)

Slide 4

Slide 4 text

O que vamos ter na Live Coding?

Slide 5

Slide 5 text

Spring <3

Slide 6

Slide 6 text

Spring Framework 20+ Spring Framework 20+

Slide 7

Slide 7 text

Spring Framework 20+ Spring Boot

Slide 8

Slide 8 text

Spring Framework 20+ Spring Data JPA

Slide 9

Slide 9 text

Spring Framework 20+ Spring Security

Slide 10

Slide 10 text

Spring Framework 20+ Spring Cloud

Slide 11

Slide 11 text

Spring Framework 20+ Spring Batch

Slide 12

Slide 12 text

Spring Framework 20+ Spring WebFlux

Slide 13

Slide 13 text

Angular <3

Slide 14

Slide 14 text

Spring Framework 20+ Framework para construção da interface de aplicações usando HTML, CSS e, principalmente, JavaScript, criada pelos desenvolvedores da Google.

Slide 15

Slide 15 text

Spring Framework 20+ Baseado em componentes

Slide 16

Slide 16 text

Spring Framework 20+ Desenvolver SPAs: uma aplicação web que roda em uma única página e atualiza só o que voce desejar

Slide 17

Slide 17 text

Spring Framework 20+

Slide 18

Slide 18 text

RXJS

Slide 19

Slide 19 text

Spring Framework 20+ Biblioteca para desenvolver aplicações assíncronas baseadas em eventos usando sequências de observables.

Slide 20

Slide 20 text

Spring Framework 20+ Tem um tipo "core" que é o Observable e os chamados tipos "secundários" ( Schedulers, Subscriptions,Subjects)

Slide 21

Slide 21 text

Spring Framework 20+

Slide 22

Slide 22 text

Spring Framework 20+ RESPONSIVO O sistema responde em tempo hábil, se possível

Slide 23

Slide 23 text

Spring Framework 20+ RESILIENTE O sistema permanece responsivo diante de falhas

Slide 24

Slide 24 text

Spring Framework 20+ ELÁSTICO O sistema permanece responsivo diante de uma carga de trabalho variável.

Slide 25

Slide 25 text

Spring Framework 20+ MESSAGE DRIVEN Aplicações reativas dependem da passagem de mensagens assíncronas para estabelecer um limite entre os componentes, garantindo um acoplamento flexível , isolamento e transparência

Slide 26

Slide 26 text

LIFECYCLE HOOKS?

Slide 27

Slide 27 text

Spring Framework 20+ O QUE SÃO LIFECYCLE HOOKS? Todo componente angular tem um ciclo de vida: passa pelo processo de criação, execução e possível destruição.

Slide 28

Slide 28 text

Spring Framework 20+ O QUE SÃO LIFECYCLE HOOKS? Isso é realizado pelo Angular criando o componente, renderizando, criando e renderizando seus filhos, verificando modificações nas propriedades e no DOM, realizando alterações, destruindo e removendo do DOM.

Slide 29

Slide 29 text

Spring Framework 20+ ngOnChanges() É o primeiro lifeCycle Hook é chamado logo após a inicialização da classe e o componente é criado

Slide 30

Slide 30 text

Spring Framework 20+ ngOnChanges() Também é chamado quando há alteração de propriedade dentro do seu componente.

Slide 31

Slide 31 text

Spring Framework 20+ ngOnInit() Este é chamado depois do ngOnChanges(), só é chamado uma única vez, inicializa o componente, define e exibe suas propriedades de entrada.

Slide 32

Slide 32 text

Spring Framework 20+ ngOnInit() É o lifeCycle mais importante do Angular, pois "alerta" que um componente foi criado.

Slide 33

Slide 33 text

Spring Framework 20+ ngDoCheck() É chamado durante todas verificações de mudança durante a execução, geralmente depois que o NgOnInit é chamado

Slide 34

Slide 34 text

Spring Framework 20+ ngAfterContentInit() Só é executado uma vez depois que o primeiro ngDoCheck é chamado, semelhando ao ngDoCheck, mas projetado para visualização do componente.

Slide 35

Slide 35 text

Spring Framework 20+ ngAfterContentChecked() Este hook é chamado depois que o conteúdo projetado para a visualização do componente é inicializado, após o ngAfterContentInit e ngDoCheck forem chamados.

Slide 36

Slide 36 text

Spring Framework 20+ ngAfterViewInit() Chamado após as visualizações dos componentes e seus subsequentes filhos, após a execução do hook ngAfterContentChecked

Slide 37

Slide 37 text

Spring Framework 20+ ngAfterViewChecked() Nosso penúltimo lifecycle hook, executados após todos os demais.

Slide 38

Slide 38 text

Spring Framework 20+ ngOnDestroy() O último lifeCycle , é chamado antes do componente ser ser removido do DOM

Slide 39

Slide 39 text

Spring Framework 20+ ngOnDestroy() É feita a limpeza do componente, desde a desanexação de event handlers até a desinscrição de observables.

Slide 40

Slide 40 text

Event Binding

Slide 41

Slide 41 text

Spring Framework 20+ Event Binding Utilizamos o eventBinding para vincular um código da aplicação a um determinado evento do disparado pelo navegador.

Slide 42

Slide 42 text

Spring Framework 20+ O que precisamos saber? 1-Qual elemento emitirá o evento? 2- Qual o nome do evento que será emitido? 3- Qual o nome do método do componente que será executado em resposta ao evento?

Slide 43

Slide 43 text

Spring Framework 20+ (click) Quando o mouse clica algum elemento ele é disparado.

Slide 44

Slide 44 text

Spring Framework 20+

Slide 45

Slide 45 text

Spring Framework 20+

Slide 46

Slide 46 text

Spring Framework 20+ Keyup.enter Ouve o pressionamento da tecla Enter, pois sinaliza que o usuário terminou de digitar.

Slide 47

Slide 47 text

Spring Framework 20+

Slide 48

Slide 48 text

Spring Framework 20+

Slide 49

Slide 49 text

Spring Framework 20+ Temos vários outros eventos:

Slide 50

Slide 50 text

Spring Framework 20+

Slide 51

Slide 51 text

Spring Framework 20+

Slide 52

Slide 52 text

Spring Framework 20+

Slide 53

Slide 53 text

Spring Framework 20+

Slide 54

Slide 54 text

Spring Framework 20+

Slide 55

Slide 55 text

MINHA DIFICULDADE?

Slide 56

Slide 56 text

Spring Framework 20+

Slide 57

Slide 57 text

E qual será a nossa Demo?

Slide 58

Slide 58 text

Estrutura Back End

Slide 59

Slide 59 text

Spring Framework 20+

Slide 60

Slide 60 text

Estrutura Front End

Slide 61

Slide 61 text

Spring Framework 20+

Slide 62

Slide 62 text

Telas Desenvolvidas

Slide 63

Slide 63 text

Spring Framework 20+

Slide 64

Slide 64 text

Spring Framework 20+

Slide 65

Slide 65 text

Spring Framework 20+

Slide 66

Slide 66 text

Spring Framework 20+

Slide 67

Slide 67 text

Spring Framework 20+

Slide 68

Slide 68 text

Spring Framework 20+

Slide 69

Slide 69 text

Obrigada <3