10

Resuminho Ilustrado Angular - Entenda de Uma Vez

#Angular
Samuel Costa
Samuel Costa

Angular tem sido meu desafio pessoal nessas últimas semanas. Se você se sente um pouco confuso quanto a estrutura do angular e como ele funciona, talvez esse artigo possa te ajudar.


Imagine que seu projeto seja como “viver em uma casa”. Note, não é a estrutura de uma casa. Nesse caso, a principal estrutura que temos que entender são os módulos. 

Na nossa casa, os módulos são os cômodos da casa, sendo que o app.module.ts é o módulo principal, onde todos os outros módulos ficam “registrados”:

-app.module.ts

>>cozinha.module.ts

>>sala.module.ts

>>quarto.module.ts

>>banheiros.module.ts

>>quartinhoDaBagunca.module.ts


Bem, dentro dos cômodos temos os móveis, que “compõem” o ambiente, sacou? Seria algo como:

-cozinha.module.ts

>>fogao.component.ts

>>geladeira.component.ts

>>armarios.module.ts


Perceba que os componentes são itens que executam tarefas específicas e relacionadas com o local onde estão. O fogão cozinha, a geladeira resfria e nunca, NUNCA vice-versa (pelo menos nesse caso kkk). Assim, no seu projeto, defina os componentes para realizarem tarefas específicas e bem feitas.


Mas mesmo nessa nossa casa chamada angular precisamos fazer serviço doméstico, e ai que entra os services. Services são servicos (!) que os componentes usam para mostrar e receber dados. O seu fogão deve ter a responsabilidade de cozinhar a comida, e não de armazenar o gás. Daí vem outro conceito importante de Angular: Componentes tratam da visualização e entrada de dados, mas são os services que tratam esses dados e se comunicam com seu backend. Aceite isso e seja feliz!


Uma maneira de pensar na estrutura dos services é pensar em uma vassoura: ela pode ser usada para varrer o chão da cozinha, da sala, do quarto… Podemos dizer que ela pode ser “Compartihada”. Logo, uma estrutura interessantes é colocar os services em um módulo, para que seja acessível pelos outros módulos e componentes que necessitem deles:

-shared

>>vassoura.service.ts

>>rodo.service.ts

>>balde.service.ts


De Novo: seus services devem ser específicos, para que possam ser usados e reutilizados por toda a sua casa, ou sua aplicação.


Bem, vou ficando por aqui. Bons estudos e sucesso Dev!


Deixo aqui o link para a documentação: https://angular.io/guide/architecture

E por favor, peço encarecidamente que se notou algum erro, ou quer dar uma sugestão de melhoria, deixe aqui nos comentários. Vamos fortalecer a nossa comunidade!!

4
79

Comentários (4)

0
Juliana Izac

Juliana Izac

10/01/2021 15:02

Muito bom! Obrigada por compartilhar :D

0
Eduardo Manzini

Eduardo Manzini

10/01/2021 14:14

Samuel,

Obrigado pelas dicas.

Estou entrando em contato com ANGULAR e suas dicas foram muito legais.


Boa sorte em sua caminhada!


Eduardo JM

0
Daniel Nascimento

Daniel Nascimento

10/01/2021 14:09

Valeu Samuel!

0
Thiago Guedes

Thiago Guedes

09/01/2021 18:36

Valeu pelas informações, Samuel! Bom final de semena!

Usar programação para otimizar e melhorar os sistemas para todos.

Brasil