Mezclando Angular y ASP.NET MVC / Web api?

40

Vengo de usar ASP.NET MVC / Web API y ahora estoy empezando a usar Angular, pero no tengo claro la forma correcta de mezclarlos.

Una vez que estoy usando Angular, ¿los conceptos del lado del servidor MVC todavía proporcionan algún valor? ¿O debería usar estrictamente la API web únicamente para obtener datos para las llamadas HTTP angulares?

¿Quizás haya un punto de partida más simplificado que debería usar si la plantilla VS agrega muchas cosas que no necesito?

Me gusta la idea de una división estricta del lado del servidor = datos puros y del lado del cliente = procesamiento HTML puro.

punkouter
fuente

Respuestas:

17

La forma más fácil de pensarlo es que el servidor sirve a un estado. Angular puede gestionar la recopilación de las actualizaciones a ese estado y enviarlo a una web / api en el servidor. Si desea ir a más aplicaciones de una sola página, el código del lado del servidor sería solo el estado inicial de su aplicación.

Web API es un excelente lugar para comenzar para extraer sus datos en su aplicación. Eventualmente actualizará las rutas predeterminadas para cumplir con los requisitos de diseño de sus entornos y, si lo desea, estar estrictamente lleno.

Hay algunas bibliotecas que ASP4 incluyó por defecto y también se incluyeron en las plantillas MVC4. Realmente hay muchas cosas incluidas en la página que no son necesarias, así como también incluidas en el proyecto y nunca mencionadas en sus páginas predeterminadas. Deberías estar seguro eliminando todo excepto jQuery e incluso voy tan lejos como sacar jQueryUI. Muchos de los valores predeterminados tienen buenas intenciones, pero una vez que comience a completar su conocimiento de dominio, usará libs que satisfaga sus necesidades específicas.

Incluso con una división estricta, encontrará que mvc del lado del servidor sigue siendo un respaldo muy limpio para una aplicación de una sola página. El enrutamiento efectivo en la entrega de su página y sus llamadas API es un buen ejemplo. Otra característica útil son los controladores que devuelven vistas que no usan la página maestra o son solo una vista parcial. Angular tiene una "vista" que puede llenar con una plantilla, que puede ser un archivo estático o parcial de una de sus rutas.

Leí tu comentario el día de hoy y creé una solución de demostración para mostrar lo que mencioné originalmente. La solución también elimina parte de la "pelusa" original, aunque al agregar Angular y Bootstrap obtienes las bibliotecas principales y todas las derivaciones con ellas. Esa es la compensación de usar nuGet.

Compruébalo: https://github.com/QueueHammer/AngularWithPartialViewViews

Al aprender Angular encontré el programa Angular-Seed bastante útil. Especialmente después de haber probado las demos en su sitio. El proyecto de muestra es tan diferente que te ayuda a aprender. Después de eso miré a Angular-Require-Seed pero esa es otra publicación. Angular paso a paso http://docs.angularjs.org/tutorial Angular Seed: https://github.com/angular/angular-seed

QueueHammer
fuente
Entonces, ¿tendría sentido tener unas pocas Vistas del lado del servidor? Así es como MVC normalmente funciona ... y luego para cada una de esas vistas habrá múltiples vistas angulares del lado del cliente (tal vez crear / detalles / editar para alguna entidad específica) ... Si es así, entonces me gustaría poder encontrar una plantilla como la que me puso en un buen camino para el uso de MVC y juntos angular
punkouter
Agregué un enlace al proyecto de demostración y donde comencé a buscar en Angular. Voy a bloguear sobre SPA en general y algunos de los mejores patrones / bibliotecas que resuelven sus desafíos arquitectónicos en los próximos meses. Actualizaré mi publicación cuando lo haga.
QueueHammer
Acabo de recibir su enlace ... miramos la demo. se ve bien ... la primera pregunta es ... así que ... Mantiene la funcionalidad ASP.NET MVC en su lugar como la página principal en la que comienza ... más allá de esa página, todo lo demás son vistas parciales angulares ... ¿Podría tener DOS ASP principales? NET MVC vistas? en otras palabras ... la vista MVC de ASP.NET es un elemento primario de las vistas parciales angulares ... por ejemplo ... tal vez no quiero TODAS las vistas parciales en UNA vista ASP.NET ... ¿tiene sentido? ¿Podrías mostrarme eso? Que creo que lo que me puso en un buen lugar como punto de partida ... ¿o tal vez lo que digo no tiene sentido?
punkouter
¿Y cuál es el punto de partialsController.cs ya que nunca llama a ninguno de estos?
punkouter
Puede poner los parciales en casi cualquier lugar. Podrías hacer más controladores con una acción por vista, utilicé uno "partialsController.cs", las rutas en el proyecto coinciden con las vistas definidas en el módulo angular de la aplicación. Entonces, partial / view1 está llamando al controlador de parciales y obtiene la acción viewOne que luego obtiene la vista ViewOne. En las acciones puede llamar a Ver (); con un parámetro de cadena pase la ubicación de su vista. Por lo tanto, tiene flexibilidad para organizarlo de la forma que desee.
QueueHammer
18

¿Quizás haya un punto de partida más simplificado que debería usar si la plantilla VS agrega muchas cosas que no necesito?

Estas plantillas VS son buenas para recortar la configuración inicial y la curva de aprendizaje al principio, sin embargo, deberá personalizarlas para las necesidades reales de su proyecto.

Por ejemplo, en este sitio http://www.reviewstoshare.com , mi amigo lo usa AngularJSjunto con ASP.NET MVC. Tenga en cuenta que este sitio ya se creó con ASP.MVC + Jquery para la interacción en la página según sea necesario.

Por otro lado, todavía hay algo de naturaleza "Ajaxy" en el sitio, como comentarios, votaciones, marcaciones, etc. No muy diferente al propio Stackoverflow. Antes de AngularJS, era un desastre de complementos y funciones de Jquery dentro de la $(document).ready()devolución de llamada, sin mencionar que el código JS no era muy comprobable.

En general, tener una combinación adecuada de ambos hace que su sitio sea elegante y funcional.

ingrese la descripción de la imagen aquí

Algunas buenas referencias para mirar:

EL Yusubov
fuente
O si es menor de un conjunto de páginas parciales angulares hay algunos puntos de vista regulares MVC no haría que la ayuda (como he mencionado en mi comentario anterior)
punkouter
Esto es cierto, los problemas de SEO se han resuelto mediante nuevas actualizaciones.
EL Yusubov
3
Entonces, para no criticar, ¿pero las declaraciones negativas en el gráfico no estarían realmente debajo del eje x? Eso haría que el gráfico parezca una ola de pecado en constante expansión. Sé que no es tu carta, pero es una mala ciencia.
QueueHammer
12
QueueHammer debes ser muy divertido en las fiestas. :-)
Thomas Stock
1
Estoy totalmente atrapado en los dos puntos más bajos de la ola a ambos lados del '¡Muy bien!' burbuja, como un infierno angular de mierda combinada.
MetaGuru