it-swarm.com.de

Mischen Angular und ASP.NET MVC / Web-API?

Ich komme aus der Verwendung der ASP.NET MVC/Web-API und beginne jetzt mit der Verwendung von Angular, aber ich bin mir nicht sicher, wie ich sie richtig mischen soll.

Wenn ich Angular verwende, bieten die serverseitigen MVC-Konzepte noch einen Wert? Oder sollte ich die Web-API ausschließlich zum Abrufen von Daten für das angular HTTP) verwenden Anrufe?

Gibt es vielleicht einen abgespeckten Ausgangspunkt, den ich verwenden sollte, wenn die VS-Vorlage eine Menge Dinge hinzufügt, die ich nicht brauche?

Ich mag die Idee einer strikten Trennung von Server-Seite = reine Daten und Client-Seite = reine HTML-Verarbeitung.

40
punkouter

Der einfachste Weg, darüber nachzudenken, ist, dass der Server einen Status bedient. Angular kann das Sammeln der Updates in diesem Status verwalten und an ein Web/eine API auf dem Server senden. Wenn Sie mehr Single-Page-Apps verwenden möchten, ist der serverseitige Code nur der erste Status Ihrer App.

Die Web-API ist ein ausgezeichneter Ausgangspunkt, um Ihre Daten in Ihre App zu ziehen. Sie werden die Standardrouter eventuell aktualisieren, um die Entwurfsanforderungen Ihrer Umgebung zu erfüllen und wenn Sie möchten, strikt restlich zu sein.

Es gibt einige Bibliotheken, die standardmäßig in ASP4 enthalten sind und die auch in den MVC4-Vorlagen enthalten waren. Es gibt wirklich viele Dinge auf der Seite, die nicht benötigt werden, sowie Dinge, die im Projekt enthalten sind und auf die nicht einmal von ihren Standardseiten verwiesen wird. Sie sollten sicher sein, alles außer jQuery zu entfernen, und ich gehe sogar so weit, jQueryUI herauszunehmen. Viele der Standardeinstellungen sind gut gemeint, aber sobald Sie anfangen, Ihr Domain-Wissen einzugeben, werden Sie Bibliotheken verwenden, die Ihren spezifischen Anforderungen entsprechen.

Selbst bei einer strengen Trennung werden Sie feststellen, dass serverseitiges MVC immer noch eine sehr saubere Unterstützung für eine einzelne Seiten-App ist. Ein effektives Routing bei der Zustellung Ihrer Seite und Ihrer API-Aufrufe ist ein hervorragendes Beispiel. Eine weitere nützliche Funktion sind Controller, die Ansichten zurückgeben, die die Masterseite nicht verwenden oder nur eine Teilansicht sind. Angular hat eine "Ansicht", die mit einer Vorlage gefüllt werden kann, die eine statische Datei oder ein Teil einer Ihrer Routen sein kann.

Ich habe Ihren heutigen Kommentar gelesen und eine Demo-Lösung zusammengestellt, um zu zeigen, was ich ursprünglich erwähnt habe. Die Lösung hat auch einige der ursprünglichen "Flusen" entfernt, obwohl beim Hinzufügen von Angular und Bootstrap Sie die Kernbibliotheken und jede Ableitung dort mit erhalten. Das ist der Kompromiss von mit nuGet.

Probieren Sie es aus: https://github.com/QueueHammer/AngularWithPartialViewViews

Beim Lernen Angular Ich fand das Angular-Seed-Programm ziemlich hilfreich. Besonders nachdem ich die Demos auf ihrer Website ausprobiert habe. Das Beispielprojekt ist gerade so unterschiedlich, dass es Ihnen beim Lernen hilft. Danach habe ich es mir angesehen Angular-Require-Seed, aber das ist ein anderer Beitrag. Angular Schritt für Schritt http://docs.angularjs.org/tutorial Angular = Seed: https://github.com/angular/angular-seed

17
QueueHammer

Gibt es vielleicht einen abgespeckten Ausgangspunkt, den ich verwenden sollte, wenn die VS-Vorlage eine Menge Dinge hinzufügt, die ich nicht brauche?

Diese VS-Vorlagen eignen sich gut, um die anfängliche Einrichtung und Lernkurve am Anfang zu verkürzen. Sie müssten sie jedoch an Ihre tatsächlichen Projektanforderungen anpassen.

Zum Beispiel auf dieser Site http://www.reviewstoshare.com , mein Freund, der AngularJS zusammen mit ASP.NET MVC Verwendet. Beachten Sie, dass diese Site bereits mit ASP.MVC + Jquery für die Seiteninteraktion nach Bedarf erstellt wurde.

Auf der anderen Seite hat die Site immer noch eine gewisse "Ajaxy" -Natur wie Kommentare, Abstimmungen, Markierungen usw. Nicht allzu verschieden von Stackoverflow selbst. Vor AngularJS gab es ein Durcheinander von Jquery-Plugins und -Funktionen innerhalb des Rückrufs $(document).ready(), ganz zu schweigen davon, dass der JS-Code nicht viel testbar war.

Insgesamt macht eine richtige Mischung aus beiden Ihre Website glatt und funktional.

enter image description here

Einige gute Referenzen zum Anschauen:

18
Yusubov