Saltar para o conteúdo

AngularJS

Origem: Wikipédia, a enciclopédia livre.
 Nota: Não confundir com Angular (plataforma de aplicações).
AngularJS
AngularJS-large
Versão final 1.8.3 (7 de abril de 2022; há 2 anos)
Escrito em JavaScript
Licença MIT
Estado do desenvolvimento Descontinuado
Tamanho 144 KB (produção)
1 MB (desenvolvimento)
Página oficial angularjs.org
Repositório AngularJS no GitHub
Cronologia
Angular

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.

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.

A filosofia do Angular

[editar | editar código-fonte]

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

[editar | editar código-fonte]
  • 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

[editar | editar código-fonte]

Existem 3 fases do AngularJS bootstrapper que ocorrem após o carregamento completo do DOM:

  1. Criar um novo injetor
  2. Serviço de compilação: Ele passa pelo DOM e localiza todas as diretivas, como: "ng-app"
  3. Link – a fase de linking anexa todas as diretivas ao escopo.

Principais diretivas do Angular

[editar | editar código-fonte]

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)

[editar | editar código-fonte]

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]

Histórico de desenvolvimento

[editar | editar código-fonte]

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

[editar | editar código-fonte]

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]

Comparação - Backbone.js

[editar | editar código-fonte]
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 objetoXMLHttpRequest ou via JSONP.[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]

Ver também

[editar | editar código-fonte]

Referências

  1. ↑ «What Is Angular?». Consultado em 18 de Maio de 2015 
  2. ↑ «5 Awesome AngularJS Features». Consultado em 13 de Fevereiro de 2013 
  3. ↑ Cédric Beust (29 de dezembro de 2012). «Migrating from Ember.js to AngularJS». Consultado em 1 de junho de 2013 
  4. ↑ Joel Rosen (9 de abril de 2013). «Using AngularJS at Localytics». Localytics. Consultado em 1 de junho de 2013 
  5. ↑ Batarang homepage
  6. ↑ [1]
  7. ↑ a b «Backbonejs vs Angularjs: Demystifying the myths». Consultado em 13 de Fevereiro de 2013 
  8. ↑ «Javascript Frameworks And Data Binding». Consultado em 13 de Fevereiro de 2013. Arquivado do original em 20 de maio de 2013 

Bibliografia

[editar | editar código-fonte]

Ligações externas

[editar | editar código-fonte]
Obtida de "https://pt.wikipedia.org/w/index.php?title=AngularJS&oldid=67978885"