Mélanger Angular et ASP.NET MVC / Web api?

87

Je viens d'utiliser ASP.NET MVC / Web API et maintenant je commence à utiliser Angular mais je ne suis pas clair sur la bonne façon de les mélanger.

Une fois que j'utilise Angular, les concepts côté serveur MVC fournissent-ils toujours une valeur? Ou devrais-je utiliser l'API Web uniquement pour obtenir des données pour les appels HTTP angulaires?

Tous les conseils que vous avez pour un gars ASP.NET MVC passant à Angular seraient utiles

asp.net-mvc angularjs asp.net-mvc-4 user2256870
la source
4
Cela dépendrait, mais je pense que "devrais-je utiliser strictement l'API Web uniquement pour obtenir des données pour les appels HTTP angulaires" est la bonne façon de le faire.
MikeSmithDev
Voici un tutoriel pour créer une application angulaire avec un backend API Web ASP.NET Core -> medium.com/@levifuller
Levi Fuller

Réponses:

113

API Web pure

J'étais assez hardcore avec ASP.NET MVC mais depuis que j'ai rencontré Angular, je ne vois pas une seule raison pour laquelle j'utiliserais un framework de génération de contenu côté serveur. Pure Angular / REST (WebApi) donne un résultat plus riche et plus fluide. C'est beaucoup plus rapide et vous permet de créer des sites Web assez proches des applications de bureau, sans aucun piratage génial.

Angular a une petite courbe d'apprentissage, mais une fois que votre équipe l'a maîtrisée, vous créerez de bien meilleurs sites Web en moins de temps. Cela a principalement à voir avec le fait que vous n'avez plus tous ces problèmes d'état (moins).

Par exemple, imaginez un formulaire d'assistant avec n'importe quel framework côté serveur traditionnel. Chaque page doit être validée et soumise séparément. Peut-être que le contenu de la page dépend des valeurs d'une page précédente. Peut-être que l'utilisateur a appuyé sur le bouton Retour et soumet à nouveau un formulaire précédent. Où stockons-nous l'état du client? Toutes ces complications n'existent pas lors de l'utilisation de Angular et REST.

Alors ... venez du côté obscur ... nous avons des cookies.

Question similaire

nul
la source
Je suis d'accord sur: la vitesse et la fluidité du développement d'applications via Angular. Dans MVC ou WebForms (ugh), vous passez ce temps à le faire cracher du balisage, puis à faire quelques passes pour y boulonner du code client, ce qui semble étrange, demande beaucoup de travail et, en raison de la nature déconnectée, gaspille un beaucoup de temps à faire des choses simples.
moribvndvs
3
@Narayana; Cela donne un peu d'amour au référencement.
null
5
Parce que lorsque je renomme une propriété sur un modèle particulier, je n'ai pas à creuser autour d'AngularJS pour trouver des "chaînes magiques"? Angular est bien, mais dans un monde sécurisé de type strict de .net, une intégration plus étroite vous permet de tirer parti de la sécurité des types du côté serveur.
Sleeper Smith
6
@Sleeper Smith: J'ai eu cette dispute à plusieurs reprises avec des membres de mon équipe, mais en fin de compte , les conventions de code , les tests unitaires et la séparation des préoccupations offrent beaucoup plus que tout le type de sécurité dans le monde. J'adorerais moi aussi voir JS être remplacé par quelque chose comme C # , mais en réalité ce n'est tout simplement pas le cas. Tout ce qui compte, c'est le résultat que vous pouvez obtenir. Vos clients ne se soucient probablement pas de vos préférences de codage, ils veulent un site Web élégant et performant et ils le veulent rapidement. Angular fait ce travail.
null
1
Par exemple, lors de l'utilisation de KnockoutJS, j'avais l'habitude de créer une application ASP.NET MVC normale et chaque vue recevait des données de modèle du contrôleur MVC. Ensuite, ces données du serveur seraient sérialisées en JSON et à partir de là, KnockoutJS les transformerait en données observables, de sorte que j'obtiendrais une liaison de données bidirectionnelle. Et c'était super! Mais que faisons-nous cela maintenant, puisque AngularJS a son propre système de routage? Que se passe-t-il avec le routage MVC? L'utilisons-nous du tout? Que se passe-t-il maintenant avec la vue "_Layout" et @RenderBody ()?
AlexRebula
43

AngularJS est davantage associé au paradigme de l'application à page unique et, en tant que tel, ne bénéficie pas beaucoup des technologies côté serveur qui rendent le balisage. Il n'y a aucune raison technique qui vous empêche de les utiliser ensemble, mais dans un sens pratique, pourquoi le feriez-vous?

Un SPA récupère les ressources dont il a besoin (vues JS, CSS et HTML) et s'exécute de manière autonome, communiquant avec les services pour envoyer ou récupérer des données. Ainsi, une technologie côté serveur est toujours nécessaire pour fournir ces services (ainsi que d'autres moyens tels que l'authentification et autres), mais les parties de rendu sont largement hors de propos et pas particulièrement utiles car c'est une duplication des efforts, sauf que MVC le fait. côté serveur et Angular le fait sur le client. Si vous utilisez Angular, vous le souhaitez sur le client pour de meilleurs résultats. Vous pouvez créer des formulaires HTML de publication angulaire et récupérer des vues partielles des actions MVC, mais vous manqueriez les fonctionnalités les meilleures et les plus simples d'Angular et vous rendriez la vie plus difficile.

MVC est assez flexible et vous pouvez l'utiliser pour traiter les appels d'une application SPA. Cependant, WebAPI est plus finement réglé et un peu plus facile à utiliser pour de tels services.

J'ai écrit un certain nombre d'applications AngularJS, y compris quelques applications qui ont migré à partir d'applications WebForms et MVC préexistantes, et l'aspect ASP.NET évolue vers une plate-forme pour fournir l'application AngularJS en tant que client réel et pour héberger la couche d'application. le client communique avec via REST (en utilisant WebAPI). MVC est un bon framework, mais il se retrouve généralement sans travail dans ce type d'applications.

L'application ASP.NET devient une autre couche de l'infrastructure, où ses responsabilités se limitent à:

  • Hébergez le conteneur de dépendances.
  • Câblez les implémentations de logique métier dans le conteneur.
  • Configurez des ensembles d'actifs pour JS et CSS.
  • Héberger des services WebAPI.
  • Renforcez la sécurité, effectuez la journalisation et les diagnostics.
  • Interfaçage avec les caches d'applications pour les performances.

Un autre avantage d'un SPA est qu'il peut augmenter la bande passante de votre équipe. Un groupe peut faire exploser les services tandis que l'autre se trouve dans l'application cliente. Étant donné que vous pouvez facilement stub ou simuler des services REST, vous pouvez avoir une application client entièrement fonctionnelle sur des services simulés et remplacer les services réels une fois qu'ils ont terminé.

Vous devez investir d'avance sur Angular, mais cela rapporte gros. Puisque vous êtes déjà familier avec MVC, vous avez une longueur d'avance sur certains des concepts de base.

moribvndvs
la source
Ok, donc je veux aller avec Angular et avoir un back-end .NET pour garder ma productivité avec l'API, Entity Framework, la sécurité, etc. Mes pages ont-elles toujours besoin d'une configuration / mise en page maître-enfant côté serveur? Que dois-je utiliser pour cela - WebForms (non - alors j'obtiens viewstate), MVC, pages Web ASP.NET ou autre chose?
Sean
1
Techniquement, vous n'avez pas besoin de pages de serveur, de pages de mise en page, etc. Un simple HTML fera l'affaire. Cependant, en fonction de la taille et de la complexité de votre application, vous souhaiterez peut-être diviser votre application Angular en plusieurs applications distinctes par fonctionnalité (et vous pouvez créer un lien d'une application à une autre à l'aide d'une navigation commune ou autre). Dans ce cas, vous pouvez utiliser une page de mise en page pour garder les choses au sec et cohérentes. De plus, vous utilisez probablement des ensembles d'actifs pour CSS ou des scripts, et vous avez des pages racine qui sont Razor ou tout ce qui pourrait bien réunir ces éléments.
moribvndvs
1
J'utilise ASP.NET MVC depuis trois ans maintenant sur au moins 8 grands projets et je me suis habitué à ce framework côté serveur fin et mature. Cependant, je connais l'importance des SPA et j'adore Angular, alors j'ai décidé maintenant d'opter pour des mini SPA ou des applications hybrides ... ou des "silos SPA" comme les appelait Miguel Castro. Ma question est la suivante: qu'en est-il de l'autorisation et de l'authentification? Je sais qu'ASP.NET MVC facilite considérablement cette tâche. Comment est-ce possible sans ASP.NET MVC?
AlexRebula
1
@AlexRebula Je pense que la question est plus de savoir comment voulez-vous faire l'authentification dans WebApi vs MVC. Normalement, c'est avec des cookies (vous pouvez même utiliser des cookies d'identité FormsAuth ou ASP.NET avec WebApi) ou des en-têtes (OAuth, etc.). Chaque approche est entièrement prise en charge par l'API Web et Angular, mais vous oblige à faire un choix d'implémentation. Il est difficile de vous donner une réponse plus précise sans plus de détails sur ce que vous faites et quels sont vos objectifs spécifiques.
moribvndvs
@HackedByChinese Je comprends. Et maintenant, je pense que ce serait vraiment génial si j'avais plus de temps pour creuser davantage dans l'API Web ...
AlexRebula
6

Cela dépend du projet sur lequel vous travaillez.

Si angularJS est quelque chose de nouveau pour vous, je préférerais choisir un petit projet à faible risque / pression pour commencer et vous assurer d'apprendre à faire les choses de la bonne manière (j'ai vu de nombreux projets utiliser Angularjs mal à cause de la pression, des délais ... manque de temps pour l'apprendre correctement, par exemple en utilisant JQuery ou en accédant au DOM à l'intérieur des contrôleurs, etc ...).

Si le projet est un champ vert et que vous avez une certaine expérience sur AngularJS, il est logique d'abandonner ASP.net MVC et, côté serveur, d'opter pour du REST / WebAPI pur.

S'il s'agit d'un projet existant, vous pouvez choisir un sous-ensemble complexe de fonctionnalités et créer cette page en tant qu'application angularJS distincte (par exemple, votre application est composée d'un grand nombre de pages standard simples / moyennes basées sur Razor mais vous avez besoin d'un éditeur avancé / page, qui pourrait être la pièce cible à construire avec AngularJS).

Braulio
la source
1
J'aime votre réponse et j'approuve la plupart de ce que vous avez dit. Cependant, il y a une chose qui me trouble. ASP.NET MVC est un framework Web côté serveur très agréable et mature avec d'excellentes fonctionnalités intégrées telles que l'authentification et l'autorisation. Vous avez écrit que l'on pouvait abandonner ASP.NET MVC pour opter pour du REST / WebAPI pur. Maintenant, je me demande: l'authentification et l'autorisation sont-elles aussi faciles à réaliser que dans ASP.NET MVC? Sans parler de la facilité de mise en œuvre d'OAuth pour Google, etc. Ma question est donc de savoir à quel point il est facile d'accomplir tous ces problèmes avec REST / WebAPI. J'envisagerais donc d'avoir un mini SPA.
AlexRebula
Dans notre cas, nous configurons un jeton dans chaque requête http (http par défaut à un seul endroit pour l'ajouter), utilisez ASP .net MVC / web api AuthorizeAttribute pour vérifier le jeton et les autorisations, vous pouvez également dans la méthode de l'API Web obtenir ce jeton et effectuer des contrôles de sécurité plus précis. Si vous avez besoin d'OAuth, il existe également des bibliothèques du côté angulaire pour vous aider.
Braulio
0

Vous pouvez utiliser le framework Angular pour le développement frontal, c'est-à-dire pour construire des vues. Il vous offre une architecture robuste et une fois que vous aurez appris, vous trouverez ses avantages par rapport au moteur de vue rasoir d'Asp.net MVC. Pour récupérer des données, vous devez utiliser des WebAPI et maintenant le projet ASP.Net MVC prend en charge les contrôleurs WebAPI et MVC prêts à l'emploi. Vous pouvez consulter le lien ci-dessous pour démarrer le développement d'applications Angular et ASP.Net MVC.

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

Il existe actuellement deux frameworks pour développer des composants d'interface utilisateur pour des applications angulaires. J'ai utilisé ces deux cadres dans l'un des projets angulaires sur lesquels j'ai travaillé.

Matériel https://material.angular.io/

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

Rinoy
la source