19/11/2015 AngularJS – Wikipédia, a enciclopédia livre

https://pt.wikipedia.org/wiki/AngularJS 1/10

AngularJS

Paradigma Multi­paradigma: com base emprotótipo funcionalimperativoscripts

Últimaversão

1.3.10 (25 de Janeiro de 2015)

Criado por Google Inc. e comunidade.

Licença: MIT License

Páginaoficial

angularjs.org(http://www.angularjs.org/)

Índice

1 A filosofia do Angular

2 AngularJS Boot Strapper

3 Principais diretivas do Angular

4 Ligação bidirecional de dados (Two­way data binding)

5 Chrome plugin

6 Histórico de Desenvolvimento

6.1 Lançamentos

7 Comparação ­ Backbone.js

8 Referências

9 Ver Também

10 Ligações Externas

AngularJSOrigem: Wikipédia, a enciclopédia livre.

AngularJS é um framework JavaScript open­source, mantido peloGoogle, que auxilia na execução de single­page applications. Seuobjetivo é aumentar aplicativos que podem ser acessados por umnavegador web, sob o padrão model–view–controller (MVC), em umesforço para facilitar tanto o desenvolvimento quanto o teste dosaplicativos.

A biblioteca lê o HTML que contém tags especiais e então executa adiretiva na qual esta tag pertence, e faz a ligação entre a apresentação eseu modelo, representado por variáveis JavaScript comuns. O valordessas variáveis JavaScript podem ser setadas manualmente, ou via umrecurso JSON estático ou dinâmico.

A filosofia do Angular

O AngularJS é construído sob a crença de que a programaçãodeclarativa é melhor do que a programaçãoimperativa quando se trata da construção deinterfaces com o usuário e da conexão decomponentes software, enquanto a programaçãoimperativa é excelente para a escrita de regrasde negócio. [1] O framework adapta e estende oHTML tradicional para uma melhor experiênciacom conteúdo dinâmico, com a ligação direta ebidirecional dos dados (two­way data­binding)que permite sincronização automática demodels e views. Como resultado, AngularJSabstrai a manipulação do DOM e melhora ostestes.

Objetivos:

Abstrair a manipulação do DOM dalógica do aplicativo. Isto melhora ostestes do código.Considera os testes do aplicativo tãoimportantes quanto seu desenvolvimento.A dificuldade do teste é diretamenteafetada pela maneira como o código éestruturado.Abstrai o acoplamento entre o ladocliente e o lado servidor da aplicação. Istopermite que o desenvolvimento doaplicativo evolua em ambos os lados, deforma paralela, e permite o reuso decódigo.Guia os desenvolvedores através da construção de todo o aplicativo: desde o design de Interface, passando pelaescrita 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 ecomponentes lógicos. Usando injeção de dependência, Angular trás serviços comumente designados ao lado servidorda aplicação, como controllers para os componentes visuais, para o lado cliente da aplicação. Consequentemente, o

19/11/2015 AngularJS – Wikipédia, a enciclopédia livre

https://pt.wikipedia.org/wiki/AngularJS 2/10

peso do backend é radicalmente reduzido, levando à aplicações muito mais leves.

AngularJS Boot Strapper

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

1.  Criar um novo injetor2.  Serviço de compilação ­ O serviço de compilação é igual à compilação em C ou C++. 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, quepersonalizam o comportamento de certos elementos.

ng­appDeclara um elemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrãoda tag.

ng­bindMuda o texto de um elemento HTML automaticamente, de acordo com o seu resultado, vindo das regras denegócio.

ng­modelÉ similar ao ng­bind, mas permite ligação direta bidirecional (two­way data binding ) entre a view e o escopodo aplicativo.

ng­classPermite atributos de classe serem carregados dinamicamente.

ng­controllerEspecifica um controller JavaScript para aquele HTML em questão.

ng­repeatInstancia um elemento por item de um array.

ng­show & ng­hideMostra ou esconde um elemento HTML de acordo com o resultado de uma expressão booleana.

ng­switchInstancia um template, em uma lista de escolhas, dependendo do valor obtido pela expressão.

ng­viewA diretiva base para manipulação de rotas, resolvendo um JSON antes de renderizar os modelos acionados porcontroladores especificados.

ng­ifDeclaraçã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 escritospara mostrar os dados processados pelo servidor. Templates são renderizados em HTML puro de acordo com osdados contidos em um escopo definido na model. A variável $scope do Angular detecta mudanças no modelo emodifica o HTML na view por meio de um controller. Da mesma forma, qualquer alteração na view é refletida namodel. Isso exclui a necessidade de manipular o DOM e facilita o bootstrapping e rápida prototipação de aplicativosweb.[2] Alguns comentaristas dizem que a abordagem de data binding do AngularJS é muito mais simples que o usode outras bibliotecas, como Ember.js[3] ou Backbone.js.[4]

Chrome plugin

Em Julho de 2012, O time do Angular construiu um plugin para o Google Chrome chamado Batarang,[5] quemelhora o debug de aplicativos web construídos com Angular. A extensão permite fácil detecção de gargalos eoferece uma Interface visual para depurar seus aplicativos.[6]

19/11/2015 AngularJS – Wikipédia, a enciclopédia livre

https://pt.wikipedia.org/wiki/AngularJS 3/10

Histórico de Desenvolvimento

AngularJS foi originalmente desenvolvido em 2009 por Miško Hevery e Adam Abrons como um software por trás deum 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 algunsinscritos, 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 oframework 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 entreentre seus lançamentos menores (i.e. 1.4.x – 1.4.y).

19/11/2015 AngularJS – Wikipédia, a enciclopédia livre

https://pt.wikipedia.org/wiki/AngularJS 9/10

29/03/2012 1.0.0rc3 barefoot­telepathy20/03/2012 1.0.0rc2 silence­absorption

13/05/2012 1.0.0rc1 moiré­vision17/01/2012 0.10.6 bubblewrap­cape08/11/2011 0.10.5 steel­fist22/10/2011 0.10.4 human­torch13/10/2011 0.10.3 shattering­heartbeat08/10/2011 0.10.2 sneaky­seagull09/09/2011 0.10.1 inexorable­juggernaut02/09/2011 0.10.0 chicken­hands20/08/2011 0.9.19 canine­psychokinesis29/07/2011 0.9.18 jiggling­armfat30/06/2011 0.9.17 vegetable­reanimation07/06/2011 0.9.16 weather­control11/04/2011 0.9.15 lethal­stutter01/04/2011 0.9.14 key­maker13/03/2011 0.9.13 curdling­stare03/03/2011 0.9.12 thought­implanter08/02/2011 0.9.11 snow­maker26/01/2011 0.9.10 flea­whisperer13/01/2011 0.9.9 time­shift23/12/2010 0.9.8 astral­projection10/12/2010 0.9.7 sonic­scream06/12/2010 0.9.6 night­vision25/11/2010 0.9.5 turkey­blast18/11/2010 0.9.4 total­recall10/11/2010 0.9.3 cold­resistance03/11/2010 0.9.2 faunal­mimicry26/10/2010 0.9.1 repulsion­field20/10/2010 0.9.0 dragon­breath

Comparação ­ Backbone.js

Data­bindingO maior contraste entre estas duas bibliotecas é a maneira que models e views são sincronizados. EnquantoAngularJS implementa two way data­binding, o Backbone.js baseia­se fortemente em boilerplate code queharmoniza seus models e views.[8]

RESTBackbone.js comunica bem com backends via RESTful. Um uso simples da API REST é também disponívelcom 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]

TemplatingAngularJS usa uma combinação de tags HTML especiais e expressões. Backbone.js usa mecanismos detemplates diferentes, como Underscore.js.[8]