Por que eu devo ler este artigo:Com a evolução da Web, as requisições Ajax ficaram cada vez mais frequentes, retornando conteúdo já renderizado, ou seja, informações junto com o HTML, como os grids que possuem as tags de table.

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.

Nota: Os endereços para download do arquivo JavaScript, ou para sua referência encontra-se na seção Links.

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 {} 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 {} 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>
  03 <head>
 ... 

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo