Saltar para o conteúdo

AngularJS: diferenças entre revisões

Origem: Wikipédia, a enciclopédia livre.
Explorar interativamente o histórico
← Ver a alteração anteriorVer a alteração posterior →
Conteúdo apagado Conteúdo adicionado
VisualTexto wiki
m ajustando datas, traduzindo nome/parâmetro nas citações, outros ajustes usando script
Linha 19: Linha 19:
== A filosofia do Angular ==
== A filosofia do Angular ==


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]]. <ref>{{citar web|url=https://docs.angularjs.org/guide/introduction |título=What Is Angular? |deadurl=no |acessodata=18 de Maio de 2015}}</ref> 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.
O Angular25 é 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]]. <ref>{{citar web|url=https://docs.angularjs.org/guide/introduction |título=What Is Angular? |deadurl=no |acessodata=18 de Maio de 2015}}</ref> 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 ===
=== Objetivos ===

Revisão das 11h45min de 10 de agosto de 2017

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

O Angular25 é 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:

  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

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]

Histórico de desenvolvimento

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

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

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

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

  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. ↑ «AngularJS 1.0 -> 1.2 Roadmap». blog.angularjs.org. 26 de julho de 2012. Consultado em 27 de abril de 2013 
  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 de Fevereiro de 2013 
  9. ↑ «Javascript Frameworks And Data Binding». Consultado em 13 de Fevereiro de 2013 

Ver Também

Ligações Externas

Obtida de "https://pt.wikipedia.org/w/index.php?title=AngularJS&oldid=49547249"