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

Je viens d’utiliser ASP.NET MVC / Web API et je commence maintenant à utiliser Angular, mais je ne suis pas au courant de 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 strictement utiliser l'API Web uniquement pour obtenir des données pour les appels HTTP angulaires?

Y a-t-il peut-être un point de départ plus précis à utiliser si le modèle VS ajoute beaucoup d'éléments dont je n'ai pas besoin?

J'aime l'idée d'une division stricte du côté serveur = données pures et du côté client = traitement HTML pur.

javascript mvc asp.net-mvc

— punkouter
source

Related: Les interfaces de site Web doivent-elles être rendues côté client ou côté serveur?

— Gnat

Réponses:

La façon la plus simple d’y penser est que le serveur serve un état. Angular peut gérer la collecte des mises à jour de cet état et l’envoyer à une interface Web / API sur le serveur. Si vous souhaitez utiliser davantage d'applications sur une seule page, le code côté serveur correspond simplement à l'état initial de votre application.

L'API Web est un excellent point de départ pour extraire vos données dans votre application. Vous mettrez éventuellement à jour les routages par défaut afin de répondre aux exigences de conception de vos environnements et, si vous le souhaitez, d'être strictement au repos.

Il existe quelques bibliothèques incluses par défaut dans ASP4 et celles-ci ont également été incluses dans les modèles MVC4. Il y a vraiment beaucoup de choses incluses dans la page qui ne sont pas nécessaires, aussi bien que celles incluses dans le projet et jamais même référencées par leurs pages par défaut. Vous devriez être sûr de tout supprimer sauf jQuery et je vais même jusqu'à supprimer jQueryUI. Beaucoup de valeurs par défaut signifient bien, mais une fois que vous commencez à renseigner votre domaine, vous utiliserez des bibliothèques qui répondent à vos besoins spécifiques.

Même avec une division stricte, vous trouverez que côté serveur mvc est toujours un support très clair pour une application à une seule page. Un routage efficace pour livrer votre page et vos appels à l'API en est un excellent exemple. Les contrôleurs qui renvoient des vues qui n'utilisent pas la page maître ou ne sont que des vues partielles sont une autre fonctionnalité utile. Angular a une "vue" qu’elle peut remplir avec un modèle, qui peut être un fichier statique ou un partiel de l’un de vos itinéraires.

Je vous ai lu votre commentaire un peu plus tôt dans la journée et jeté une solution de démonstration pour montrer ce que j’avais mentionné à l’origine. La solution supprime également une partie du "fluff" d'origine. Toutefois, lorsque vous ajoutez Angular et Bootstrap, vous obtenez les bibliothèques principales et toutes les dérivations. C'est le commerce d'utiliser NuGet.

Découvrez-le: https://github.com/QueueHammer/AngularWithPartialViewViews

En apprenant Angular, j’ai trouvé le programme Angular-Seed assez utile. Surtout après avoir essayé les démos sur leur site. Le projet exemple est suffisamment différent pour vous aider à apprendre. Après cela, j'ai regardé Angular-Require-Seed, mais c'est un autre billet. Étape par étape angulaire http://docs.angularjs.org/tutorial Semences angulaires: https://github.com/angular/angular-seed

— QueueHammer
source

Il serait donc logique de disposer de quelques vues côté serveur, fonctionnant ainsi normalement avec MVC .. et pour chacune de ces vues, il y aura plusieurs vues angulaires côté client (peut-être une création / des détails / une modification pour une entité spécifique) .. Si oui, alors j'aimerais pouvoir trouver un modèle comme celui-ci pour me mettre sur la bonne voie d'utilisation de MVC et angular together

— punkouter

Ajout d'un lien vers le projet de démonstration et où j'ai commencé à me pencher sur Angular. Je vais rédiger un blog sur les SPA en général et sur certains des meilleurs modèles / bibliothèques qui résolvent leurs problèmes architecturaux au cours des prochains mois. Je mettrai à jour mon message quand je le ferai.

— QueueHammer

viens de recevoir votre lien .. regardé la démo. La première question est .. alors .. Vous gardez la fonctionnalité ASP.NET MVC en place comme page principale à laquelle vous commencez .. au-delà de cette page, tout le reste est une vue partielle angulaire .. Pourriez-vous avoir DEUX ASP principaux. Vues NET MVC? en d'autres termes .. la vue ASP.NET MVC est un parent des vues partielles angulaires .. par exemple .. peut-être que je ne veux pas TOUTES les vues partielles sous UNE SEULE vue ASP.NET .. cela a-t-il un sens? Pourriez-vous me montrer ça? Que ce qui me place dans une bonne position pour un point de départ je pense .... ou peut-être que ce que je dis n'a pas de sens?

— punkouter

et quel est l'intérêt de partialsController.cs puisqu'il n'appelle jamais aucun de ceux-ci?

— punkouter

Vous pouvez mettre les partiels presque n'importe où. Vous pourriez faire plus de contrôleurs avec une action par vue. J'ai utilisé un "partialsController.cs". Les routs du projet se mêlent aux vues définies dans le module d'application angulaire. Donc, partial / view1 appelle le contrôleur de partiels et obtient l'action viewOne qui obtient ensuite la vue ViewOne. Dans les actions, vous pouvez appeler View (); avec un paramètre de chaîne, passez l'emplacement de votre vue. Vous avez donc la possibilité de l’organiser à votre guise.

— QueueHammer

Y a-t-il peut-être un point de départ plus précis à utiliser si le modèle VS ajoute beaucoup d'éléments dont je n'ai pas besoin?

Ces modèles de VS permettent de réduire la configuration initiale et la courbe d’apprentissage au début. Toutefois, vous devrez les personnaliser pour répondre aux besoins réels de votre projet.

Par exemple, sur ce site http://www.reviewstoshare.com , mon ami utilise AngularJSavec ASP.NET MVC. Gardez à l'esprit que ce site a déjà été créé à l'aide de ASP.MVC + Jquery pour une interaction in page, selon les besoins.

D'un autre côté, le site a encore un caractère "Ajaxy", comme des commentaires, un vote, un signalement, etc. Pas trop différent de Stackoverflow lui-même. Avant AngularJS, c'était un fouillis de plugins et de fonctions Jquery dans le $(document).ready()rappel, sans parler du code JS qui n'était pas testable.

Globalement, la combinaison des deux éléments rend votre site lisse et fonctionnel.

entrez la description de l'image ici

Quelques bonnes références à regarder:

— EL Yusubov
source

Ou, si sous une collection de pages partielles angulaires, il y a quelques vues régulières de MVC, cela ne vous aiderait-il pas (comme je l'ai mentionné dans mon commentaire ci-dessus)

— punkouter

C’est vrai, les problèmes de référencement ont été résolus par de nouvelles mises à jour.

— EL Yusubov

Donc, ne pas critiquer, mais les affirmations négatives sur le graphique ne seraient-elles pas en dessous de l'axe des x? Cela ferait ressembler le graphique à une vague de péché en expansion constante. Je sais que ce n'est pas votre carte, mais sa mauvaise science.

— QueueHammer

QueueHammer, vous devez être vraiment amusant lors des fêtes. :-)

— Thomas Stock

Je suis totalement coincé dans les deux points les plus bas de la vague de part et d'autre du «Very Cool! bulle, comme un enfer angulaire merdique combiné.

— MetaGuru