Uma introdução ao AngularJS

Quando me deparei com AngularJS algumas semanas atrás, fiquei intrigado no início. No momento em que trabalhei no conjunto de tutoriais disponíveis no site AngularJS, fiquei emocionado por ter encontrado esse framework.

O que é o AngularJS? AngularJS é o garoto (relativamente) novo no bloco de codificação. Para citar o website deles, trata-se de "uma estrutura estrutural para aplicativos da Web dinâmicos", que é especialmente adequada para a criação de aplicativos da Web de uma página, embora certamente não seja limitada a isso.

Desenvolvido em 2009 por Miško Hevery e Adam Abrons - ambos funcionários do Google na época -, é totalmente JavaScript e totalmente do lado do cliente, portanto, em qualquer lugar em que o JavaScript possa ser executado, o AngularJS pode ser executado. Também é pequeno: comprimido e reduzido, tem menos de 29 kb. E é open source sob a licença do MIT. Você pode até usar o logotipo, disponível sob a licença Creative Commons Attribution-ShareAlike 3.0 Unported.

De acordo com a Wikipedia, o objetivo do Angular “é aumentar os aplicativos baseados em navegador com a capacidade de modelo – exibição – controlador (MVC)” e faz exatamente isso, fornecendo uma estrutura de ligação / MVC. Isso é uma ligação de duas vias, lembre-se. Delicioso. Com uma estrutura tão simples quanto {{meus dados}}, você vincula dados à sua página. O serviço $ scope detecta alterações no modelo e modifica expressões HTML na visualização por meio de controladores. Trabalhando na outra direção, as alterações na exibição são refletidas no modelo. Isso elimina a necessidade da grande maioria das manipulações DOM centradas em dados que muitos de nós, inclusive eu, temos como certo quando se trabalha com uma biblioteca como a jQuery.

O Angular é executado imediatamente, sem dependências de biblioteca, embora possa ser estendido com muitos módulos disponíveis e, claro, você pode criar o seu próprio para atender às suas necessidades específicas. Sendo puro JavaScript, também tem o benefício de ser independente do servidor.

Estando acostumado a uma biblioteca poderosa como o jQuery, é fácil misturá-lo para fazer coisas que o Angular já pode fazer. Reconhecendo essa armadilha em potencial, os desenvolvedores têm que dizer: “Se você está lutando para quebrar o hábito, considere remover o jQuery do seu aplicativo. Mesmo. O Angular tem o serviço $ http e diretivas poderosas que tornam quase desnecessário. ”Uma coisa é certa: se você mantiver o Angular, os loops do jQuery e o ir e vir explícito com o servidor estarão ausentes do seu código, já que Angular fornece um método tão sucinto e limpo de alcançar as mesmas coisas.

Diretivas

O Angular usa diretivas para conectar sua ação à página. Diretivas, todas precedidas de ng-, são colocadas em atributos html.

Algumas diretivas comuns que vêm pré-construídas com o Angular são:

ng-app: este é essencialmente o ponto de entrada inicial do Angular para a página. Diz ao Angular onde ele consegue agir. é tudo o que é necessário para definir uma página como um aplicativo Angular.

ng-bind: altera o texto de um elemento para o valor de uma expressão.
irá exibir o valor de 'nome' dentro do intervalo. Quaisquer alterações no 'nome' são refletidas instantaneamente no DOM em qualquer lugar em que a variável é usada.

ng-controller: especifica a classe JavaScript para a ação dada. Os controladores geralmente são mantidos em arquivos .js externos.

ng-repeat: cria as estruturas de loop muito limpas em sua página.

{{item.description}}

sem esforço percorre cada item da coleção.

Eu não os usei ainda, mas eu li que criar diretivas personalizadas pode ser um problema complicado, algo que leva algum tempo para envolver sua cabeça. Angular oferece um vídeo para ajudar a esclarecer o conceito.

Algum código de amostra

Como mencionado anteriormente, a diretiva ng-app no tag define o cenário para o Angular ser executado na página.

Adicionar para a cabeça da página para trazer a própria estrutura Angular.

aponta para o arquivo ou arquivos JavaScript externos que contêm as classes JavaScript que seu aplicativo angular chamará. Uma classe muito simples, por exemplo, pode ser:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"description": "nerf gun"}, {"description": "telefone"},];} 

Passando o ng-controller “ItemListCtrl”, o nome da minha classe JavaScript imaginária, diz ao Angular que código executar:

e a notação com dois colchetes diz ao Angular que expressões avaliar.

ng-repeat é uma diretiva repetidora maravilhosamente sucinta que percorre a coleção atual e executa a ação especificada ou fornece os dados especificados. É tão simples e limpo.

Stuff on my desk:
{{item.description}}

Esta configuração simples exibirá:

Stuff on my desk:coffee potnerf gunphone

Evidentemente, isso não parece tão impressionante, mas a ideia em si é. Marcação de página muito simples e controladores fazem com que comece a usar o Angular, bem, muito simples.

Colocar dados reais no seu aplicativo também é muito simples. Angular gosta de consumir JSON:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  } 

Isso retorna um objeto JSON que pode ser manipulado à vontade no seu aplicativo Angular.

E é construído para testes também!

Um dos princípios básicos do Angular foi que os aplicativos construídos com ele seriam totalmente testáveis. Para testes de ponta a ponta, temos o Angular Scenario Runner para simular as interações do usuário com seu aplicativo. Você alimenta os testes de cenário escritos em JavaScript.

Para depuração no navegador, AngularJS Batarang é uma extensão do Chrome disponível no github.

Recursos

À medida que o AngularJS ganha mais tração, mais recursos se tornarão disponíveis, mas já existem vários sites que fornecem instruções e formas de estender o Angular.

o Site AngularJS em si, é claro que é a sua fonte definitiva. Eles oferecem tutoriais simples e sólidos Presença no Google+.

Há um número de Angular repositórios no GitHub.

Módulos Angulares, oferece uma coleção de módulos enviados pelo usuário, desde serviços do Backbone até a integração do Rails.

Você já usou AngularJS? Como ele se compara a bibliotecas muito maiores, como o jQuery? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem de ângulo via Shutterstock.