Ler em inglês

Compartilhar via

AngularJS em projetos ASP.NET MVC: primeiros passos

  • Artigo

Este artigo tem por objetivo apresentar em linhas gerais o framework AngularJS, a partir de um exemplo simples de utilização do mesmo em um projeto ASP.NET MVC.

Introdução

O conceito de Single-Page Application (SPA) vem crescendo muito em popularidade dentro da área de desenvolvimento Web. A opção por este padrão na implementação de novas soluções busca assegurar uma maior responsividade, através do uso de requisições AJAX, de APIs RESTful e da atualização apenas de partes específicas de uma página frente às ações de um usuário.

Diante disso, frameworks foram criados com a intenção de simplificar a construção de aplicações baseadas na ideia de SPA. Uma destas opções é o AngularJS, alternativa open-source mantida pela Google e que desfruta de grande popularidade entre desenvolvedores de diversas plataformas. Comunidades como as de .NET, Java, Node.js e PHP vêm empregando o AngularJS com sucesso, em projetos voltados às mais variadas finalidades.

A meta deste artigo é demonstrar o uso do AngularJS em uma aplicação ASP.NET MVC através de um exemplo básico, a ser implementado na próxima seção.

Implementando a aplicação de exemplo

A fim de detalhar o uso do AngularJS em aplicações MVC será criada uma aplicação para visualização de informações sobre as capitais brasileiras e que emprega os seguintes recursos:

  • O Microsoft Visual Studio Community 2015 como IDE de desenvolvimento;
  • O .NET Framework 4.6;
  • O Microsoft ASP.NET MVC 5;
  • A versão 1.4.5 do framework AngularJS.

A solução descrita neste artigo foi disponibilizada no Technet Gallery, com o download da mesma podendo ser realizado através do link:

https://gallery.technet.microsoft.com/Exemplo-de-utilizao-do-072e1b99

Para o exemplo aqui proposto criar um projeto do tipo “ASP.NET Web Application” chamado “TesteAngularJS”:

Selecionar na sequência o template “MVC”, marcando em “Add folders and core references for” as opções “MVC” e “Web API”:

O próximo passo agora será a criação de uma nova classe que terá por nome “Capital” (este tipo ficará dentro de uma pasta chamada “Models”):

Na listagem especificada a seguir está a definição da classe Capital, a qual contará com propriedades indicando o estado, o nome da capital e a região na qual a mesma está situada:

namespace TesteAngularJS.Models
{
    public class  Capital
    {
        public string  Estado;
        public string  NomeCidade;
        public string  Regiao;
    }
}

Um novo Controller será implementado, através da seleção do template “Web API 2 Controller - Empty”:

Definir “CapitaisController” como nome desta estrutura:


 
Na listagem a seguir está a definição da classe CapitaisController:

  • Por ser um serviço RESTful baseado na tecnologia Web API, este Controller deriva do tipo básico ApiController (namespace System.Web.Http);
  • O método Get será acessado via requisições HTTP, utilizando a classe CapitalRepository para retornar dados das capitais brasileiras.
using System.Collections.Generic;
using System.Web.Http;
using TesteAngularJS.Models;
 
namespace TesteAngularJS.Controllers
{
    public class  CapitaisController : ApiController
    {
        public IEnumerable<Capital> Get()
        {
            return CapitalRepository.ListarCapitais();
        }
    }
}

Serão necessários ainda ajustes na classe WebApiConfig, como indicado na próxima listagem:

  • O método Register será invocado durante a inicialização da aplicação, de forma a proceder com o registro das diferentes rotas/URLs e outras configurações para acesso aos serviços Web API disponíveis;
  • A serialização no formato JSON também será modificada, empregando para isto uma instância do tipo CamelCasePropertyNamesContractResolver (namespace Newtonsoft.Json.Serialization). A intenção com isto é que os dados sigam o padrão adotado na representação de propriedades de objetos em JavaScript (conhecido como "CamelCase"), em que por convenção o primeiro caracter de um identificador corresponde a uma letra em minúsculo.
using System.Web.Http;
using Newtonsoft.Json.Serialization;
 
namespace TesteAngularJS
{
    public static  class WebApiConfig
    {
        public static  void Register(HttpConfiguration config)
        {
            config.Formatters.Remove(
                config.Formatters.XmlFormatter);
 
            config.Formatters.JsonFormatter.SerializerSettings.ContractResolver =
                new CamelCasePropertyNamesContractResolver();
 
            ...
 
        }
    }
}

 
OBSERVAÇÃO: as chamadas ao serviço de consulta de dados de capitais possuirão como endereço base o valor http://site_service/api/capitais (ou simplesmente /api/capitais, em se tratando de requisições geradas dentro do próprio site), seguindo o padrão utilizando na criação de aplicações Web API por meio do Visual Studio.

Um novo arquivo de scripts também deverá ser criado em \Scripts\app:

Informar “cidades-controller.js” como nome deste novo arquivo:

Na listagem a seguir está o código esperado para o arquivo cidades-controller.js (já empregando recursos do AngularJS):

  • Através do objeto “angular” será definido um módulo (via função “module”), com este último correspondendo à estrutura básica a partir da qual as funcionalidades baseadas no AngularJS são implementadas. Para o exemplo abordado neste artigo foi criado um módulo chamado “CidadesApp”;
  • As diferentes ações executadas com o AngularJS dependem da definição de um Controller. Levando em consideração tal característica, o método “controller” foi invocado recebendo como parâmetros o nome do Controller (no caso “CidadesCtrl”), além de uma função na qual está a implementação propriamente dita para este recurso.

Quanto à função que implementa o Controller “CidadesCtrl”, é possível notar:

  • A existência de dois parâmetros de entrada, representados pelas referências “$scope” e “$http”;
  • O objeto $scope permite, basicamente, a passagem de dados da função que define um Controller para os locais nos quais as informações correspondentes serão exibidas (possuindo, de certa forma, um comportamento similar ao objeto ViewBag do ASP.NET MVC). Já $http é utilizado na transmissão de requisições AJAX;
  • Inicialmente foi atribuído o valor 5 à propriedade “qtdeRegioes” no objeto $scope;
  • A chamada à função “get”, a partir do objeto $http, enviará uma requisição ao serviço Web API de consulta a informações de capitais. O resultado desta ação será associado a $scope, por meio da propriedade “capitais”.
angular.module('CidadesApp', []).controller('CidadesCtrl',
    function ($scope, $http) {
 
        $scope.qtdeRegioes = 5;
 
        $http.get('/api/capitais')
             .success(function (data) {
                 $scope.capitais = data;
             });
 
    });

Por fim, na próxima listagem está o código esperado para o arquivo Index.cshtml. Esta View da aplicação MVC foi modificada, de forma que na mesma aconteça a interação com o Controller do AngularJS definido em cidades-controller.js:

  • Uma primeira referência para o framework AngularJS foi adicionada a este arquivo, através da tag “script”. O arquivo cidades-controller.js está sendo carregado logo na sequência;
  • Em seguida há uma div em que foram utilizadas as diretivas “ng-app” e “ng-controller”. Foram indicados através destas instruções o módulo e o Controller especificados em cidades-controller.js, respectivamente;
  • A expressão “{{qtdeRegioes}}” irá imprimir o valor associado à propriedade “qtdeRegioes” no objeto $scope de CidadesCtrl;
  • Já o uso da diretiva “ng-repeat” em conjunto com a tag “tr” (representação de uma linha em uma tabela) permite a iteração por uma coleção de objetos, com a consequente repetição do elemento que faz uso desta construção. Em termos práticos, a expressão “capital in capitais” associada à diretiva “ng-repeat” equivale a um loop foreach em uma View Razor, tendo por função gerar uma visualização de dados no formato de uma tabela;
  • As expressões “{{capital.estado}}”, “{{capital.nomeCidade}}” e “{{capital.regiao}}” serão utilizadas na exibição de informações de cada capital (estado, nome e região, respectivamente).
<div class="jumbotron">
    <h1>ASP.NET MVC x AngularJS</h1>
    <p class="lead">Exemplo de utilização do framework AngularJS
    em uma aplicação ASP.NET MVC.</p>
</div>
 
<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
 
<script type="text/javascript" src="~/Scripts/app/cidades-controller.js"></script>
 
<div ng-app="CidadesApp" ng-controller="CidadesCtrl">
 
    <p>
        <b>Qtde. Regiões:</b> {{qtdeRegioes}}
    </p>
 
    <div class="table-responsive">
        <table class="table table-hover">
            <tr>
                <th>Estado</th>
                <th>Capital</th>
                <th>Região</th>
            </tr>
            <tr ng-repeat="capital in capitais">
                <td>{{capital.estado}}</td>
                <td>{{capital.nomeCidade}}</td>
                <td>{{capital.regiao}}</td>
            </tr>
        </table>
    </div>
     
</div>

Testes

Será necessário agora executar a aplicação TesteAngularJS a partir do Visual Studio. Na imagem a seguir está a tela inicial desta aplicação, na qual é possível visualizar os valores que foram processados via AngularJS:

Conclusão

A ideia com este artigo foi apresentar em termos gerais o uso do AngularJS em aplicações ASP.NET MVC, a partir de um exemplo simples envolvendo o consumo de um serviço RESTful (este último implementado com base na tecnologia Web API). O potencial oferecido por este framework vai certamente muito além do que foi descrito aqui, fato este que deve servir de estímulo para que profissionais interessados busquem maiores conhecimentos em AngularJS e nos conceitos de SPA (Single-Page Applications).

Referências

AngularJS
https://angularjs.org/

ASP.NET MVC
http://www.asp.net/mvc

AngularJS Portal
http://social.technet.microsoft.com/wiki/contents/articles/28540.wiki-angularjs-portal/edit.aspx