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
la source
la source
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
la source
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
AngularJSavecASP.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.
Quelques bonnes références à regarder:
la source