Visão geral da arquitetura do AngularJS

O AngularJS é uma estrutura projetada para estender os recursos do HTML, da linguagem estática simples para uma linguagem mais dinâmica e intuitiva para dados do lado do cliente. AngularJS é 100% JavaScript. Ajuda a escrever um código do lado do cliente mais gerenciado. Dá ao desenvolvedor mais controle de código e poderes de manipulação de dados no próprio cliente. Para conseguir isso, o AngularJS possui um padrão de design adequado. Isso é chamado de padrão MVC. Vamos entender mais sobre isso na próxima seção. Neste tópico, vamos aprender sobre a arquitetura AngularJS .

A arquitetura

O AngularJS é construído sobre o padrão de design do MVC. Os princípios por trás da arquitetura MVC estão muito bem incorporados no AngularJS. É possível que o MVC seja uma arquitetura robusta para muitos idiomas do servidor. O AngularJS também juntou o padrão MVC no lado do cliente.

MVC - Modelo, Visualização, Controlador

Padrão MVC significa padrão do Model View Controller.

  • Modelo

É o nível mais baixo da arquitetura. É responsável por manter e manter os dados do aplicativo. Os dados são mantidos durante todo o ciclo de vida da página e às vezes até entre as páginas. O modelo se atualiza com base nas instruções recebidas do controlador.

  • Visão

Uma vista é a frente do aplicativo. É a camada de apresentação da arquitetura responsável por exibir os dados para o usuário. Ele contém o código completo para as páginas da interface do usuário em qualquer idioma compatível com o navegador, geralmente HTML. A visualização é acionada por seu respectivo controlador. Uma visualização envia solicitações para seu controlador com base na interação do usuário com o aplicativo. O controlador regenera a exibição com base na resposta recebida do servidor.

  • Controlador

Um controlador é o cérebro de processamento por trás da visualização e do modelo. Ele toma as decisões para gerar, regenerar ou destruir a visualização e o modelo. Todas as operações de negócios e lógicas de código são gravadas dentro do controlador. (Alguns desenvolvedores preferem escrever a lógica de negócios no próprio modelo). O controlador também é responsável por enviar solicitações ao servidor e receber uma resposta. Em seguida, atualiza a Visualização e o Modelo com base na resposta. Em resumo, o controlador controla tudo.

A arquitetura MVC pode ser representada graficamente através da imagem abaixo.

O MVC é robusto porque é baseado no princípio de desenvolvimento de software da Separação de Preocupações. Existem vários controladores que operam conjuntos de dados específicos e gerenciam as respectivas visualizações e modelos. A lógica do aplicativo é, portanto, separada da camada da interface do usuário.

MVC no AngularJS

Isso era tudo sobre MVC e seus princípios. Como esses princípios são implementados no AngularJS? Vamos entender.

  • Escopo - Escopo é o modelo que contém os dados do aplicativo. Variáveis ​​de escopo são anexadas ao DOM e as propriedades das variáveis ​​são acessadas por meio de ligações.
  • HTML com ligação de dados - A exibição no AngularJS não é HTML comum. É um HTML ligado a dados. A ligação de dados ajuda a renderizar dados dinâmicos em tags HTML. Dessa forma, o modelo atualiza regularmente o DOM.
  • ngController - A diretiva ngController é responsável pela colaboração entre modelo, exibição e lógica de negócios. A classe do controlador especificada pela diretiva ngController controla o escopo e a exibição.

Visão geral conceitual

Ok, agora entendemos que o AngularJS é construído sobre a arquitetura MVC. Isso é tudo? Não há mais nada em jogo? Claro que sim.

Existem alguns conceitos importantes que precisamos entender para compreender o comportamento dos aplicativos AngularJS. Vamos entendê-los.

  • Modelos

Modelos são os elementos HTML, juntamente com elementos e atributos específicos do AngularJS. A dinamicidade nos aplicativos AngularJS é alcançada combinando o modelo com os dados do modelo e do controlador.

  • Diretivas

Diretivas são atributos ou elementos que representam um componente DOM reutilizável. As diretivas manipulam diretamente o DOM HTML subjacente para renderizar a exibição dinâmica. Isso evita que o desenvolvedor se preocupe com elementos e atributos HTML nativos.

  • Ligação de dados bidirecional

O AngularJS sincroniza automaticamente os dados entre o modelo e a visualização através da ligação de dados. O modelo é considerado como uma única fonte de verdade para os dados do aplicativo. A vista é uma projeção do modelo em todos os momentos. Assim que o modelo muda, a visualização muda e vice-versa. Isso é denominado como ligação bidirecional. Isso é obtido através da compilação ao vivo do modelo no navegador.

  • Encaminhamento

Como os aplicativos AngularJS são aplicativos de página única (SPA), há muito foco no roteamento entre páginas. O AngularJS possui um mecanismo de roteamento robusto que faz a correspondência de URL da lista de rotas especificada no roteador associado ao componente. Isso significa que sempre que um navegador solicita uma URL, um componente filho associado é renderizado em vez de uma página inteira.

  • Serviços

Um controlador é acoplado a uma vista. Isso significa que é uma boa prática escrever apenas esse código dentro do controlador, o que é logicamente útil para sua visualização. A lógica independente da visualização pode ser movida para outro local, para que também possa ser reutilizada por outros controladores.

Aí vêm os Serviços em ação. Os serviços separam a lógica comercial reutilizável da visualização da lógica específica. A lógica específica da visualização reside dentro dos controladores específicos, enquanto a lógica comercial comum é compartilhada por todos os controladores.

Como regra geral, o código para acessar os dados de back-end também é gravado nos serviços.

  • Injeção de dependência

Agora que movemos as lógicas independentes da visualização para um local compartilhado, como controlamos as permissões para acessar os serviços compartilhados? Isso é feito através da injeção de dependência (DI). Injeção de Dependência é um padrão de design de software que lida com a forma como os objetos são criados e como eles se apossam de suas dependências. Tudo no AngularJS, de diretivas a controladores e serviços e praticamente tudo, é conectado através do DI.

Curiosidade da arquitetura AngularJS

AngularJS foi nomeado como AngularJS devido aos colchetes angulares nas tags HTML. O projeto foi projetado para tornar o HTML mais dinâmico e compatível com os dados, e, portanto, os desenvolvedores decidiram nomeá-lo após os colchetes angulares no HTML.

Conclusão - Arquitetura AngularJS

O artigo aborda todos os conceitos importantes da arquitetura AngularJS. Este é um bom começo para entender o funcionamento de vários elementos do seu aplicativo AngularJS. O próximo passo é criar um aplicativo AngularJS multi-controlador totalmente funcional, que também busca dados do back-end. Isso proporcionaria uma boa prática prática sobre os conceitos do AngularJS.

Artigos recomendados

Este é um guia para a arquitetura AngularJS. Aqui discutimos a arquitetura, MVC em angularjs e Visão geral conceitual. Você também pode consultar nossos outros artigos sugeridos para saber mais -

  1. Carreira no AngularJS
  2. Perguntas da entrevista do AngularJS
  3. O que é o Backbone.js?
  4. Software de mineração de dados

Categoria:

Desenvolvimento de software