Côté serveur C # MVC avec AngularJS
J'aime utiliser .NET MVC et je l'ai beaucoup utilisé dans le passé. J'ai également construit des SPA en utilisant AngularJS sans chargement de page autre que celui initial. Je pense que je veux utiliser un mélange des deux dans de nombreux cas. Configurez l'application initialement à l'aide de .NET MVC et configurez le côté serveur de routage. Configurez ensuite chaque page en tant que mini-SPA. Ces pages peuvent être assez complexes avec beaucoup de fonctionnalités côté client.
Ma confusion vient de la façon de gérer la liaison de vue de modèle en utilisant à la fois .NET MVC et la portée AngularJS. Dois-je éviter d'utiliser des aides de rasoir Html? Les assistants HTML créent le balisage derrière la scène afin qu'il puisse être compliqué d'essayer d'ajouter des balises angularjs à l'aide des assistants. Alors, comment ajouter ng-model par exemple à @ Html.TextBoxFor (x => x.Name). De plus, ng-repeat ne fonctionnerait pas car je ne charge pas mon modèle dans la portée, non? Je voudrais toujours utiliser une boucle c # foreach?
Où dois-je tracer les lignes de séparation? Quelqu'un at-il réussi à faire fonctionner .NET MVC et AngularJS ensemble et quelles sont vos suggestions architecturales pour le faire?
Vous pouvez certainement utiliser n'importe quel mélange de rendu côté client et de rendu côté serveur, mais je déconseille d'essayer de mélanger les assistants ASP.NET MVC avec les directives AngularJS. Cela peut sembler une bonne idée au début, car vous êtes déjà habitué à utiliser ces assistants et vous n'avez pas à écrire "html brut", mais ils vont à l'encontre de l'objectif de ce que les applications côté client essaient de réaliser: séparation des préoccupations, réactivité, liaison des données et testabilité.
Il y a certainement une place pour créer des mini-SPA dans une application Web traditionnelle plus grande, surtout si vous convertissez une application héritée ou si certaines parties de la plus grande application n'ont pas besoin d'un SPA ou sont mieux servies sans. Mais si vous allez rendre une page donnée - ou une partie de page - sur le client, alors achetez complètement et laissez AngularJS faire ce qu'il sait faire.
Supposons donc que vous ayez un modèle Products (une liste énumérable de) et que vous souhaitiez l'afficher sur la page dans une liste. Vous avez trois options auxquelles je peux penser:
- Utilisez un rasoir @ForEach et rendez-le côté serveur, mais acceptez que votre application AngularJS côté client ne connaîtra pas cette liste et ne la liera pas à son modèle
- Attendez que la page se charge et les démarrages AngularJS, puis appelez l'API à votre application côté serveur MVC pour obtenir des données JSON et collez-les dans le modèle. Utilisez ng-repeat pour rendre la liste.
- Utilisez le rasoir pour sérialiser le modèle de produits sur le serveur dans une chaîne JSON et incorporez-le dans le contrôleur AngularJS que vous renvoyez. Utilisez ng-repeat pour afficher la liste et profiter de la liaison de données côté client.
La dernière option est moche. Je ne peux pas penser à une très bonne raison à cela, sauf si vous avez besoin d'une liaison de données côté client et que vous devez payer pour chaque appel d'API.
Le premier serait bien si vous n'avez pas besoin de liaison de données sur le client (c'est une liste en lecture seule) ou si vous avez besoin de SEO.
La seconde est la façon dont je le ferais dans la plupart des scénarios. Vous avez décidé d'utiliser AngularJS pour une raison - laissez-le faire son travail.
N'utilisez pas les assistants MVC simplement parce qu'ils sont là. AngularJS fournit ses propres directives qui font à peu près la même chose. Et si vous en avez besoin de plus, écrivez le vôtre. Une partie de l'utilisation d'un cadre côté client consiste à adhérer à la philosophie: le serveur est responsable des éléments serveur-y tels que l'authentification, la validation du serveur et la fourniture de données via une API, et le client est responsable d'être une application frontale. Séparez vos préoccupations.
Rien de tout cela signifie que vous ne pouvez pas utiliser ASP.NET MVC pour le routage, l'authentification ou la structure globale de votre application. Tout ce qui entoure vos applications AngularJS. Une fois dans un mini-SPA, faites-le à la manière du SPA.
C'est la philosophie que j'ai utilisée lors de l'intégration d'ASP.NET MVC avec AngularJS. Le MVC côté serveur est uniquement responsable du rendu de la page initiale, puis de la fourniture d'une API semi-RESTful par la suite. Il utilise ASP.NET MVC pour router les URL, s'authentifier et autres goodies. Mais il n'y a presque pas de rasoir et certainement aucun assistant HTML.
Un peu un commentaire/réponse externe, je ne suis pas un programmeur .NET MVC, mais j'ai fait beaucoup de programmation PHP, Java et AS3 et, récemment, je suis également passé à AngularJS.
Mon sentiment général est que le back-end devrait simplement être RESTful et ne devrait pas vraiment toucher le front-end et que le front-end ne devrait dépendre que du back-end pour les données. Il y a quelques exceptions pour quand il serait préférable de créer des vues côté serveur (par exemple pour une exportation cohérente ou lorsque la mise en cache des vues aidera de manière significative).
L'avantage de la ligne de séparation claire est de permettre à vos équipes de travailler de manière indépendante ou si vous êtes un homme seul pour vous permettre de vous concentrer sur une tâche/un problème à la fois (peut déboguer le back-end séparément du front-end) . De plus, si votre projet se développe et que les clients ont besoin d'une solution d'application native, vous pouvez toujours réutiliser votre back-end RESTful (REST n'est pas purement nécessaire mais semble être la voie à suivre) et simplement réécrire le front-end.
Je crée une application qui est une combinaison de MVC sur le serveur et d'AngularJS sur le client.
Sur le serveur:
J'ai trouvé que la chose la plus simple à faire était de créer un tas d'API Web RESTful pour fournir des services de données au client. J'effectue également une validation sur le serveur pour m'assurer que personne ne triche (envoi de données à l'aide d'un client autre que la page Web). J'assemble également la page Web (bien qu'un contrôleur et une vue minimale) pour charger toutes les bibliothèques dont il a besoin. Étant donné que je crée la page Web avec presque aucun changement de la vue au HTML final, je devrais pouvoir remplacer AngularJS par autre chose.
Sur le client:
Sur le client, j'ai utilisé AngularJS pour tout gérer, de l'appel des API Web à la validation locale. Il donne à l'utilisateur la réponse "immédiate" qui est poussée par le dernier Push sur le Web. Vous pouvez rendre votre page dynamique ou relativement statique. En utilisant une architecture qui utilise une séparation des préoccupations, je peux remplacer le back-end par tout ce qui prend en charge une API RESTful.
Nous avons construit une application qui est une combinaison d'AngularJS et MVC
Les meilleures pratiques disent qu'en utilisant à la fois MVC et angularJS, nous devons utiliser l'API Web MVC côté serveur pour obtenir les données du serveur Et côté client, nous devons utiliser le framework Angularjs pour lier les données JSON avec des contrôles html.
Sûrement ... si vous avez un SPA qui décrit la page et ne nécessite que des données qui lui sont fournies, alors vous avez besoin d'un serveur RESTful qui récupère et renvoie les données requises. Rien de plus.
Si vous essayez de mélanger les deux, je pense que vous pourriez compliquer les choses. Bien sûr, utiliser MVC pour générer les pages initiales est une idée décente, mais une fois cela fait - vous voulez toujours que les appels AngularJS fassent REST demandes de données. La combinaison des deux semble plus facile lorsque vous gardez les 2 technologies distinctes.