Scribd
Upload
13 views

Angular Structure

Uploaded by

carlos.escalona
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

Angular Structure

Uploaded by

carlos.escalona
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Angular Basic Architecture

Componente
Um componente se encarrega de controlar uma parte da tela chamada View.
Component

Component Class

Component
Metadata

Component Template
Component Hierarchy

AppComponent

Component 1 Component 2 Component 3

Component 4
Services
Normalmente uma Service é uma classe com um propósito limitado e bem definido. A ideia é que
uma Service só faz uma coisa específica e a faz bem.

Get Element

Element
Service Component 1
Edit Element

Edited Element
Services com Interfaces

Service HTML Get Element

Element Component 1
IService
Edit Element

Service LocalStorage Edited Element


Angular Dependency Injection
Root Context
Root
Injector
AppModule Module
Module Module providers
Injector Injector
providers
providers
Component Injector
providers
Component
Communication Between Components

Template Binding Parent Component Template Event

@Input Child Component @Output


Container e Presentational Components
s o u rces
na l Re
Exter rces
s o u
na l Re
Container Exter

Presentational Components
p ut t
In pu
…

…
t …
Ou

…
Filter Listagem Actions
O problema
Smarts Component
Root Component

Component 1 Component 2

Component 3 Component 4 Component 5 Component 6

Component 7
Communication Between Components Using
Services
Context

Shared Service

Component 1 Component 2
Os problemas
Context

Shared Service
Parent Component

Shared Service Child Component

Grand Child Component


Usando services definidos nos componentes
filhos

Container
Inject

Presentational Service Component 1 Component 1


Uma solução melhor
Context Component 1
Service
Implementation1 Container
Component 1
Service
Implementation1

Component 1 Component 2

Injection Presentational IService


Token
Component1

Injection Presentational IService


Token
Component2
Alguns pontos de partida para melhorar ainda
mais
• https://medium.com/madhash/19-things-you-need-to-learn-to-beco
me-an-effective-angular-developer-c0ccfa51222a
• https://dev-academy.com/angular-architecture-best-practices/
• https://www.youtube.com/watch?v=G8zXugcYd7o&list=PLX7eV3JL9sf
mJ6AaZj9eDlAKrJrEul4Vz
• A service should do something specific and do it well
A seguir
AWS Basic services Reactive Programming in Angular

Sinex Basic Architecture

You might also like