AngularJS

Origem: Wikipédia, a enciclopédia livre.
Ir para: navegação, pesquisa
AngularJS
AngularJS-large
Paradigma Multi-paradigma: com base em protótipo funcional
imperativo
scripts
Última versão 2.1.0 (12 de outubro de 2016)
Criado por Google Inc. e comunidade.
Licença: MIT License
Página oficial angularjs.org
angular.io

AngularJS é um framework JavaScript open-source, 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 tags 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.

Lançamentos[editar | editar código-fonte]

Lançamentos 1.2.x e 1.3.x são as versões estáveis, enquanto que as 1.4.x podem conter mudanças instáveis entre entre seus lançamentos menores (i.e. 1.4.x – 1.4.y).

Versões do AngularJS
Data Lançamento Versão Codinome
24/02/2015 1.3.14 instantaneous-browserification
09/02/2015 1.4.0-beta.4 overlyexplosive-poprocks
09/02/2015 1.3.13 meticulous-rifflesuffle
02/02/2015 1.4.0-beta.3 substance-mimicry
02/02/2015 1.3.12 marius-edelsbrunner-genial
26/01/2015 1.4.0-beta.2 holographic-rooster
26/01/2015 1.3.11 spiffy-manatee
20/01/2015 1.4.0-beta.1 trepidatious-salamander
20/01/2015 1.3.10 heliotropic-sundial
13/01/2015 1.4.0-beta.0 photonic-umbrakinesis
13/01/2015 1.3.9 multidimensional-awareness
19/12/2014 1.3.8 prophetic-narwhal
15/12/2014 1.3.7 leaky-obstruction
15/12/2014 1.2.28 finnish-disembarkation
08/12/2014 1.3.6 robofunky-danceblaster
01/12/2014 1.3.5 cybernetic-mercantilism
24/11/2014 1.3.4 highfalutin-petroglyph
20/11/2014 1.2.27 prime-factorization
17/11/2014 1.3.3 undersea-arithmetic
07/11/2014 1.3.2 cardiovasculatory-magnification
31/10/2014 1.3.1 spectral-lobster
13/10/2014 1.3.0 superluminal-nudge
08/10/2014 1.3.0-rc.5 impossible-choreography
01/10/2014 1.3.0-rc.4 unicorn-hydrafication
01/10/2014 1.2.26 captivating-disinterest
23/09/2014 1.3.0-rc.3 aggressive-pacification
16/09/2014 1.2.25 hypnotic-gesticulation
16/09/2014 1.3.0-rc.2 tactile-perception
09/09/2014 1.3.0-rc.1 backyard-atomicity
09/09/2014 1.2.24 static-levitation
29/08/2014 1.3.0 RC.0 sonic-boltification
22/08/2014 1.2.23 superficial-malady
22/08/2014 1.3.0.beta19 rafter-ascension
12/08/2014 1.3.0.beta18 spontaneous-combustion (unstable)
12/08/2014 1.2.22 finicky-pleasure (stable)
25/07/2014 1.3.0.beta17 turing-autocompletion (unstable)
25/07/2014 1.2.21 wizard-props (stable)
18/07/2014 1.3.0.beta16 pizza-transubstantiation (unstable)
11/07/2014 1.3.0.beta15 unbelievable-advancement (unstable)
11/07/2014 1.2.20 accidental-beautification (stable)
30/06/2014 1.3.0.beta14 harmonious-cacophonies (unstable)
30/06/2014 1.2.19 precognitive-flashbacks (stable)
16/06/2014 1.3.0.beta13 idiosyncratic-numerification (unstable)
13/06/2014 1.3.0.beta12 ephemeral-acceleration (unstable)
13/06/2014 1.2.18 ear-extendability (stable)
06/06/2014 1.3.0.beta11 transclusion-deforestation (unstable)
06/06/2014 1.2.17 quantum-disentanglement (stable)
23/05/2014 1.3.0.beta10 excessive-clarification (unstable)
16/05/2014 1.3.0.beta9 release-naming (unstable)
09/05/2014 1.3.0.beta8 accidental-haiku (unstable)
25/04/2014 1.3.0.beta7 proper-attribution (unstable)
21/04/2014 1.3.0.beta6 expedient-caffeination (unstable)
03/04/2014 1.3.0.beta5 chimeric-glitterfication (unstable)
03/04/2014 1.2.16 badger-enumeration (stable)
28/03/2014 1.3.0.beta4 inconspicuous-deception (unstable)
21/03/2014 1.3.0.beta3 emotional-waffles (unstable)
21/03/2014 1.2.15 beer-underestimating (stable)
14/03/2014 1.3.0.beta2 silent-ventriloquism (unstable)
07/03/2014 1.3.0.beta1 retractable-eyebrow (unstable)
01/03/2014 1.2.14 feisty-cryokinesis (stable)
14/02/2014 1.2.13 romantic-transclusion (stable)
07/02/2014 1.2.12 cauliflower-eradication (stable)
03/02/2014 1.2.11 cryptocurrency-hyperdeflation (stable)
24/01/2014 1.2.10 augmented-serendipity (stable)
15/01/2014 1.2.9 enchanted-articulacy (stable)
10/01/2014 1.2.8 interdimensional-cartography (stable)
03/01/2014 1.2.7 emoji-clairvoyance (stable)
19/12/2013 1.2.6 taco-salsafication (stable)
13/12/2013 1.2.5 singularity-expansion (stable)
06/12/2013 1.2.4 wormhole-blaster (stable)
27/11/2013 1.2.3 unicorn-zapper (stable)
22/11/2013 1.2.2 consciousness-inertia (stable)
14/11/2013 1.2.1 underscore-empathy (stable)
08/11/2013 1.2.0 timely-delivery (stable)
14/10/2013 1.2.0rc3 ferocious-twitch (unstable)
04/09/2013 1.2.0rc2 barehand-atomsplitting (unstable)
22/08/2013 1.0.8 bubble-burst (stable)
13/08/2013 1.2.0rc1 spooky-giraffe (unstable)
22/05/2013 1.0.7 monochromatic-rainbow (stable)
22/05/2013 1.1.5 triangle-squarification (unstable)
04/04/2013 1.0.6 universal-irreversibility (stable)
03/04/2013 1.1.4 quantum-manipulation (unstable)
22/02/2013 1.1.3 radioactive-gargle
20/02/2013 1.0.5 flatulent-propulsion
22/01/2013 1.1.2 tofu-animation
22/01/2013 1.0.4 bewildering-hair
26/11/2012 1.1.1 pathological-kerning
26/11/2012 1.0.3 bouncy-thunder
31/08/2012 1.1.0 increase-gravatas
31/08/2012 1.0.2 debilitating-awesomeness
25/06/2012 1.0.1 thorium-shielding
13/06/2012 1.0.0 temporal-domination (stable)[5]
12/06/2012 1.0.0rc12 regression-extermination
10/06/2012 1.0.0rc11 promise-resolution
23/06/2012 1.0.0rc10 tesseract-giftwrapping
14/05/2012 1.0.0rc9 eggplant-teleportation
06/05/2012 1.0.0rc8 blooming-touch
30/04/2012 1.0.0rc7 rc-generation
20/04/2012 1.0.0rc6 runny-nose
12/04/2012 1.0.0rc5 reality-distortion
05/04/2012 1.0.0rc4 insomnia-induction
29/03/2012 1.0.0rc3 barefoot-telepathy
20/03/2012 1.0.0rc2 silence-absorption
13/05/2012 1.0.0rc1 moiré-vision
17/01/2012 0.10.6 bubblewrap-cape
08/11/2011 0.10.5 steel-fist
22/10/2011 0.10.4 human-torch
13/10/2011 0.10.3 shattering-heartbeat
08/10/2011 0.10.2 sneaky-seagull
09/09/2011 0.10.1 inexorable-juggernaut
02/09/2011 0.10.0 chicken-hands
20/08/2011 0.9.19 canine-psychokinesis
29/07/2011 0.9.18 jiggling-armfat
30/06/2011 0.9.17 vegetable-reanimation
07/06/2011 0.9.16 weather-control
11/04/2011 0.9.15 lethal-stutter
01/04/2011 0.9.14 key-maker
13/03/2011 0.9.13 curdling-stare
03/03/2011 0.9.12 thought-implanter
08/02/2011 0.9.11 snow-maker
26/01/2011 0.9.10 flea-whisperer
13/01/2011 0.9.9 time-shift
23/12/2010 0.9.8 astral-projection
10/12/2010 0.9.7 sonic-scream
06/12/2010 0.9.6 night-vision
25/11/2010 0.9.5 turkey-blast
18/11/2010 0.9.4 total-recall
10/11/2010 0.9.3 cold-resistance
03/11/2010 0.9.2 faunal-mimicry
26/10/2010 0.9.1 repulsion-field
20/10/2010 0.9.0 dragon-breath

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,[6] 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.[7]

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.[8]
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.[9]
Templating
AngularJS usa uma combinação de tags HTML especiais e expressões. Backbone.js usa mecanismos de templates diferentes, como Underscore.js.[8]

Referências[editar | editar código-fonte]

  1. «What Is Angular?». Consultado em 18 Maio 2015 
  2. «5 Awesome AngularJS Features». Consultado em 13 Fevereiro 2013 
  3. Cédric Beust (December 29, 2012). «Migrating from Ember.js to AngularJS». Consultado em 1 de junho de 2013  Verifique data em: |data= (ajuda)
  4. Joel Rosen (April 9, 2013). «Using AngularJS at Localytics». Localytics. Consultado em 1 de junho de 2013  Verifique data em: |data= (ajuda)
  5. «AngularJS 1.0 -> 1.2 Roadmap». blog.angularjs.org. July 26, 2012. Consultado em 27 de abril de 2013  Verifique data em: |data= (ajuda)
  6. Batarang homepage
  7. http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html
  8. a b «Backbonejs vs Angularjs: Demystifying the myths». Consultado em 13 Fevereiro 2013 
  9. «Javascript Frameworks And Data Binding». Consultado em 13 Fevereiro 2013 

Ver Também[editar | editar código-fonte]

Ligações Externas[editar | editar código-fonte]