Neste artigo, eu vou mostrar como criar uma aplicação web usando os recursos da ASP .NET MVC 5, do AngularJS e da Web API.

Vamos criar uma loja virtual onde teremos o login do usuário, o catálogo de produtos, a manutenção dos produtos e as operações básicas de seleção e compra de produtos.

Vou começar apresentando a arquitetura da aplicação e, a seguir, apresentar os conceitos básicos sobre as tecnologias AngularJS e Web API que iremos usar em nosso projeto.

Apresentando a arquitetura do projeto web

O diagrama a seguir dá uma visão geral da arquitetura da nossa aplicação web ASP .NET MVC 5:

No lado do servidor, vamos trabalhar com ASP .NET MVC e Web API (Restfull) e do lado do cliente, vamos trabalhar com AngularJS.

AngularJS – Conceitos

O  “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 a qual esta tag pertence. Também faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. O valor dessas variáveis podem ser definidas 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.

Um dos recursos mais importantes do AngularJS é o DataBindig que reflete a sincronização de dados entre a view e o model. Se a view mudar, o model também muda e vice-versa. Este processo é assegurado pela utilização do objeto $scope, conforme vemos no diagrama a seguir:

O AngularJS pode ser obtido do site https://angularjs.org/. No site, você também vai encontrar recursos de aprendizagem, cursos, a referência para a API e outros recursos.

Para usar o AngularJS, podemos fazer a referência local em nosso projeto via Nuget ou usar a distribuição CDN.

Web API – Conceitos

O protocolo HTTP não precisa ser usado apenas para servir páginas. É também uma plataforma poderosa para a construção de APIs que expõem serviços e dados. O HTTP é simples, flexível e onipresente. Praticamente qualquer plataforma que você pode pensar tem uma biblioteca HTTP, então, os serviços HTTP podem atingir uma ampla gama de clientes, incluindo navegadores, dispositivos móveis e aplicações desktop tradicionais.

Uma Web API pode ser vista como um conjunto de serviços expostos via web com o objetivo de integrar sua aplicação a diversos tipos de clientes que queiram usar os serviços. Esses serviços são usados como requisições HTTP e retornam uma resposta em um formato específico como XML, REST etc.

Essa resposta pode ser uma informação de um repositório de dados, o retorno de uma operação etc. O cliente pode ser uma página web, uma aplicação desktop, uma aplicação mobile etc. Como exemplos de Web API, podemos citar as Web APIs do Facebook e Twitter.

A ASP.NET Web API é um framework para a construção de web APIs em cima do .NET Framework, permitindo que sua aplicação seja acessada por diversos clientes em diversas plataformas.

Recursos usados: Visual Studio Community 2015.

Nota: baixe e use a versão Community 2015 do VS. Ela é grátis e é equivalente a versão Professional.

Criando o projeto no VS Community

Abra o VS Community 2015 e clique em New Project. Selecione a linguagem Visual C# e o template ASP .NET Web Application.

Informe o nome Mvc_LojaVirtual ou outro de sua preferência e clique no botão OK:

A  seguir, selecione o template MVC e marque a opção Web API e clique no botão OK:

Para obter a AngularJS, podemos usar o Nuget para incluir as referências às biblioteca AngularJS.

Isso é feito no menu TOOLS e em Nuget Package Manager e selecione Manage Nuget Package for Solutions.

Na janela do assistente, selecione a guia Online e informe AngularJS para localizar o pacote. Depois selecione o pacote Angularjs e clique no botão Install para instalar a biblioteca no projeto:

Podemos também usar usar a distribuição CDN, que é referenciada diretamente na página ASP .NET.

A URL da distribuição CDN pode ser obtida no site https://angularjs.org/ e é esta aqui.

Dessa forma, temos a estrutura do nosso projeto criada e pronta para que possamos incluir os recursos que precisamos para nossa loja virtual.

Napróxima parte do artigo, vamos definir o nosso modelo de dados e criar o banco de dados, as tabelas e as stored procedures que vamos usar.