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
