¿Mezclando Angular y ASP.NET MVC / Web api?

87

Vengo de usar ASP.NET MVC / Web API y ahora estoy comenzando 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?

Cualquier consejo que tenga para un tipo de ASP.NET MVC que haga la transición a Angular sería útil

user2256870
fuente
4
Dependería, pero creo que "¿debería utilizar estrictamente la API web para obtener datos para las llamadas HTTP angulares" es la forma correcta de hacerlo.
MikeSmithDev
Aquí hay un tutorial para crear una aplicación angular con un backend de API web ASP.NET Core -> medium.com/@levifuller/…
Levi Fuller

Respuestas:

113

API web pura

Solía ​​ser bastante duro con ASP.NET MVC, pero desde que conocí a Angular no veo una razón por la que usaría ningún marco de generación de contenido del lado del servidor. Pure Angular / REST (WebApi) ofrece un resultado más rico y suave. Es mucho más rápido y le permite crear sitios web que se acercan bastante a las aplicaciones de escritorio, sin ningún tipo de trucos.

Angular tiene una pequeña curva de aprendizaje, pero una vez que su equipo la domine, creará sitios web mucho mejores en menos tiempo. Principalmente, esto tiene que ver con el hecho de que ya no tiene todos estos problemas de estado (menos).

Por ejemplo, imagine un formulario de asistente con cualquier marco tradicional del lado del servidor. Cada página debe validarse y enviarse por separado. Quizás el contenido de la página dependa de los valores de una página anterior. Quizás el usuario presionó el botón de retroceso y está volviendo a enviar un formulario anterior. ¿Dónde almacenamos el estado del cliente? Todas estas complicaciones no existen cuando se usa Angular y REST.

Entonces ... ven al lado oscuro ... tenemos galletas.

Pregunta similar

nulo
fuente
Estoy de acuerdo con: la velocidad y la fluidez de desarrollar aplicaciones a través de Angular. En MVC o WebForms (ugh) pasas este tiempo haciendo que escupe el marcado, y luego tienes que hacer un par de pasadas atornillando el código del cliente, lo cual se siente extraño, requiere mucho trabajo y, debido a la naturaleza desconectada, desperdicia un mucho tiempo haciendo cosas sencillas.
moribvndvs
3
@Narayana; Esto proporciona algo de amor al SEO.
nulo
5
¿Porque cuando cambio el nombre de una propiedad en un modelo en particular, no tengo que buscar en AngularJS para "cadenas mágicas"? Angular es bueno, pero en un mundo estrictamente seguro de tipos de .net, una integración más estrecha le permite aprovechar la seguridad de tipos desde el lado del servidor.
Sleeper Smith
6
@Sleeper Smith: He tenido esta discusión muchas veces con personas de mi equipo, pero al final , las convenciones de código , las pruebas unitarias y la separación de preocupaciones ofrecen mucho más que toda la seguridad de tipos del mundo. A mí también me encantaría que JS sea ​​reemplazado por algo como C # , pero en realidad ese no es el caso. Todo lo que importa es el resultado que puede lograr. Es probable que a sus clientes no les importen sus preferencias de codificación, quieren un sitio web atractivo y de buen rendimiento y lo quieren rápido. Angular hace ese trabajo.
nulo
1
Por ejemplo, cuando usaba KnockoutJS, solía crear una aplicación ASP.NET MVC normal y cada vista recibiría datos del modelo del controlador MVC. Luego, estos datos del servidor se serializarían en JSON y, desde allí, KnockoutJS los transformaría en datos observables, por lo que obtendría un enlace de datos bidireccional. ¡Y eso fue genial! Pero, ¿qué hacemos ahora, ya que AngularJS tiene su propio sistema de enrutamiento? ¿Qué sucede con el enrutamiento MVC? ¿Lo usamos en absoluto? ¿Qué sucede ahora con la vista "_Layout" y @RenderBody ()?
AlexRebula
43

AngularJS está más asociado con el paradigma de la aplicación de una sola página y, como tal, no se beneficia mucho de las tecnologías del lado del servidor que representan el marcado. No hay ninguna razón técnica que le impida usarlos juntos, pero en un sentido práctico, ¿por qué lo haría?

Un SPA recupera los activos que necesita (vistas JS, CSS y HTML) y se ejecuta por sí solo, comunicándose con los servicios para enviar o recuperar datos. Por lo tanto, una tecnología del lado del servidor sigue siendo necesaria para proporcionar esos servicios (así como otros medios como la autenticación y similares), pero las partes de representación son en gran medida irrelevantes y no particularmente útiles porque es una duplicación de esfuerzos, excepto que MVC lo hace. en el lado del servidor y Angular lo hace en el cliente. Si está utilizando Angular, lo desea en el cliente para obtener mejores resultados. Puede crear formularios HTML de publicación de Angular y recuperar vistas parciales de las acciones de MVC, pero se estaría perdiendo las mejores y más fáciles funciones de Angular y le haría la vida más difícil.

MVC es bastante flexible y puede usarlo para atender llamadas desde una aplicación SPA. Sin embargo, WebAPI está más finamente ajustado y es un poco más fácil de usar para tales servicios.

He escrito una serie de aplicaciones AngularJS, incluidas algunas que migraron desde aplicaciones WebForms y MVC preexistentes, y el aspecto ASP.NET evoluciona hacia una plataforma para entregar la aplicación AngularJS como el cliente real y para alojar la capa de la aplicación. el cliente se comunica a través de REST (usando WebAPI). MVC es un buen marco, pero generalmente se encuentra sin trabajo en este tipo de aplicaciones.

La aplicación ASP.NET se convierte en una capa más de la infraestructura, donde sus responsabilidades se limitan a:

  • Aloje el contenedor de dependencia.
  • Conecte las implementaciones de lógica empresarial al contenedor.
  • Configure paquetes de activos para JS y CSS.
  • Alojar servicios WebAPI.
  • Refuerce la seguridad, realice registros y diagnósticos.
  • Interfaz con cachés de aplicaciones para mejorar el rendimiento.

Otra gran ventaja de un SPA es que puede aumentar el ancho de banda de su equipo. Un grupo puede explotar los servicios mientras que el otro se encuentra en la aplicación cliente. Dado que puede copiar o simular servicios REST fácilmente, puede tener una aplicación de cliente completamente funcional en servicios simulados y cambiar por los reales cuando terminen.

Tienes que invertir por adelantado en Angular, pero vale la pena. Como ya está familiarizado con MVC, tiene una ventaja sobre algunos de los conceptos básicos.

moribvndvs
fuente
Ok, entonces quiero ir con Angular y tener un back-end .NET para mantener mi productividad con la API, Entity Framework, seguridad, etc. ¿Mis páginas todavía necesitan una configuración / diseño maestro-secundario del lado del servidor? ¿Qué uso para eso: WebForms (no, luego obtengo viewstate), MVC, páginas web ASP.NET u otra cosa?
Sean
1
Técnicamente, no necesita páginas de servidor, páginas de diseño, etc. Bastará con HTML puro. Sin embargo, dependiendo del tamaño y la complejidad de su aplicación, es posible que desee dividir su aplicación Angular en varias aplicaciones distintas por funcionalidad (y puede vincular de una aplicación a otra usando un navegador común o lo que sea). En ese caso, podría usar una página de diseño para mantener las cosas SECAS y consistentes. Además, probablemente esté utilizando paquetes de activos para CSS o scripts, y tenga páginas raíz que sean Razor o lo que sea que uniría bien esas cosas.
moribvndvs
1
He estado usando ASP.NET MVC durante tres años en al menos 8 grandes proyectos y me acostumbré a este marco fino y maduro del lado del servidor. Sin embargo, conozco la importancia de los SPA y adoro Angular, por lo que ahora decidí apostar por mini SPA o aplicaciones híbridas ... o "silos de SPA" como los llamó Miguel Castro. Mi pregunta es: ¿qué pasa con la autorización y la autenticación? Sé que ASP.NET MVC facilita esta tarea de manera significativa. ¿Cómo se hace esto sin ASP.NET MVC?
AlexRebula
1
@AlexRebula Creo que la pregunta es más una cuestión de cómo desea realizar la autenticación en WebApi vs MVC. Normalmente es con cookies (incluso puede usar cookies de FormsAuth o ASP.NET Identity con WebApi) o encabezados (OAuth, etc.). Cualquiera de los enfoques es totalmente compatible con Web API y Angular, pero requiere que usted elija una implementación. Es difícil darte una respuesta más precisa sin más detalles sobre lo que estás haciendo y cuáles son tus objetivos específicos.
moribvndvs
@HackedByChinese Lo entiendo. Y ahora creo que sería genial si tuviera más tiempo para profundizar más en la API web ...
AlexRebula
6

Depende del proyecto en el que esté trabajando.

Si angularJS es algo nuevo para usted, preferiría elegir un pequeño proyecto de bajo riesgo / presión para comenzar y asegurarme de que aprenda a hacer las cosas de la manera correcta (he visto muchos proyectos que usan Angularjs incorrectamente debido a la presión, los plazos ... falta de tiempo para aprenderlo de forma adecuada, por ejemplo, utilizando JQuery o accediendo al DOM dentro de los controladores, etc ...).

Si el proyecto es de campo verde y tiene algo de experiencia en AngularJS, tiene sentido abandonar ASP.net MVC y en el lado del servidor optar por REST / WebAPI puro.

Si se trata de un proyecto existente, puede elegir un subconjunto complejo de funcionalidades y crear esa página como una aplicación angularJS separada (por ejemplo, su aplicación está compuesta por un gran grupo de páginas estándar basadas en Razor de complejidad simple / media, pero necesita un editor avanzado / página, que podría ser la pieza de destino para construir con AngularJS).

Braulio
fuente
1
Me gusta tu respuesta y estoy de acuerdo en casi todo lo que dijiste. Sin embargo, hay una cosa que me preocupa. ASP.NET MVC es un marco web del lado del servidor muy agradable y maduro con excelentes características integradas, como autenticación y autorización. Escribió que uno podría abandonar ASP.NET MVC para optar por REST / WebAPI puro. Ahora me pregunto: ¿la autenticación y la autorización son tan fáciles de lograr como en ASP.NET MVC? Sin mencionar lo fácil que es implementar OAuth para Google, etc. Entonces, mi pregunta es, qué tan fácil es lograr todas esas cosas con REST / WebAPI. Entonces consideraría tener un mini SPA.
AlexRebula
En nuestro caso, configuramos un token en cada solicitud http (http predeterminado único lugar para agregarlo) use ASP .net MVC / web api AuthorizeAttribute para verificar el token y los permisos, también puede dentro del método web api obtener ese token y realizar control de seguridad más afinado. Si necesita OAuth, también hay bibliotecas en el lado angular para ayudarlo con eso.
Braulio
0

Puede usar el marco Angular para el desarrollo de front-end, es decir, para construir vistas. Le proporciona una arquitectura robusta y una vez que aprenda, encontrará sus ventajas sobre el motor de vista de maquinilla de afeitar de Asp.net MVC. Para obtener datos, debe usar WebAPI y ahora el proyecto ASP.Net MVC admite controladores WebAPI y MVC listos para usar. Puede consultar el siguiente enlace que comienza con el desarrollo de aplicaciones Angular y ASP.Net MVC.

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

Actualmente hay dos marcos disponibles para desarrollar componentes de interfaz de usuario para aplicaciones angulares. He usado estos dos marcos en uno de los proyectos angulares en los que trabajé.

Material https://material.angular.io/

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

rinoy
fuente