AngularJS

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. 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.

Plugin para Google Chrome

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.