Misturando API Angular e ASP.NET MVC / Web?

Eu venho usando o ASP.NET MVC / Web API e agora estou começando a usar o Angular, mas não estou claro sobre a maneira correta de combiná-los.

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

Existe talvez um ponto de partida mais simples que eu deva usar se o modelo do VS estiver adicionando muitas coisas de que não preciso?

Eu gosto da ideia de uma divisão estrita do lado do servidor = dados puros e do cliente = processamento HTML puro.

javascript mvc asp.net-mvc

— punkouter
fonte

relacionados: os front-ends de sites devem ser renderizados no lado do cliente ou no servidor?

— Gnat #

Respostas:

A maneira mais fácil de pensar sobre isso é que o servidor atende a um estado. A Angular pode gerenciar a coleta das atualizações para esse estado e enviá-las para uma Web / API no servidor. Se você deseja acessar mais aplicativos de página única, o código do servidor seria apenas o estado inicial do seu aplicativo.

A API da Web é um excelente ponto de partida para inserir seus dados no aplicativo. Eventualmente, você atualizará os roteadores padrão para atender aos requisitos de design de seus ambientes e, se desejar, para ficar totalmente cheio.

Existem algumas bibliotecas que o ASP4 incluiu por padrão e essas também foram incluídas nos modelos MVC4. Realmente, existem muitas coisas incluídas na página que não são necessárias, além de incluídas no projeto e nunca referenciadas por suas páginas padrão. Você deve estar seguro removendo tudo, exceto o jQuery, e eu até vou remover o jQueryUI. Muitos dos padrões significam bem, mas quando você começar a preencher o conhecimento do domínio, usará bibliotecas que atendem às suas necessidades específicas.

Mesmo com uma divisão estrita, você encontrará que o lado do servidor mvc ainda é um suporte muito limpo para um aplicativo de página única. O roteamento eficaz para entregar sua página e suas chamadas de API é um excelente exemplo. Outro recurso útil são os controladores que retornam visualizações que não usam a página mestre ou são apenas uma visualização parcial. O Angular possui uma "visualização" que pode ser preenchida com um modelo, que pode ser um arquivo estático ou parcial de uma de suas rotas.

Li o seu comentário hoje cedo e reuni uma solução demo para mostrar o que eu mencionei originalmente. A solução também remove parte do "fluff" original. Ao adicionar o Angular e o Bootstrap, você obtém as bibliotecas principais e todas as derivações existentes. Essa é a vantagem de usar o nuGet.

Confira: https://github.com/QueueHammer/AngularWithPartialViewViews

Ao aprender Angular, achei o programa Angular-Seed bastante útil. Especialmente depois que experimentei as demos no site deles. O projeto de amostra é apenas diferente o suficiente para ajudá-lo a aprender. Depois disso, olhei para Angular-Exigir-Seed, mas esse é outro post. Passo a passo angular http://docs.angularjs.org/tutorial Semente angular: https://github.com/angular/angular-seed

— QueueHammer
fonte

Portanto, faria sentido ter algumas visualizações do lado do servidor, assim como o MVC normalmente funciona ... e, para cada uma dessas visualizações, haverá várias visualizações angulares do lado do cliente (talvez uma criação / detalhes / edição para alguma entidade específica). Se assim for, então eu gostaria de poder encontrar um modelo parecido para me colocar em um bom caminho para usando MVC e juntos angular

— pUnkOuter

Adicionado um link para o projeto de demonstração e onde comecei a analisar o Angular. Vou publicar um blog sobre SPAs em geral e alguns dos melhores padrões / bibliotecas que resolvem seus desafios arquitetônicos nos próximos meses. Vou atualizar minha postagem quando o fizer.

— precisa saber é o seguinte

acabou de receber o seu link .. olhou para a demo. parece bom .. a primeira pergunta é .. então .. Você está mantendo a funcionalidade do ASP.NET MVC no lugar como a página principal em que você inicia .. além dessa página, todo o resto é exibições parciais angulares .. Você poderia ter DOIS ASP principais. Visualizações NET MVC? em outras palavras ... a exibição do ASP.NET MVC é pai das exibições parciais angulares ... por exemplo ... talvez eu não queira TODAS as exibições parciais em UMA exibição do ASP.NET .. isso faz sentido? Você poderia me mostrar isso? Que o que me colocou em um bom ponto de partida, eu acho ... ou talvez o que eu estou dizendo não faça sentido?

— pUnkOuter

e qual é o objetivo do parcialsController.cs, pois ele nunca chama nenhum deles?

— pUnkOuter

Você pode colocar as parciais quase em qualquer lugar. Você poderia criar mais controladores com uma ação por visualização. Usei um "paragraphsController.cs" nos roteadores do projeto, combinando com os modos de exibição definidos no módulo de aplicativo angular. Assim, o parcial / view1 está chamando o controlador de parciais e obtendo a ação viewOne, que obtém a view ViewOne. Nas ações, você pode chamar View (); com um parâmetro string passe a localização da sua visualização. Então você tem flexibilidade para organizá-lo da maneira que quiser.

— QueueHammer

Existe talvez um ponto de partida mais simples que eu deva usar se o modelo do VS estiver adicionando muitas coisas de que não preciso?

Esses modelos de VS são bons para reduzir a configuração inicial e a curva de aprendizado no início, no entanto, você precisará personalizá-los para suas reais necessidades do projeto.

Por exemplo, neste site http://www.reviewstoshare.com , meu amigo usando AngularJSjunto com ASP.NET MVC. Lembre-se de que este site já foi criado usando o ASP.MVC + Jquery para interação na página, conforme necessário.

Por outro lado, ainda existe alguma natureza "Ajaxy" no site, como comentários, votação, sinalização etc. Não muito diferente do próprio Stackoverflow. Antes do AngularJS, havia uma confusão de plugins e funções do Jquery no $(document).ready()retorno de chamada, sem mencionar que o código JS não era muito testável.

No geral, a combinação adequada de ambos torna o site liso e funcional.

insira a descrição da imagem aqui

Algumas boas referências para procurar:

— EL Yusubov
fonte

Ou se sob uma coleção de páginas parciais angulares existem alguns pontos de vista regulares MVC que não iria ajuda (como mencionei no meu comentário acima)

— pUnkOuter

Isso é verdade, os problemas de SEO foram resolvidos por novas atualizações.

— EL Yusubov 28/08/2013

Então, para não criticar, mas as declarações negativas no gráfico não estariam realmente abaixo do eixo x? Isso faria o gráfico parecer uma onda de pecado em constante expansão. Eu sei que não é o seu mapa, mas sua ciência ruim.

— QueueHammer

QueueHammer, você deve ser realmente divertido em festas. :-)

— Thomas Stock

Estou totalmente preso nos dois pontos mais baixos da onda em ambos os lados do 'Very Cool!' bolha, como um inferno angular combinado de merda.

— MetaGuru