O que é AngularJS? ArchiArquitetura, Características e Vantagens

O que é AngularJS?

AngularJS é um framework Model-View-Controller de código aberto escrito em JavaScriptO AngularJS foi um dos frameworks web mais populares da década de 2010 e é usado para desenvolvimento.ping principalmente aplicativos de página única. Essa estrutura foi desenvolvida por um grupo de desenvolvedores de Google si.

Graças ao apoio incondicional de Google Com ideias provenientes de um amplo fórum da comunidade, a estrutura foi mantida atualizada durante toda a sua vida útil. Ela também incorporou as principais tendências de desenvolvimento daquele período, razão pela qual tanto código de produção ainda é executado nela atualmente.

Vale a pena esclarecer logo de início uma questão de terminologia. O AngularJS é amplamente descrito como um framework MVC, o que é um ponto de partida útil. A própria equipe do AngularJS, no entanto, preferia o termo "framework MVC". MVW (Modelo-Visão-QualquerCoisa), porque o ambiente de execução se comporta mais de forma semelhante ao padrão Model-View-ViewModel do que ao MVC clássico. O oficial Documentação do AngularJS chama-lhe uma estrutura para aplicações web dinâmicas. Com isso esclarecido, vejamos como as peças se encaixam.

AngularJS Archiarquitetura

O AngularJS segue a arquitetura MVC. O diagrama do framework MVC é mostrado abaixo:

AngularJS Archidiagrama de arquitetura

Cada uma das três camadas tem uma função clara:

• O Controlador representa a camada que contém a lógica de negócio. Os eventos do usuário acionam as funções armazenadas dentro do seu controlador. Os eventos do usuário fazem parte do controlador.
• As visualizações são usadas para representar a camada de apresentação fornecida aos usuários finais.
• Modelos são usados ​​para representar seus dados. Os dados em seu modelo podem ser tão simples quanto ter declarações primitivas. Por exemplo, se você estiver mantendo um aplicativo de estudante, seu modelo de dados poderá ter apenas uma identificação de estudante e um nome. Ou também pode ser complexo por ter um modelo de dados estruturado. Se você estiver mantendo um pedido de propriedade de carro, poderá ter estruturas para definir o próprio veículo em termos de cilindrada, capacidade de assentos, etc.

Na prática, o controlador raramente envia dados para a visualização manualmente. O AngularJS monitora o modelo e atualiza a visualização automaticamente, e essa sincronização automática é possível graças ao conjunto de recursos descrito a seguir.

Recursos do AngularJS

O AngularJS possui os seguintes recursos principais que o tornam um dos frameworks mais poderosos do mercado:

1. MVC – A estrutura é construída sobre o famoso conceito de MVC (Model-View-Controller). Este é um padrão de design usado em todos os aplicativos da web modernos. Esse padrão é baseado na divisão da camada de lógica de negócios, da camada de dados e da camada de apresentação em seções separadas. A divisão em diferentes seções é feita para que cada uma possa ser gerenciada mais facilmente.
2. Vinculação de modelo de dados – Você não precisa escrever código especial para vincular dados aos controles HTML. Isso pode ser feito pelo AngularJS apenas adicionando alguns trechos de código.
3. Escrevendo menos código – Ao realizar a manipulação do DOM, muitas JavaScript Era necessário escrever código para projetar qualquer aplicação. Mas com o AngularJS, você ficará surpreso com a quantidade reduzida de código necessária para manipular o DOM.
4. Unidade Testes prontos – Os designers da Google Não só desenvolveu o AngularJS, como também criou um framework de testes chamado "Karma", que auxilia na criação de testes unitários para aplicações AngularJS.
5. instruções – Marcadores como ng-app, ng-model e ng-repeat Adicionar comportamento a elementos HTML comuns.

Essas funcionalidades são mais fáceis de entender depois de você tê-las executado, então a próxima seção cria uma página funcional do zero.

Como configurar o AngularJS e criar seu primeiro aplicativo

Ler sobre vinculação de dados é uma coisa, vê-la funcionando é outra bem diferente. O AngularJS não precisa de gerenciador de pacotes, bundler ou compilador, então sua primeira aplicação é um único arquivo HTML que roda diretamente do seu disco rígido.

Passo 1) Adicione a biblioteca AngularJS

Carregue a biblioteca a partir de uma CDN com uma única tag de script. A versão 1.8.3 é a versão final do AngularJS, portanto, fixe sua página nessa versão exata em vez de usar uma versão flutuante.

Passo 2) Marque a raiz do aplicativo com ng-app.

A diretiva ng-app informa ao compilador AngularJS qual parte da página ele controla. Ao colocá-la na tag html, o documento inteiro é entregue ao framework, e o valor que você fornece a ela nomeia o módulo que você está prestes a criar.

Etapa 3) Vincule os dados com o ng-model e uma expressão.

A diretiva `ng-model` vincula um elemento de entrada a uma propriedade no escopo, e uma expressão entre chaves duplas imprime essa mesma propriedade em outro lugar da página. Como a vinculação é bidirecional,ping A caixa atualiza o cabeçalho imediatamente, sem a necessidade de um manipulador de eventos próprio.

Passo 4) Adicione um controlador para a lógica

Um controlador é um simples JavaFunção de script que recebe o objeto `$scope` e define seus valores iniciais. Registrá-la no módulo a torna disponível para a diretiva `ng-controller`.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Passo 5) Execute a página e verifique o resultado.

Salve o arquivo como index.html e abra-o em qualquer navegador. O cabeçalho exibirá "Olá, Mundo!" inicialmente e se reescreverá a cada tecla digitada. Não há servidor web nem etapa de compilação envolvida.

Se nada aparecer, abra o console do navegador e confirme se o script da CDN foi carregado e se o nome do módulo dentro de ng-app corresponde exatamente ao nome passado para angular.module, pois uma incompatibilidade causa falha silenciosamente. Essa pequena página já demonstra os pontos fortes descritos a seguir.

Vantagens do Angular JS

Aqui estão as vantagens do AngularJS:

• Por se tratar de um framework de código aberto, você pode esperar que o número de erros ou problemas seja mínimo.
• O recurso de vinculação bidirecional (B2D) do AngularJS mantém as camadas de dados e de apresentação sincronizadas. Você não precisa escrever código adicional. JavaCódigo de script para manter os dados no seu código HTML e na sua camada de dados sincronizados. O AngularJS fará isso automaticamente para você. Você só precisa especificar qual controle está vinculado a qual parte do seu modelo.
• Roteamento – O AngularJS cuida do roteamento, ou seja, da navegação entre diferentes visualizações. Este é o princípio fundamental das aplicações de página única (SPA), que permitem acessar diferentes funcionalidades da aplicação web com base na interação do usuário, permanecendo sempre na mesma página.
• O AngularJS oferece suporte a testes, tanto Teste de Unidade e Teste de integração.
• Ele estende o HTML fornecendo seus próprios elementos chamados diretivas. Em linhas gerais, as diretivas são marcadores em um elemento DOM (como um atributo, nome do elemento, comentário ou classe CSS) que instruem o compilador HTML do AngularJS a atribuir um comportamento específico a esse elemento DOM. Essas diretivas ajudam a estender a funcionalidade de elementos HTML existentes, conferindo mais poder à sua aplicação web.

Vantagens do AngularJS

Uma visão equilibrada é igualmente importante, por isso as vantagens e desvantagens são apresentadas a seguir.

Desvantagens e limitações do AngularJS

Cada framework oferece algo em troca, e o AngularJS não é exceção. Estas são as limitações mais frequentemente relatadas por equipes que mantêm aplicações AngularJS:

• Sem camada de segurança própria – O AngularJS não oferece autenticação nem autorização, portanto, ambas devem ser implementadas no servidor.
• Dependência total de JavaScript – Se um visitante desativar JavaO script faz com que a página retorne à marcação HTML básica e não seja renderizada.
• Desempenho do ciclo de digestão – As alterações são detectadas através da comparação repetida dos valores monitorados, portanto, páginas com vários milhares de registros podem parecer lentas.
• Uma curva de aprendizado íngreme – Os âmbitos de aplicação, as diretrizes, as fábricas, os serviços e os fornecedores se sobrepõem, e muitas vezes existem várias maneiras de se chegar ao mesmo resultado.
• Visibilidade do mecanismo de pesquisa – As visualizações são montadas no navegador, portanto, é necessário trabalho extra, como pré-renderização, para que os rastreadores indexem as páginas de forma confiável.
• Sem novas atualizações. – Desde 31 de dezembro de 2021, não existem correções oficiais, portanto, uma vulnerabilidade recém-descoberta permanece sem solução, a menos que um fornecedor comercial forneça uma correção.

Esse último ponto leva a maioria das equipes a optar pela estrutura sucessora, que é um produto diferente apesar do nome compartilhado.

AngularJS vs Angular: Qual a diferença?

AngularJS e Angular são frequentemente confundidos devido à semelhança nos nomes, mas são frameworks distintos com linguagens, arquiteturas e versões diferentes. AngularJS refere-se apenas à série 1.x descrita nesta página. Angular refere-se à versão 2 e todas as versões posteriores, uma reescrita completa lançada em 2016 que ainda está em desenvolvimento ativo. Code Não se desloca entre eles sem um trabalho migratório deliberado.

Na prática, isso significa que um controlador AngularJS não pode simplesmente ser inserido em um projeto Angular. A migração implica reescrever cada controlador como um componente, portanto, planeje-a como um trabalho de engenharia real, e não como uma simples atualização. Em resumo, trate o AngularJS como uma habilidade de manutenção e o Angular como a plataforma para novos desenvolvimentos.

Perguntas Frequentes