Web API: Desenvolvendo uma aplica��o MVC com AngularJS

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 {{name}} para imprimir o conte�do ...

Fim do trecho gratuito • continue abaixo

CONTE�DO EXCLUSIVO