.NET - Apresentando o AngularJS

O que é o AngularJS ?

Segundo a Wikipédia "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, 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 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.

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

Seus recursos ainda incluem rotas, múltiplas views, AJAX e serviços REST e a criação de componentes personalizados.

A AngularJS 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, AngularJS 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."

Impressionante não é mesmo ?

Mas como isso funciona ou como faço isso funcionar ?

Se você já trabalhou com outras bibliotecas JavaScripts como o jQuery vai pegar o logo o jeitão da coisa. (o AngularJS não substitui o jQuery)

Primeiro você terá que indicar na sua página HTML, na seção <head> a referência a biblioteca AngularJS.
Após isso você pode usar diretivas AngularJS, que nada mais são do que elementos HTML, especificando tags HTML que possuem um comportamento desejado
Ao realizar o parse do seu documento HTML no navegador, o framework irá procurar tais diretivas transformando-as para que tenham o comportamento desejado

A seguir vou relacionar algumas diretivas básicas do AngularJS para ilustrar e para que você tenha uma ideia do que são: (fonte wikipédia)

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

Um documento HTML usando AngularJS é composto basicamente das seguintes partes:

Declaração das diretivas AngularJS
Declaração da biblioteca AngularJS
Utilização de código CSS
Código JavaScript

O importante ressaltar que o foco do framework AngularJS esta no HTML.

Onde conseguir o AngularJS ?

No site http://angularjs.org/ você pode baixar e obter mais informações e exemplos sobre o AngularJS. (A versão atual é a 1.2.6)

Começando pelo começo

Vamos usar o exemplo do site oficial do AngularJS e começar criando um documento básico que usa os recursos da biblioteca.

Abra o bloco de notas ou outro editor de textos de sua preferência e digite ou copie código abaixo:

1.<!doctype html>
2.<html ng-app>
3. <head>
4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
5. </head>
6. <body>
7. <div>
8. <label>Nome:</label>
9. <input type="text" ng-model="SeuNome" placeholder="Informe o seu nome aqui">
10. <hr>
11. <h1>Feliz 2014, {{SeuNome}}!</h1>
12. </div>
13. </body>
14.</html>

Note que estou fazendo uma referência on-line a biblioteca do AngularJs.

Salve o arquivo com o nome: "AngularJS_Exemplo1.html"

A seguir abra o arquivo em um navegador como o IExplorer, FireFox, Chrome, Opera, etc.

Veja o resultado:

Ao carregarmos esse exemplo no navegador e digitarmos qualquer coisa no input, o parágrafo será atualizado de forma automática.

A diretiva ng-app declara o elemento raiz do documento indicando que a partir dai o parse AngularJS irá atuar.

A diretiva ng-model funciona como uma ponte entre a nossa view e o formulário podendo ser usada em inputs do tipo texto, selects, textareas, checkboxes e radio buttons. (O model, seus dados e suas validações ficam disponíveis no escopo da nossa aplicação)

A associação dos dados é feita através da instrução {{ }}, e o nome definido no escopo (no nosso exemplo, o model SeuNome).

Vejamos agora outro exemplo onde mostramos o recurso data binding retirado do manual do desenvolvedor no site oficial.

Abra o bloco de notas e digite ou copie o código abaixo:

.<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>
<body>
<div ng-init="qtde=1;custo=20">
<b>Pedido:</b>
<div>
Quantidade: <input type="number" ng-model="qtde" required >
</div>
<div>
Valor: <input type="number" ng-model="custo" required >
</div>
<div>
<b>Total:</b> {{qtde * custo | currency}}
</div>
</div>
</body>
</html

Salve o arquivo como "AngularJS_Exemplo_2.htm" e a seguir abra-o em um navegador.

Veja o resultado abaixo:

Olhando o código HTML parece apenas um arquivo normal com umas tags estranhas. No jargão do AngularJS este arquivo é chamado de 'template'.

Quando o framework AngularJS inicia o processamento ele realiza o parse e processa estas novas marcações a partir do template usando o seu 'compilador'. O DOM carregado, transformado e renderizado é chamado de 'view'.

As novas marcações que vemos no arquivo HTML são chamadas diretivas. Elas aplicam um comportamento especial aos atributos ou elementos no código HTML.

No exemplo estamos usando o atributo ng-app, o qual é vinculado a um diretiva que inicia automaticamente nossa aplicação.

Temos também a diretiva para o elemento input que adiciona um comportamento extra ao elemento.O atributo required permite validar o texto entrado verificando valores vazios.

A diretiva ng-model armazena/atualiza o valor do campo input a partir de uma variável e exibe o estado da validação do campo input pela adição de classes css.

Abaixo vemos um esquema do fluxo de funcionamento do data-binding no AngularJS:

O segundo tipo de marcação usada são as chaves duplas {{ expressão | filtro }}.

Quando o compilador encontra esta marcação ele irá substituir o conteúdo pelo valor avaliado da marcação. Uma expressão é um template parecido com código javascript que permite ler e escrever variáveis.

Essas variáveis não são globais, da mesma forma que as variáveis possuem um escopo em uma função javascript, o AngularJS fornece um 'scope' para as variáveis acessíveis para as expressões.

Os valores que são armazenados em variáveis no escopo são referidas como o "model" no restante da documentação. No exemplo, a marcação direciona o AngularJS a "tomar os dados que recebemos dos inputs de entrada e multiplicá-los ."

O exemplo acima também contém um "filtro". Um filtro formata o valor de uma expressão para exibição para o usuário. No exemplo acima, ao filtro currency formata um número em uma saída para a moeda.

O importante no exemplo é que o AngularJS fornece ligações dinâmicas. Sempre que os valores de entrada se alterarem o valor das expressões são automaticamente recalculados e o DOM é atualizado com os seus valores. Esse conceito é conhecido como two-way data binding .

Se você deseja se aprofundar no AngularJS sugiro que leia a documentação do desenvolvedor no site oficial.

Em um outro artigo irei mostrar um CRUD básico para evidenciar os recursos do data binding no AngularJS.

Um ótimo vídeo sobre o assunto pode ser visto neste link: screencast.

Mat 7:15 Guardai-vos dos falsos profetas, que vêm a vós disfarçados em ovelhas, mas interiormente são lobos devoradores.

Mat 7:16 Pelos seus frutos os conhecereis. Colhem-se, porventura, uvas dos espinheiros, ou figos dos abrolhos?

Mat 7:17 Assim, toda árvore boa produz bons frutos; porém a árvore má produz frutos maus.

Mat 7:18 Uma árvore boa não pode dar maus frutos; nem uma árvore má dar frutos bons.

Mat 7:19 Toda árvore que não produz bom fruto é cortada e lançada no fogo.

Mat 7:20 Portanto, pelos seus frutos os conhecereis.

Referências:

José Carlos Macoratti