AngularJS

AngularJS
Desenvolvedor	Google Inc. and community.
Escrito em	JavaScript
Gênero(s)	JavaScript framework
Licença	MIT License
Tamanho	78.4KB produção 479KB desenvolvimento
Página oficial	www.angularjs.org

AngularJS é um framework JavaScript open-source, mantido pela Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, sob o padrão model–view–controller (MVC), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.

A biblioteca lê o HTML que contém tags HTML especiais e então executa a directiva 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

AngularJS é construído sob a ideologia de que programação declarativa deve ser usada para construção de Interfaces de Usuário e componentes de software, enquanto que a programação imperativa é excelente para escrever as regras de negócio. 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 trás 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 Boot Strapper

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

1. Criar um novo injetor
2. Serviço de compilação - O serviço de compilação é igual à compilação em C or C++. Ele passa pelo DOM e localiza todas as directivas, como: "ng-app".
3. Link - A fase de linking anexa todas as directivas ao escopo.

Principais directivas do Angular

Directivas, 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 raíz 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-controller

Especifica um controller JavaScript para aquele HTML em questão.

ng-repeat

Instancia um elemento por item de um array.

ng-show & 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 directiva 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 na model e modifica o HTML na view via um controller. Da mesma forma, qualquer alteração na view é refletida na the model. Isso exclui a necessidade de manipular o DOM e facilita o bootstrapping e rápida prototipação de aplicativos web. Alguns comentaristas dizem que a abordagem de data binding do AngularJS é muito mais simples que o uso de outras bibliotecas, como Ember.js ou Backbone.js.

Chrome plugin

Em Julho de 2012, O time do Angular construiu um plugin para o Google Chrome chamado Batarang, 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.

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 peria preço estimado por megabyte, para aplicações pré-construídas (easy-to-make) para as empresas. Este risco foi 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 na Google, continuou seu desenvolvimento e manteve a framework em conjunto com alguns colegas da Google: Igor Minár e Vojta Jína.

Lançamentos

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

Versões do AngularJS

Data Lançamento	Versão	Codinome
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)
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

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.

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.

Templating

AngularJS usa uma combinação de tags HTML especiais e expressões. Backbone.js usa mecanismos de templates diferentes, como Underscore.js.

Ligações Externas

• Predefinição:Site oficial (em inglês)
• Lista de discussão do Angularjs
• Perfil Google+ do AngularJS
• Batarang - Plugin para Google Chrome