AngularJS - AngularJS

AngularJS
AngularJS logo.svg
Desenvolvedor (s) Google
lançamento inicial 20 de outubro de 2010 ; 10 anos atrás ( 2010-10-20 )
Versão estável
1.8.2  Edite isso no Wikidata / 21 de outubro de 2020 ; 10 meses atrás ( 21 de outubro de 2020 )
Repositório Repositório AngularJS
Escrito em JavaScript
Plataforma Motor JavaScript
Tamanho 167 kB de produção
1,2 MB de desenvolvimento
Modelo Framework da web
Licença Licença MIT
Local na rede Internet angularjs .org Edite isso no Wikidata

AngularJS é uma estrutura da web front-end de código aberto baseada em JavaScript para o desenvolvimento de aplicativos de página única . É mantido principalmente pelo Google e uma comunidade de indivíduos e empresas. Tem como objetivo simplificar o desenvolvimento e o teste de tais aplicativos, fornecendo uma estrutura para arquiteturas modelo-visão-controlador do lado do cliente (MVC) e modelo-visão-modelo de visão (MVVM), junto com componentes comumente usados ​​em aplicativos web e progressivos aplicativos da web .

AngularJS é usado como front-end da pilha MEAN , consistindo em banco de dados MongoDB , estrutura de servidor de aplicativos da web Express.js , o próprio AngularJS (ou Angular ) e ambiente de tempo de execução de servidor Node.js.

A estrutura do AngularJS está em suporte de longo prazo ("LTS") até 31 de dezembro de 2021. Após essa data, o Google não atualizará mais o AngularJS para corrigir problemas de segurança, compatibilidade do navegador ou jQuery . A equipe do Angular recomenda a atualização para o Angular (v2 +) como o melhor caminho a seguir, mas eles também fornecem algumas outras opções.

Visão geral

A estrutura AngularJS funciona primeiro lendo a página Hypertext Markup Language (HTML), que possui atributos HTML personalizados adicionais incorporados a ela. Angular interpreta esses atributos como diretivas para vincular partes de entrada ou saída da página a um modelo representado por variáveis JavaScript padrão . Os valores dessas variáveis ​​JavaScript podem ser definidos manualmente no código ou recuperados de recursos JSON estáticos ou dinâmicos .

O AngularJS é baseado na crença de que a programação declarativa deve ser usada para criar interfaces de usuário e conectar componentes de software , enquanto a programação imperativa é mais adequada para definir a lógica de negócios de um aplicativo . A estrutura se adapta e estende o HTML tradicional para apresentar conteúdo dinâmico por meio de vinculação de dados bidirecional que permite a sincronização automática de modelos e visualizações. Como resultado, o AngularJS não enfatiza a manipulação explícita do Document Object Model (DOM) com o objetivo de melhorar a testabilidade e o desempenho.

Os objetivos de design do AngularJS incluem:

  • para desacoplar a manipulação DOM da lógica do aplicativo. A dificuldade disso é drasticamente afetada pela maneira como o código é estruturado.
  • para separar o lado do cliente de um aplicativo do lado do servidor. Isso permite que o trabalho de desenvolvimento avance em paralelo e permite a reutilização de ambos os lados.
  • para fornecer estrutura para a jornada de construção de um aplicativo: desde o design da IU, passando pela escrita da lógica de negócios, até o teste.

AngularJS implementa o padrão MVC para separar apresentação, dados e componentes lógicos. Usando injeção de dependência , o Angular traz serviços tradicionalmente do lado do servidor , como controladores dependentes de visualização, para aplicativos da Web do lado do cliente. Conseqüentemente, grande parte da carga no servidor pode ser reduzida.

Alcance

O AngularJS usa o termo "escopo" de maneira semelhante aos fundamentos da ciência da computação.

O escopo em ciência da computação descreve quando no programa uma determinada ligação é válida. A especificação ECMA-262 define o escopo como: um ambiente léxico no qual um objeto Function é executado em scripts da Web do lado do cliente; semelhante a como o escopo é definido no cálculo lambda .

Como parte da arquitetura "MVC", o escopo forma o "Modelo", e todas as variáveis ​​definidas no escopo podem ser acessadas tanto pela "Visualização" quanto pelo "Controlador". O osciloscópio se comporta como uma cola e liga a "Visualização" e o "Controlador".

Bootstrap

A tarefa realizada pelo bootstrapper AngularJS ocorre em três fases após o DOM ter sido carregado:

  1. Criação de um novo injetor
  2. Compilação das diretivas que decoram o DOM
  3. Vinculação de todas as diretivas ao escopo

As diretivas AngularJS permitem que o desenvolvedor especifique elementos e atributos do tipo HTML personalizados e reutilizáveis ​​que definem as ligações de dados e o comportamento dos componentes de apresentação. Algumas das diretivas mais comumente usadas são:

ng-animate
Um módulo fornece suporte para JavaScript, transição CSS3 e ganchos de animação de quadro-chave CSS3 dentro do núcleo existente e diretivas personalizadas.

Como os ng-*atributos não são válidos nas especificações HTML, data-ng-*também podem ser usados ​​como prefixo. Por exemplo, ng-appe data-ng-appsão válidos em AngularJS.

ng-app
Declara o elemento raiz de um aplicativo AngularJS, sob o qual as diretivas podem ser usadas para declarar ligações e definir o comportamento.
ng-aria
Um módulo para suporte de acessibilidade de atributos ARIA comuns .
ng-bind
Define o texto de um elemento DOM com o valor de uma expressão. Por exemplo, <span ng-bind="name"></span>exibe o valor de 'nome' dentro do elemento span. Qualquer alteração na variável 'nome' no escopo do aplicativo reflete instantaneamente no DOM.
ng-class
Aplicar condicionalmente uma classe, dependendo do valor de uma expressão booleana.
ng-controller
Especifica uma classe de controlador JavaScript que avalia expressões HTML.
ng-if
Diretriz de instrução if básica que instancia o seguinte elemento se as condições forem verdadeiras. Quando a condição é falsa, o elemento é removido do DOM. Quando verdadeiro, um clone do elemento compilado é reinserido.
ng-init
Chamado uma vez quando o elemento é inicializado.
ng-model
Semelhante a ng-bind, mas estabelece uma ligação de dados bidirecional entre a visualização e o escopo.
ng-model-options
Fornece ajuste de como as atualizações do modelo são feitas.
ng-repeat
Instancie um elemento uma vez por item de uma coleção.
ng-show E ng-hide
Mostra ou oculta condicionalmente um elemento, dependendo do valor de uma expressão booleana. Mostrar e ocultar é obtido definindo o estilo de exibição CSS.
ng-switch
Instancie condicionalmente um modelo de um conjunto de opções, dependendo do valor de uma expressão de seleção.
ng-view
A diretiva de base responsável por manipular rotas que resolvem JSON antes de renderizar modelos orientados por controladores especificados.

Ligação de dados bidirecional

A vinculação de dados bidirecional do AngularJS é seu recurso mais notável, aliviando em grande parte o back-end do servidor das responsabilidades de modelagem. Em vez disso, os modelos são renderizados em HTML simples de acordo com os dados contidos em um escopo definido no modelo. O $scopeserviço no Angular detecta mudanças na seção do modelo e modifica as expressões HTML na visualização por meio de um controlador. Da mesma forma, quaisquer alterações na vista são refletidas no modelo. Isso contorna a necessidade de manipular ativamente o DOM e incentiva a inicialização e a prototipagem rápida de aplicativos da web. O AngularJS detecta mudanças nos modelos comparando os valores atuais com os valores armazenados anteriormente em um processo de verificação suja, ao contrário do Ember.js e do Backbone.js que acionam ouvintes quando os valores do modelo são alterados.

$watch
é um método angular usado para verificação de sujeira. Qualquer variável ou expressão atribuída em $ scope configura automaticamente uma $ watchExpression em angular. Assim, atribuir uma variável a $ scope ou usar diretivas como ng-if, ng-show, ng-repeat etc. todos criam relógios no escopo angular automaticamente. Angular mantém uma matriz simples de observadores $$ nos objetos $ scope
Diferentes maneiras de definir um observador em AngularJS.
  • explicitamente $ observe um atributo em $ scope .
    $scope.$watch('person.username', validateUnique);
  • coloque uma interpolação em seu modelo (um observador será criado para você no $ escopo atual).
  • peça uma diretiva como ng-model para definir o observador para você.
    <input ng-model="person.username" />
$digest
é o método angular que é invocado internamente por angularjs em intervalos frequentes. No método $ digest , o angular itera sobre todos os relógios $ em seu escopo / escopos filho.
$apply
é um método angular que invoca $ digest internamente . Este método é usado quando você quer dizer ao angular para iniciar manualmente a verificação suja (executar todos os relógios $ )
$destroy
é um método e um evento em angularjs. O método $ destroy () remove um escopo e todos os seus filhos da verificação suja. O evento $ destroy é chamado pelo angular sempre que um $ scope ou $ controller é destruído.

História de desenvolvimento

O AngularJS foi originalmente desenvolvido em 2009 por Miško Hevery na Brat Tech LLC como o software por trás de um serviço de armazenamento JSON online , que teria o preço de um megabyte, para aplicativos fáceis de fazer para a empresa. Este empreendimento estava localizado no domínio web "GetAngular.com", e tinha alguns assinantes, antes que os dois decidissem abandonar a ideia de negócio e lançar o Angular como uma biblioteca de código aberto.

A versão 1.6 adicionou muitos dos conceitos do Angular ao AngularJS, incluindo o conceito de uma arquitetura de aplicativo baseada em componentes. Este lançamento, entre outros, removeu o Sandbox, que muitos desenvolvedores acreditavam fornecer segurança adicional, apesar das inúmeras vulnerabilidades descobertas que contornavam o sandbox. A versão estável atual (em março de 2020) do AngularJS é 1.7.9

Em janeiro de 2018, foi anunciado um cronograma para a eliminação progressiva do AngularJS: após o lançamento do 1.7.0, o desenvolvimento ativo do AngularJS continuará até 30 de junho de 2018. Posteriormente, o 1.7 será apoiado até 31 de dezembro de 2021 como suporte de longo prazo .

Suporte a navegador legado

As versões 1.3 e posterior do AngularJS não oferecem suporte ao Internet Explorer 8 ou anterior. Embora o AngularJS 1.2 suporte o IE8, sua equipe não.

Angular e AngularDart

As versões subsequentes do AngularJS são simplesmente chamadas de Angular . Angular é uma reescrita incompatível do AngularJS baseada em TypeScript . O Angular 4 foi anunciado em 13 de dezembro de 2016, pulando 3 para evitar confusão devido ao desalinhamento da versão do pacote do roteador que já era distribuído como v3.3.0.

AngularDart funciona no Dart , que é uma linguagem de programação de herança única orientada a objetos , definida por classe , usando sintaxe de estilo C , que é diferente de Angular JS (que usa JavaScript ) e Angular 2 / Angular 4 (que usa TypeScript ). O Angular 4 foi lançado em março de 2017, com a versão do framework alinhada com o número da versão do roteador usado. O Angular 5 foi lançado em 1 de novembro de 2017. As principais melhorias no Angular 5 incluem suporte para aplicativos da Web progressivos, um otimizador de construção e melhorias relacionadas ao Material Design. O Angular 6 foi lançado em 3 de maio de 2018, o Angular 7 foi lançado em 18 de outubro de 2018 e o Angular 8 foi lançado em 28 de maio de 2019. O Angular segue os padrões de versão semântica, com cada número de versão principal indicando alterações potencialmente importantes. A Angular se comprometeu a fornecer 6 meses de suporte ativo para cada versão principal, seguidos por 12 meses de suporte de longo prazo. Os lançamentos principais são semestrais, com 1 a 3 lançamentos menores para cada lançamento principal.

Angular Universal

Um aplicativo Angular normal é executado no navegador, enquanto o Angular Universal gera páginas de aplicativos estáticos no servidor por meio da renderização do lado do servidor (SSR).

Bibliotecas

Material AngularJS

AngularJS Material é uma biblioteca de componentes de IU que implementa Material Design em AngularJS. A biblioteca fornece um conjunto de componentes de IU reutilizáveis, bem testados e acessíveis .

Extensão do Chrome

Em julho de 2012, a equipe do Angular construiu uma extensão para o navegador Google Chrome chamada Batarang, que melhora a experiência de depuração para aplicativos da web criados com o Angular. A extensão visa permitir a fácil detecção de gargalos de desempenho e oferece uma GUI para aplicativos de depuração. Por um tempo durante o final de 2014 e início de 2015, a extensão não era compatível com versões recentes (após v1.2.x) do Angular. A última atualização feita nesta extensão foi em 4 de abril de 2017.

atuação

AngularJS estabelece o paradigma de um ciclo digest . Este ciclo pode ser considerado um loop, durante o qual o AngularJS verifica se há alguma alteração em todas as variáveis ​​observadas por todos os $scopes. Se $scope.myVarfor definido em um controlador e essa variável for marcada para observação, o Angular irá monitorar as mudanças em myVar em cada iteração do loop.

Essa abordagem leva potencialmente a uma renderização lenta quando o AngularJS verifica muitas variáveis ​​em $scopecada ciclo. Miško Hevery sugere manter menos de 2.000 observadores em qualquer página.

Veja também

Referências

Leitura adicional

links externos