Misturando Angular e ASP.NET MVC / API da Web?

87

Eu vim de usar ASP.NET MVC / API da Web e agora estou começando a usar Angular, mas não estou certo de como misturá-los.

Depois de usar o Angular, os conceitos do lado do servidor MVC ainda fornecem algum valor? Ou devo usar estritamente a API Web apenas para obter dados para as chamadas HTTP angulares?

Qualquer dica que você tenha para um cara da ASP.NET MVC em transição para o Angular seria útil

user2256870
fonte
4
Dependeria, mas eu pensaria "devo usar estritamente a API Web apenas para obter dados para as chamadas HTTP angulares" é a maneira correta de fazer isso.
MikeSmithDev
Aqui está um tutorial para construir um aplicativo Angular com um back-end de API da Web ASP.NET Core -> medium.com/@levifuller/…
Levi Fuller

Respostas:

113

Pure Web API

Eu costumava ser muito hardcore com ASP.NET MVC, mas desde que conheci o Angular, não vejo uma razão para usar qualquer estrutura de geração de conteúdo do lado do servidor. Pure Angular / REST (WebApi) oferece um resultado mais rico e suave. É muito mais rápido e permite que você crie sites que chegam bem perto de aplicativos de desktop, sem nenhum hacks funky.

O Angular tem uma pequena curva de aprendizado, mas assim que sua equipe o dominar, você construirá sites muito melhores em menos tempo. Principalmente, isso tem a ver com o fato de que você não tem mais todos esses problemas de estado (menos).

Por exemplo, imagine um formulário de assistente com qualquer estrutura tradicional do lado do servidor. Cada página deve ser validada e enviada separadamente. Talvez o conteúdo da página dependa dos valores de uma página anterior. Talvez o usuário tenha pressionado o botão Voltar e esteja reenviando um formulário anterior. Onde armazenamos o estado do cliente? Todas essas complicações não existem quando se usa Angular e REST.

Então ... venha para o lado negro ... nós temos cookies.

Pergunta semelhante

nulo
fonte
Eu concordo com relação a: a velocidade e suavidade de desenvolvimento de aplicativos via Angular. Em MVC ou WebForms (ugh), você gasta esse tempo fazendo com que ele cuspa a marcação e, em seguida, tem que fazer algumas passagens fixando o código do cliente nele, o que parece estranho, é trabalhoso e, devido à natureza desconectada, desperdiça um muito tempo fazendo coisas simples.
moribvndvs
3
@Narayana; Isso fornece algum amor SEO.
nulo
5
Porque quando eu renomeio uma propriedade em um modelo específico, não tenho que vasculhar o AngularJS para encontrar "strings mágicas"? Angular é bom, mas em um mundo estritamente seguro de tipo .net, uma integração mais estreita permite que você aproveite a segurança de tipo do lado do servidor.
Sleeper Smith
6
@Sleeper Smith: Já tive essa discussão muitas vezes com pessoas da minha equipe, mas nas convenções de código final , o teste de unidade e a separação de interesses oferecem muito mais do que toda a segurança de tipo do mundo. Eu também adoraria ver JS sendo substituído por algo como C # , mas na realidade esse não é o caso. Tudo o que importa é o resultado que você pode alcançar. Seus clientes provavelmente não se importam com suas preferências de codificação, eles querem um site de aparência legal e de bom desempenho e rápido. O Angular faz esse trabalho.
nulo de
1
Por exemplo, ao usar KnockoutJS, costumava criar um aplicativo ASP.NET MVC normal e cada visualização receberia dados de modelo do controlador MVC. Então, esses dados do servidor seriam serializados em JSON e, a partir daí, KnockoutJS os transformaria em dados observáveis, de modo que eu obteria a vinculação de dados bidirecional. E isso foi ótimo! Mas o que fazemos agora, já que o AngularJS tem seu próprio sistema de roteamento? O que acontece com o roteamento MVC? Nós usamos isso? O que acontece agora com a view "_Layout" e @RenderBody ()?
AlexRebula
43

O AngularJS está mais associado ao paradigma de aplicativo de página única e, como tal, não se beneficia muito das tecnologias do lado do servidor que renderizam marcação. Não há nenhuma razão técnica que impeça você usá-los juntos, mas em um sentido prático, por que você faria isso?

Um SPA recupera os ativos de que precisa (visualizações JS, CSS e HTML) e é executado por conta própria, comunicando-se com os serviços para enviar ou recuperar dados. Portanto, uma tecnologia do lado do servidor ainda é necessária para fornecer esses serviços (bem como outros meios, como autenticação e similares), mas as partes de renderização são amplamente irrelevantes e não particularmente úteis porque são uma duplicação de esforços, exceto pelo MVC no lado do servidor e o Angular faz isso no cliente. Se você estiver usando o Angular, você o deseja no cliente para obter melhores resultados. Você pode criar formulários HTML de postagem no Angular e recuperar visualizações parciais de ações MVC, mas estaria perdendo os melhores e mais fáceis recursos do Angular e tornando sua vida mais difícil.

MVC é bastante flexível e você pode usá-lo para atender chamadas de um aplicativo SPA. No entanto, a WebAPI é mais ajustada e um pouco mais fácil de usar para esses serviços.

Eu escrevi vários aplicativos AngularJS, incluindo alguns que migraram de aplicativos WebForms e MVC pré-existentes, e o aspecto ASP.NET evolui para uma plataforma para entregar o aplicativo AngularJS como o cliente real e para hospedar a camada de aplicativo o cliente se comunica via REST (usando WebAPI). MVC é uma boa estrutura, mas geralmente fica sem trabalho nesse tipo de aplicativo.

O aplicativo ASP.NET torna-se outra camada da infraestrutura, onde suas responsabilidades são limitadas a:

  • Hospede o contêiner de dependência.
  • Conecte as implementações da lógica de negócios ao contêiner.
  • Configure pacotes de recursos para JS e CSS.
  • Hospedar serviços WebAPI.
  • Garanta a segurança, execute registros e diagnósticos.
  • Interface com caches de aplicativos para desempenho.

Outra grande vantagem de um SPA é que ele pode aumentar a largura de banda de sua equipe. Um grupo pode explodir os serviços enquanto o outro configura o aplicativo cliente. Como você pode facilmente criar um stub ou simular serviços REST, pode ter um aplicativo cliente totalmente funcional em serviços simulados e trocá-los pelos reais quando estiverem prontos.

Você precisa investir antecipadamente no Angular, mas compensa muito. Como você já está familiarizado com MVC, tem uma vantagem sobre alguns dos conceitos principais.

moribvndvs
fonte
Ok, então eu quero ir com Angular e ter um back-end .NET para manter minha produtividade com API, Entity Framework, segurança, etc. Minhas páginas ainda precisam de uma configuração / layout master-child do lado do servidor? O que eu uso para isso - WebForms (não - então eu obtenho viewstate), MVC, páginas da Web ASP.NET ou outra coisa?
Sean
1
Tecnicamente, você não precisa de nenhuma página de servidor, página de layout, etc. Apenas HTML direto fará. No entanto, dependendo do tamanho e da complexidade de seu aplicativo, você pode querer dividir seu aplicativo Angular em vários aplicativos distintos por funcionalidade (e você pode vincular de um aplicativo a outro usando um navegador comum ou qualquer outro). Nesse caso, você pode usar uma página de layout para manter as coisas SECAS e consistentes. Além disso, você provavelmente está usando pacotes de recursos para CSS ou scripts, e tendo páginas raiz que são Razor ou o que quer que reúna essas coisas bem.
moribvndvs
1
Tenho usado ASP.NET MVC por três anos em pelo menos 8 grandes projetos e me acostumei com essa estrutura do lado do servidor bem desenvolvida. No entanto, conheço a importância dos SPAs e adoro o Angular, por isso decidi agora ir para os mini SPAs ou aplicações híbridas ... ou "silos de SPA" como os chamou Miguel Castro. Minha pergunta é - e quanto a autorização e autenticação? Eu sei que a ASP.NET MVC facilita essa tarefa significativamente. Como isso é feito sem ASP.NET MVC?
AlexRebula
1
@AlexRebula Eu acho que a questão é mais uma questão de como você quer fazer autenticação no WebApi vs MVC. Normalmente é com cookies (você pode até usar FormsAuth ou cookies de identidade ASP.NET com WebApi) ou cabeçalhos (OAuth, etc.). Ambas as abordagens são totalmente suportadas pela API Web e pelo Angular, mas requer que você escolha a implementação. É difícil dar uma resposta mais precisa sem mais detalhes sobre o que você está fazendo e quais são seus objetivos específicos.
moribvndvs
@HackedByChinese eu entendo. E agora eu acho que seria ótimo se eu tivesse mais tempo para mergulhar mais na API da Web ...
AlexRebula
6

Depende do projeto em que você está trabalhando.

Se o angularJS for algo novo para você, prefiro escolher um pequeno projeto de baixo risco / pressão para começar e garantir que você aprenda a fazer as coisas da maneira certa (vi muitos projetos usando Angularjs errado por causa da pressão, dos prazos ... falta de tempo para aprender de forma adequada, por exemplo, usando JQuery ou acessando o DOM dentro dos controladores, etc ...).

Se o projeto for um campo verde, e você tiver alguma experiência em AngularJS, faz sentido abandonar o ASP.net MVC e no lado do servidor ir para REST / WebAPI puro.

Se for um projeto existente, você pode pegar um subconjunto complexo de funcionalidades e construir essa página como um aplicativo angularJS separado (por exemplo, seu aplicativo é composto de um grande grupo de páginas baseadas em Razor de complexidade simples / média, mas você precisa de um editor avançado / página, que pode ser a peça-alvo a ser construída com AngularJS).

Braulio
fonte
1
Gosto da sua resposta e concordo em quase tudo com o que disse. No entanto, há uma coisa que me preocupa. ASP.NET MVC é uma estrutura da web do lado do servidor muito boa e madura com excelentes recursos integrados, como autenticação e autorização. Você escreveu que alguém poderia abandonar a ASP.NET MVC para ir para REST / WebAPI puro. Agora eu me pergunto: a autenticação e a autorização são tão fáceis de realizar quanto na ASP.NET MVC? Sem mencionar o quão fácil é implementar OAuth para Google etc. Então minha pergunta é, quão fácil é realizar todas essas coisas com REST / WebAPI. Então, eu consideraria ter um mini SPA.
AlexRebula
No nosso caso, configuramos um token em cada solicitação http (http padrão único local para adicioná-lo), use ASP .net MVC / web api AuthorizeAttribute para verificar o token e as permissões, você também pode dentro do método da API da web obter esse token e executar verificação de segurança mais ajustada. Se você precisa do OAuth, também existem bibliotecas no lado angular para ajudá-lo com isso.
Braulio
0

Você pode usar o framework Angular para desenvolvimento de front-end, ou seja, para construir visualizações. Ele fornece a você uma arquitetura robusta e, uma vez que você aprenda, encontrará suas vantagens em relação ao mecanismo de visualização de navalha do Asp.net MVC. Para buscar dados, você deve usar WebAPIs e agora o projeto ASP.Net MVC suporta controladores WebAPI e MVC prontos para uso. Você pode consultar o link abaixo com o desenvolvimento de aplicativos Angular e ASP.Net MVC.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

Existem duas estruturas atualmente disponíveis para desenvolver componentes de UI para aplicativos angulares. Usei esses dois frameworks em um dos projetos angulares que trabalhei.

Material https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

Rinoy
fonte