Um overview sobre o framework Angular

Um overview sobre o framework Angular

Quando decidimos utilizar uma tecnologia em um novo projeto, é natural que uma das primeiras coisa que façamos seja entender o propósito que essa tecnologia tem a oferecer e como podemos ter um maior aproveitamento de suas funcionalidades e características.

Para adquirir este entendimento é necessário ter uma visão geral da arquitetura dessa tecnologia.

Pensando nisso, vamos demonstrar neste post uma visão geral da arquitetura do Angular e, assim, possibilitar aos leitores a oportunidade de entender melhor como funciona este fantástico framework.


Conteúdo ocultar
1 O que é o Angular?
2 A arquitetura do Angular
2.1 NgModules
2.2 Components
2.3 Directives
2.4 Interpolation
2.4.1 Componente
2.4.2 Html
2.5 Dependency injection (DI)
2.6 Angular CLI
3 Considerações Finais
O que é o Angular?
tela roxa com o que e angular escrito logo da angular a direita e da geekhunter embaixo
Angular é um framework para desenvolver aplicações em diversas plataformas, mantido e desenvolvido pela Google.

Ele é uma reescritura completa do antigo angularjs e foi escrito em TypeScript.

Ele vem com um conjunto de bibliotecas poderosas que podemos importar, possibilitando construir aplicações com uma qualidade e produtividade surpreendente.

>>Leitura Recomendada:
Angular 8: Novidades da versão

A arquitetura do Angular
tela roxa coma arquitetura do angular escrito logo da angular a direita e da geekhunter embaixo
A arquitetura do Angular permite organizar a aplicação por módulos através dos NgModules, que fornecem um contexto para os componentes serem compilados.

Uma aplicação sempre tem ao menos um módulo raiz que habilita a inicialização e, normalmente, possui outros módulos de bibliotecas.

Os componentes deliberam as visualizações — que são conglomerados de elementos e funcionalidades de tela — que o Angular modifica de acordo com a lógica e os dados da aplicação.

Esses componentes usam serviços que fornecem funcionalidades específicas e que são indiretamente relacionadas a essas visualizações.

Os provedores de serviços podem ser injetados nos componentes como dependências, tornando seu código modular e reutilizável.

Serviços e componentes são simples classes com decoradores, que definem o tipo e fornecem metadados para informar o Angular como usá-los.

grafico
NgModules
Tem como objetivo declarar e agrupar tudo que criamos no Angular. Existem duas estrutura principais, que são: declarations e o providers.

Declarations é onde declaramos os itens que iremos utilizar nesse módulo, como por exemplo componentes e diretivas, já nos Providers informamos os serviços.


@NgModule({
declarations: [ AppComponent],
providers: [ AuthClientService ],
})



Assim como módulos JavaScript, o NgModules também pode importar funcionalidades de outros NgModules e permitir que suas próprias funcionalidades também sejam exportadas.

Um exemplo claro disso é que para usar o serviço de roteador no seu app basta importar o RouterNgModule.

@NgModule({
declarations: [ AppComponent ],
imports: [ AppRoutingModule ],
})

>>Leitura Recomendada:
React vs Vue vs Angular: qual escolher?

Components
A maior parte do desenvolvimento quando se utiliza o framework Angular é feito nos componentes.

Cada componente define uma classe, que contém dados e lógicas do aplicativo e está sempre associada a um template HTML, onde são definidas as visualizações deste componente.

O decorator @Component() identifica a classe imediatamente como um componente e oferece o modelo e os metadados específicos dele.

Os metadados configuram, por exemplo, como o componente pode ser referenciado no HTML e também quais os serviços devem ser utilizados.

@Component({
selector: ?app-root?,
templateUrl: ?./app.component.html?,
styleUrls: [?./app.component.css?],
providers: [ HeroService ]
})



Directives
As diretivas são como marcadores no elemento DOM que comunicam ao Angular para incluir um comportamento específico.

Existem três tipo de diretivas no Angular, que são: Diretivas de atributos, Diretivas estruturais e Componentes.

Diretivas de atributos: Alteram a aparência ou o comportamento de um elemento, componente ou outra diretiva, como por exemplo, NgClass e NgStyle.

Diretivas estruturais: Modificam o layout adicionando ou removendo elementos do DOM, como por exemplo, NgIf e NgFor.

Componentes: São diretivas com um modelo.


Interpolation
A interpolação é usada para exibir uma propriedade do componente no HTML.

Sua sintaxe são chaves duplas e podemos exibir qualquer tipo de dados, por exemplo, números, datas, arrays e etc…


Componente
export class AppComponent {
propriedade = "Hello!!!"
}

Html

{{propriedade}}


Dependency injection (DI)
O DI é conectado à estrutura Angular e usado em todos os lugares para fornecer aos componentes os serviços (ou outras coisas) que eles precisam.

Componentes consomem serviços. Isto é, você pode injetar um serviço em um componente, dando acesso ao componente para essa classe de serviço.

Para realizar isso, usamos o providedIn, que é uma propriedade do decorador @Injectable.

@Injetable({
providedIn: SomeModule
})

Angular CLI
A CLI Angular é uma ferramenta de interface da linha de comandos que você usa para inicializar, desenvolver e manter aplicativos Angular.

Você pode usar a ferramenta diretamente em um shell de comando ou indiretamente por meio de uma interface do usuário interativa, como o Angular Console.

>>Leitura Recomendada:
Um guia para usar React JS

Considerações Finais
tela roxa com consideracoes finais escrito logo da angular a direita e da geekhunter embaixo
Esse foi o nosso OverView sobre este fantástico FrameWork. É claro que, se tratando de uma visão geral, vários temas importante ficaram de fora deste post.

Alguns exemplos são: Lifecycle Hooks, Pipes, Property binding/Event binding e muitos outros.

Por esse motivo, vou deixar o link da documentação oficial do Angular para vocês poderem se aprofundar ainda mais nesta ferramenta.