web-dev-qa-db-fra.com

Mixage Angular et ASP.NET MVC / API Web?

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

Une fois que j'utilise Angular les concepts côté serveur MVC fournissent-ils encore une valeur? Ou dois-je utiliser strictement l'API Web uniquement pour obtenir des données pour le angular HTTP appels?

Y a-t-il peut-être un point de départ plus épuré que je devrais utiliser si le modèle VS ajoute beaucoup de choses dont je n'ai pas besoin?

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

40
punkouter

La façon la plus simple d'y penser est que le serveur sert un état. Angular peut gérer la collecte des mises à jour à cet état et l'envoyer à un site web/api sur le serveur. Si vous souhaitez utiliser plusieurs applications sur une seule page, le code côté serveur ne sera que l'initial l'état de votre application.

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

Il existe quelques bibliothèques que ASP4 incluait par défaut et celles-ci étaient également incluses dans les modèles MVC4. Il y a vraiment beaucoup de choses incluses dans la page qui ne sont pas nécessaires, ainsi que 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'à retirer jQueryUI. Beaucoup de valeurs par défaut signifient bien, mais une fois que vous commencez à remplir vos connaissances de domaine, vous utiliserez des bibliothèques qui répondent à vos besoins spécifiques.

Même avec une division stricte, vous constaterez que le côté serveur mvc est toujours un support très propre à une application d'une seule page. Un routage efficace dans la livraison de votre page et de vos appels API est un excellent exemple. Une autre fonctionnalité utile est les contrôleurs qui renvoient des vues qui n'utilisent pas la page maître ou ne sont qu'une vue partielle. Angular a une "vue" qu'il peut remplir avec un modèle, qui peut être un fichier statique ou une partie de l'un de vos itinéraires.

J'ai lu votre commentaire plus tôt dans la journée et j'ai mis au point une solution de démonstration pour montrer ce que j'ai mentionné à l'origine. La solution a également supprimé certains des "fluff" d'origine lors de l'ajout de Angular et Bootstrap vous obtenez les bibliothèques de base et toutes les dérivations avec. C'est le compromis de en utilisant 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. L'exemple de projet est juste assez différent pour vous aider à apprendre. Après cela, j'ai regardé Angular-Require-Seed mais c'est un autre article. Angular Step by Step http://docs.angularjs.org/tutorial Angular = Graine: https://github.com/angular/angular-seed

17
QueueHammer

Y a-t-il peut-être un point de départ plus épuré que je devrais utiliser si le modèle VS ajoute beaucoup de choses dont je n'ai pas besoin?

Ces modèles VS sont bons pour réduire la configuration initiale et la courbe d'apprentissage au début, mais vous devrez les personnaliser pour les besoins réels de votre projet.

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

D'un autre côté, il y a toujours une nature "Ajaxy" sur le site comme des commentaires, des votes, des marquages, etc. Pas trop différent de Stackoverflow lui-même. Avant AngularJS, c'était un gâchis de plugins et de fonctions Jquery dans le rappel $(document).ready(), sans oublier que le code JS n'était pas beaucoup testable.

Dans l'ensemble, avoir un bon mélange des deux rend votre site lisse et fonctionnel.

enter image description here

Quelques bonnes références à rechercher:

18
Yusubov