AngularJS - AngularJS
Desenvolvedor (s) | |
---|---|
lançamento inicial | 20 de outubro de 2010 |
Versão estável | |
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 |
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:
- Criação de um novo injetor
- Compilação das diretivas que decoram o DOM
- 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-app
e data-ng-app
sã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
Eng-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 $scope
serviç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" />
- explicitamente $ observe um atributo em $ scope .
$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.myVar
for 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 $scope
cada ciclo. Miško Hevery sugere manter menos de 2.000 observadores em qualquer página.
Veja também
Referências
Leitura adicional
- Green, Brad; Seshadri, Shyam (22 de março de 2013). AngularJS (1ª ed.). O'Reilly Media . p. 150. ISBN 978-1449344856.
- Kozlowski, Pawel; Darwin, Peter Bacon (23 de agosto de 2013). Mastering Web Application Development com AngularJS (1ª ed.). Publicação de pacote . p. 372. ISBN 978-1782161820.
- Ruebbelke, Lukas (1 de janeiro de 2015). AngularJS em ação (1ª ed.). Manning Publications . p. 325. ISBN 978-1617291333.