ASP
.NET
MVC 5 -
Criando uma aplicação com AngularJS e Web API - I
|
|
 |
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. |
 |
Neste artigo vou iniciar a construção de uma aplicação web ASP .NET MVC 5 usando os recursos 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 na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. O valor dessas variáveis JavaScript 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.
Para saber mais sobre AngularJS e Web API consulte as referências no final do artigo.
Recursos usados:
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;
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 é a seguinte : https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js
Dessa forma temos a estrutura do nosso projeto criado e pronto para que possamos incluir os recursos que precisamos para nossa loja Virtual.
A próxima parte do artigo vamos definir o nosso modelo de dados e criar o banco de dados, as tabelas, as stored procedures que vamos usar.
E esta é a mensagem que dele (Jesus)
ouvimos, e vos anunciamos: que Deus é luz, e não há nele trevas nenhumas.
Se dissermos que temos comunhão com ele, e andarmos em trevas, mentimos, e não
praticamos a verdade.
1 João 1:5,6
|
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Gostou ? 
Compartilhe no Facebook
Compartilhe no Twitter
Referências:
