Para tirar ainda mais
proveito dessas requisições, os retornos do servidor para o cliente ficaram por
conta de ter somente as informações necessários sem o HTML, fazendo essa renderização
no lado do cliente, com isso a quantidade de código em JavaScript ficou muito
grande, misturando funcionalidades com apresentação. Para resolver situações
como essa o AngularJS veio como uma ótima alternativa, que no decorrer desse artigo
veremos o que é, pra que serve, como utilizar, quais suas principais
caraterísticas suas funcionalidades básicas, como ele interage como o HTML,
como utilizar o padrão MVC em scripts e como consumir um serviço feito em Web API.
JavaScript é uma linguagem de programação interpretada muito poderosa e que vem sendo utilizada cada dia mais em projetos Web. No decorrer dos anos vários plug-ins e bibliotecas surgiram para facilitar a vida dos programadores, como Prototype, Scriptaculous, MooTools e o jQuery, que veio como uma das mais usadas.
Dentre essas várias bibliotecas surgiu o AngularJS, um framework open source criado pelo Google baseado no modelo MVC. Ele funciona como uma extensão do HTML, inserindo atributos dentro de tags. Por exemplo, em uma div, além dos que normalmente já são conhecidos como id, class e style, com o AngularJS tem-se novos atributos, maximizando o poder do HTML.
Esses atributos são chamados de diretivas, que têm como objetivo implementar novos comportamentos de forma declarativa no HTML, manipulando assim o DOM e inserindo, por exemplo, abas e elementos de navegação.
O AngularJS possui uma coleção de componentes que são chamados de módulos.
Por exemplo, fazer requisições Ajax são funcionalidades contidas em um modulo, trabalhar com animações é outro módulo. Esses módulos são separados por arquivos JavaScript, assim, quando precisamos trabalhar com alguma dessas funcionalidades, é necessário somente referenciar o core do AngularJS, mais o modulo a ser utilizado.
Requisitos para usar o AngularJS
Para trabalharmos com AngularJS, primeiro é necessário fazer o download do arquivo JavaScript ou fazer a referência ao mesmo usando um editor de texto qualquer. Para esse artigo será usado o Visual Studio, uma vez que trabalharemos com projetos .NET e que este IDE oferece grande suporte à programação em JavaScript.
Como todo arquivo JavaScript, é necessário fazer a referência ao mesmo em um arquivo HTML dentro da tags do cabeçalho. Mas agora há uma pequena novidade ao se trabalhar com o AngularJS, que é a inserção da propriedade ng-app no elemento <html> , como mostra a linha 2 da Listagem 1.
Listagem 1. Ativando o AngularJS
01<!DOCTYPE html>
02<html lang="en" ng-app>
03 <head>
04 <title></title>
05 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">06</script>
07 </head>
08 <body>
09 </body>
10</html>DataBind
DataBind é um dos melhores recursos do AngularJS, pois ele é responsável por fazer a ligação do elemento HTML a uma variável JavaScript ou um objeto, tudo de forma automática. Como o AngularJS é baseado no padrão MVC, o DataBind é considerado o Model do MVC, que é representando pela propriedade ng-model, como mostra a linha 9 da Listagem 2.
Listagem 2. Conhecendo o ng-Model
01<!DOCTYPE html>
02<html lang="en" ng-app>
03 <head>
04 <title></title>
05 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">06</script>
07 </head>
08 <body>
09 <input type="text" name="" ng-model="name" placeholder="Informe seu nome" value="">
10 <h1>Olá {{ name }}</h1>
11 </body>
12</html>Na linha 9 há um input do tipo text com a propriedade ng-model fazendo a vinculação do input text com uma variável chamada name. Na linha 10 temos o comando {{name}} para imprimir o conteúdo dessa variável e, como o DataBind é dinâmico, ao mesmo tempo que que for inserido um conteúdo na caixa de texto, automaticamente sem nenhuma linda adicional de código a variável será atualizada fazendo o bind instantaneamente.
Além do comando {{nane}} para fazer o bind do conteúdo digitado, também é possível utilizar outros comandos, como na Listagem 3.
Listagem 3. Outras formas de Bind
01<h1 ng-bind="name"></h1>
02<h1 ng-bind-template="{{ name }}"></h1>O ng-bind tem o mesmo efeito da utilização das chaves {{}}, enquanto que o ng-bind-template é simular ao ng-bing, porém poderá ter várias expressões dentro das chaves{{}}.
Controller
O Controller é uma função em JavaScript que contém alguma funcionalidade e possuem alguns parâmetros injetados pelo próprio AngularJS. Imagine um controller que precise fazer uma requisição ao servidor, para isso ele vai receber como parâmetro uma variável $http, contendo todas as funcionalidades para tal requisição, e quem vai ter a responsabilidade de passar esse argumento para a função JavaScript é o próprio AngularJS de forma automática.
Não existe uma regra para criação dos Controllers, pois eles podem estar um único arquivo JavaScript, ou para cada Controller um arquivo diferente. Essa última forma é a mais indicada, pois garante uma maior organização do código de seus controlles, permitindo inserir nas páginas HTML somente o que será utilizado.
Na Listagem 4 temos um exemplo simples da criação de um Controller.
Listagem 4. Criando um Controller
01<!DOCTYPE html>
02<html lang="en" ng-app> ... 
