Loading AI tools
AngularJS é um framework JavaScript código aberto, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.
 |
 | |||||
| Versão final | 1.8.3 (7 de abril de 2022) | ||||
| Escrito em | JavaScript | ||||
| Licença | MIT | ||||
| Estado do desenvolvimento | Descontinuado | ||||
| Tamanho | 144 KB (produção) 1 MB (desenvolvimento) | ||||
| Página oficial | angularjs | ||||
| Repositório | AngularJS no GitHub | ||||
| Cronologia | |||||
|---|---|---|---|---|---|
| |||||
A biblioteca lê o HTML que contém atributos especiais e então executa a diretiva na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. O valor dessas variáveis JavaScript podem ser setadas manualmente, ou via um recurso JSON estático ou dinâmico.
O AngularJS é construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componentes software, enquanto a programação imperativa é excelente para a escrita de regras de negócio.[1] O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views. Como resultado, AngularJS abstrai a manipulação do DOM e melhora os testes.
Objetivos
- Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os testes do código.
- Considera os testes do aplicativo tão importantes quanto seu desenvolvimento. A dificuldade do teste é diretamente afetada pela maneira como o código é estruturado.
- Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento do aplicativo evolua em ambos os lados, de forma paralela, e permite o reuso de código.
- Guia os desenvolvedores através da construção de todo o aplicativo: desde o design de Interface, passando pela escrita das regras de negócio, até chegar aos testes da aplicação.
Angular segue o padrão MVC da engenharia de Software e encoraja o baixo acoplamento entre apresentação, dados e componentes lógicos. Usando injeção de dependência, Angular traz serviços comumente designados ao lado servidor da aplicação, como controllers para os componentes visuais, para o lado cliente da aplicação. Consequentemente, o peso do backend é radicalmente reduzido, levando à aplicações muito mais leves.
AngularJS bootstrapper
Existem 3 fases do AngularJS bootstrapper que ocorrem após o carregamento completo do DOM:
- Criar um novo injetor
- Serviço de compilação: Ele passa pelo DOM e localiza todas as diretivas, como: "ng-app"
- Link – a fase de linking anexa todas as diretivas ao escopo.
Principais diretivas do Angular
Diretivas no AngularJS permitem ao desenvolvedor especificar tags HTML personalizadas e reusáveis, que personalizam o comportamento de certos elementos.
- ng-app – Declara um elemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrão da tag.
- ng-bind – Muda o texto de um elemento HTML automaticamente, de acordo com o seu resultado, vindo das regras de negócio.
- ng-model – É similar ao ng-bind, mas permite ligação direta bidirecional (two-way data binding ) entre a view e o escopo do aplicativo.
- ng-class – Permite atributos de classe serem carregados dinamicamente.
- ng-click – Permite instanciar o evento de click, semelhante ao onclick.
- ng-controller – Especifica um controller JavaScript para aquele HTML em questão.
- ng-repeat – Instancia um elemento por item de um array.
- ng-show e ng-hide – Mostra ou esconde um elemento HTML de acordo com o resultado de uma expressão booleana.
- ng-switch – Instancia um template, em uma lista de escolhas, dependendo do valor obtido pela expressão.
- ng-view – A diretiva base para manipulação de rotas, resolvendo um JSON antes de renderizar os modelos acionados por controladores especificados.
- ng-if – Declaração básica de um 'if' que permite mostrar um elemento se a condição for verdadeira.
Ligação bidirecional de dados (Two-way data binding)
Ligação bidirecional de dados no AngularJS é sua principal característica e reduz a quantidade de códigos escritos para mostrar os dados processados pelo servidor. Templates são renderizados em HTML puro de acordo com os dados contidos em um escopo definido na model. A variável $scope do Angular detecta mudanças no modelo e modifica o HTML na view por meio de um controller. Da mesma forma, qualquer alteração na view é refletida na model. Isso exclui a necessidade de manipular o DOM e facilita o bootstrapping e rápida prototipação de aplicativos web.[2] Alguns comentaristas dizem que a abordagem de data binding do AngularJS é muito mais simples que o uso de outras bibliotecas, como Ember.js[3] ou Backbone.js.[4]
AngularJS foi originalmente desenvolvido em 2009 por Miško Hevery e Adam Abrons como um software por trás de um serviço de armazenamento JSON online, que teria preço estimado por megabyte, para aplicações pré-construídas (easy-to-make) para as empresas.Este empreendimento foi disponibilizado em "GetAngular.com", e teve alguns inscritos, antes de os dois decidirem abandonar a ideia comercial e distribuir Angular como uma framework open-source.
Abrons deixou o projeto, mas Hevery, que trabalha no Google continuou seu desenvolvimento e manteve o framework em conjunto com alguns colegas do Google: Igor Minár e Vojta Jína.
Plugin para Google Chrome
Em Julho de 2012, O time do Angular construiu um plugin para o Google Chrome chamado Batarang,[5] que melhora o debug de aplicativos web construídos com Angular. A extensão permite fácil detecção de gargalos e oferece uma Interface visual para depurar seus aplicativos.[6]
- Data-binding
- O maior contraste entre estas duas bibliotecas é a maneira que models e views são sincronizados. Enquanto AngularJS implementa two way data-binding, o Backbone.js baseia-se fortemente em boilerplate code que harmoniza seus models e views.[7]
- REST
- Backbone.js comunica bem com backends via RESTful. Um uso simples da API REST é também disponível com AngularJS usando o serviço $resource. AngularJS também provê um serviço $http que é mais flexível, connectando servidores remotos através de um objeto
XMLHttpRequestou viaJSONP.[8]
- Templating
- AngularJS usa uma combinação de tags HTML especiais e expressões. Backbone.js usa mecanismos de templates diferentes, como Underscore.js.[7]
- Backbone.js
- Ember.js
- Knockout (framework)
- Meteor (framework)
- Vue.js
- «What Is Angular?». Consultado em 18 de Maio de 2015
- «5 Awesome AngularJS Features». Consultado em 13 de Fevereiro de 2013
- Cédric Beust (29 de dezembro de 2012). «Migrating from Ember.js to AngularJS». Consultado em 1 de junho de 2013
- Joel Rosen (9 de abril de 2013). «Using AngularJS at Localytics». Localytics. Consultado em 1 de junho de 2013
- «Backbonejs vs Angularjs: Demystifying the myths». Consultado em 13 de Fevereiro de 2013
- «Javascript Frameworks And Data Binding». Consultado em 13 de Fevereiro de 2013. Arquivado do original em 20 de maio de 2013
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
