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

86

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

Wenn ich Angular verwende, bieten die MVC-Serverkonzepte noch einen Wert? Oder sollte ich die Web-API ausschließlich zum Abrufen von Daten für die eckigen HTTP-Aufrufe verwenden?

Alle Tipps, die Sie für einen ASP.NET MVC-Mitarbeiter haben, der zu Angular wechselt, sind hilfreich

asp.net-mvc angularjs asp.net-mvc-4 user2256870
quelle
4
Es würde davon abhängen, aber ich würde denken, "sollte ich die Web-API ausschließlich zum Abrufen von Daten für die eckigen HTTP-Aufrufe verwenden" ist der richtige Weg, dies zu tun.
MikeSmithDev
Hier ist ein Tutorial zum Erstellen
Levi Fuller

Antworten:

112

Reine Web-API

Früher war ich mit ASP.NET MVC ziemlich hardcore, aber seit ich Angular kennengelernt habe, sehe ich keinen Grund, warum ich ein serverseitiges Framework zur Inhaltsgenerierung verwenden würde . Pure Angular / REST (WebApi) liefert ein satteres und gleichmäßigeres Ergebnis. Es ist viel schneller und ermöglicht es Ihnen, Websites zu erstellen, die Desktop-Anwendungen sehr nahe kommen, ohne funky Hacks.

Angular hat zwar eine kleine Lernkurve, aber sobald Ihr Team diese beherrscht, können Sie in kürzerer Zeit viel bessere Websites erstellen. Dies hat hauptsächlich damit zu tun, dass Sie nicht mehr alle diese (weniger) Statusprobleme haben.

Stellen Sie sich beispielsweise ein Assistentenformular mit einem herkömmlichen serverseitigen Framework vor. Jede Seite muss validiert und separat eingereicht werden. Möglicherweise hängt der Inhalt der Seite von den Werten einer vorherigen Seite ab. Möglicherweise hat der Benutzer die Zurück-Taste gedrückt und sendet ein vorheriges Formular erneut. Wo speichern wir den Status des Kunden? Alle diese Komplikationen treten bei Verwendung von Angular und REST nicht auf.

Also ... komm rüber zur dunklen Seite ... wir haben Kekse.

Ähnliche Frage

Null
quelle
Ich bin damit einverstanden, wie schnell und reibungslos Apps über Angular entwickelt werden können. In MVC oder WebForms (ugh) verbringen Sie diese Zeit damit, Markups auszuspucken, und müssen dann ein paar Durchgänge ausführen, um Client-Code darauf zu schrauben, was sich seltsam anfühlt, arbeitsintensiv ist und aufgrund der nicht verbundenen Natur a verschwendet viel Zeit mit einfachen Dingen.
moribvndvs
2
@ Narayana; Dies bietet etwas SEO-Liebe.
null
4
Denn wenn ich eine Eigenschaft für ein bestimmtes Modell umbenenne, muss ich nicht in AngularJS nach "magischen Zeichenfolgen" suchen? Angular ist nett, aber in einer strengen typsicheren Welt von .net können Sie durch eine engere Integration die Typensicherheit von der Serverseite aus nutzen.
Sleeper Smith
5
@Sleeper Smith: Ich habe in meinem Team dieses Argument oft mit Menschen hat, aber am Ende Code Konventionen , Unit - Tests und Trennung von Bedenken bieten viel mehr als all die Typsicherheit in der Welt. Ich würde auch gerne sehen, dass JS durch etwas wie C # ersetzt wird , aber in Wirklichkeit ist das einfach nicht der Fall. Alles, was zählt, ist das Ergebnis, das Sie erzielen können. Ihre Kunden interessieren sich wahrscheinlich nicht für Ihre Codierungspräferenzen, sie möchten eine cool aussehende, reibungslos funktionierende Website und sie möchten sie schnell. Angular erledigt diesen Job.
null
1
Wenn ich beispielsweise KnockoutJS verwendet habe, habe ich eine normale ASP.NET MVC-App erstellt, und jede Ansicht hat Modelldaten vom MVC Controller empfangen. Dann würden diese Daten vom Server in JSON serialisiert und von dort aus würde KnockoutJS sie in beobachtbare Daten umwandeln, sodass ich eine bidirektionale Datenbindung erhalten würde. Und das war großartig! Aber was machen wir jetzt, da AngularJS ein eigenes Routing-System hat? Was passiert mit MVC-Routing? Verwenden wir es überhaupt? Was passiert jetzt mit der Ansicht "_Layout" und @RenderBody ()?
AlexRebula
43

AngularJS ist eher mit dem Anwendungsparadigma für einzelne Seiten verbunden und profitiert daher nicht viel von serverseitigen Technologien, die Markups rendern. Es gibt keinen technischen Grund, der Sie daran hindert, sie zusammen zu verwenden, aber im praktischen Sinne, warum sollten Sie?

Ein SPA ruft die benötigten Assets ab (JS-, CSS- und HTML-Ansichten) und wird eigenständig ausgeführt. Es kommuniziert zurück zu den Diensten, um Daten zu senden oder abzurufen. Daher ist für die Bereitstellung dieser Dienste (sowie anderer Mittel wie Authentifizierung und dergleichen) immer noch eine serverseitige Technologie erforderlich, aber die Rendering-Teile sind weitgehend irrelevant und nicht besonders nützlich, da es sich um eine Doppelarbeit handelt, außer MVC auf der Serverseite und Angular auf dem Client. Wenn Sie Angular verwenden, möchten Sie es auf dem Client erzielen, um die besten Ergebnisse zu erzielen. Sie können Angular-Post-HTML-Formulare erstellen und Teilansichten von MVC-Aktionen abrufen, aber Sie würden die besten und einfachsten Funktionen von Angular verpassen und Ihr Leben schwerer machen.

MVC ist ziemlich flexibel und kann verwendet werden, um Anrufe von einer SPA-Anwendung aus zu bearbeiten. WebAPI ist jedoch feiner abgestimmt und für solche Dienste etwas einfacher zu verwenden.

Ich habe eine Reihe von AngularJS-Anwendungen geschrieben, darunter einige, die von bereits vorhandenen WebForms- und MVC-Anwendungen migriert wurden, und der ASP.NET-Aspekt entwickelt sich zu einer Plattform für die Bereitstellung der AngularJS-App als eigentlichen Client und für das Hosting der Anwendungsschicht Der Client kommuniziert über REST (über WebAPI) mit. MVC ist ein gutes Framework, befindet sich jedoch normalerweise ohne Arbeit in solchen Anwendungen.

Die ASP.NET-Anwendung wird zu einer weiteren Ebene der Infrastruktur, deren Zuständigkeiten auf Folgendes beschränkt sind:

  • Hosten Sie den Abhängigkeitscontainer.
  • Verdrahten Sie die Implementierungen der Geschäftslogik mit dem Container.
  • Richten Sie Asset-Bundles für JS und CSS ein.
  • Host-WebAPI-Dienste.
  • Erzwingen Sie die Sicherheit, führen Sie die Protokollierung und Diagnose durch.
  • Schnittstelle zu Anwendungscaches für die Leistung.

Eine weitere großartige Sache an einem SPA ist, dass es die Bandbreite Ihres Teams erhöhen kann. Eine Gruppe kann die Dienste sprengen, während die andere in der Client-App liegt. Da Sie REST-Services problemlos stubben oder verspotten können, können Sie eine voll funktionsfähige Client-App für Mock-Services verwenden und diese nach Abschluss gegen die echten austauschen.

Sie müssen im Voraus in Angular investieren, aber es zahlt sich aus. Da Sie bereits mit MVC vertraut sind, haben Sie einen Einblick in einige der Kernkonzepte.

moribvndvs
quelle
Ok, ich möchte mich für Angular entscheiden und über ein .NET-Back-End verfügen, um meine Produktivität mit API, Entity Framework, Sicherheit usw. zu erhalten. Benötigen meine Seiten noch eine serverseitige Master-Child-Konfiguration / -Layout? Was verwende ich dafür - WebForms (nein - dann bekomme ich den Ansichtsstatus), MVC, ASP.NET-Webseiten oder etwas anderes?
Sean
1
Technisch gesehen benötigen Sie keine Serverseiten, Layoutseiten usw. Nur reines HTML reicht aus. Abhängig von der Größe und Komplexität Ihrer Anwendung möchten Sie Ihre Angular-App möglicherweise nach Funktionen in mehrere unterschiedliche Anwendungen aufteilen (und Sie können mithilfe eines gemeinsamen Navigationsgeräts oder einer anderen Funktion eine Verknüpfung von einer App zur anderen herstellen). In diesem Fall können Sie eine Layoutseite verwenden, um die Dinge trocken und konsistent zu halten. Darüber hinaus verwenden Sie wahrscheinlich Asset-Bundles für CSS oder Skripte und haben Stammseiten, die Razor sind oder was auch immer diese Dinge gut zusammenbringen würde.
moribvndvs
1
Ich benutze ASP.NET MVC seit drei Jahren für mindestens 8 große Projekte und habe mich an dieses feine, ausgereifte serverseitige Framework gewöhnt. Ich weiß jedoch, wie wichtig SPAs sind, und ich liebe Angular. Deshalb habe ich mich jetzt für Mini-SPAs oder Hybrid-Apps entschieden ... oder für "SPA-Silos", wie Miguel Castro sie nannte. Meine Frage ist - Was ist mit Autorisierung und Authentifizierung? Ich weiß, dass ASP.NET MVC diese Aufgabe erheblich erleichtert. Wie geht das ohne ASP.NET MVC?
AlexRebula
1
@AlexRebula Ich denke, die Frage ist eher eine Frage, wie Sie die Authentifizierung in WebApi vs MVC durchführen möchten. Normalerweise handelt es sich um Cookies (Sie können sogar FormsAuth- oder ASP.NET-Identitätscookies mit WebApi verwenden) oder Headern (OAuth usw.). Beide Ansätze werden sowohl von der Web-API als auch von Angular vollständig unterstützt, Sie müssen jedoch bei der Implementierung eine Auswahl treffen. Es ist schwierig, Ihnen eine genauere Antwort zu geben, ohne mehr Details darüber zu haben, was Sie tun und was Ihre spezifischen Ziele sind.
moribvndvs
@ HackedByChinese Ich verstehe. Und jetzt denke ich, es wäre wirklich großartig, wenn ich mehr Zeit hätte, mich mehr mit der Web-API zu beschäftigen ...
AlexRebula
6

Dies hängt von dem Projekt ab, an dem Sie arbeiten.

Wenn angularJS etwas Neues für Sie ist, würde ich lieber ein kleines Projekt mit geringem Risiko / Druck auswählen, um loszulegen und sicherzustellen, dass Sie lernen, wie man Dinge richtig macht (ich habe viele Projekte gesehen, bei denen Angularjs aufgrund von Druck, Fristen ... falsch verwendet wurde). Zeitmangel, um es richtig zu lernen, z. B. mit JQuery oder Zugriff auf das DOM in den Controllern usw.).

Wenn es sich bei dem Projekt um ein Projekt auf der grünen Wiese handelt und Sie Erfahrung mit AngularJS haben, ist es sinnvoll, ASP.net MVC aufzugeben und auf der Serverseite auf reines REST / WebAPI zu setzen.

Wenn es sich um ein vorhandenes Projekt handelt, können Sie eine komplexe Teilmenge von Funktionen abrufen und diese Seite als separate AngularJS-App erstellen (z. B. besteht Ihre App aus einer großen Anzahl von Standard-Razor-basierten Seiten mit einfacher / mittlerer Komplexität, aber Sie benötigen einen erweiterten Editor / Seite, das könnte das Zielstück sein, das mit AngularJS erstellt werden soll).

Braulio
quelle
1
Ich mag Ihre Antwort und stimme den meisten Aussagen zu. Es gibt jedoch eine Sache, die mich beunruhigt. ASP.NET MVC ist ein sehr schönes und ausgereiftes serverseitiges Webframework mit großartigen integrierten Funktionen wie Authentifizierung und Autorisierung. Sie haben geschrieben, dass man ASP.NET MVC aufgeben könnte, um sich für reines REST / WebAPI zu entscheiden. Jetzt frage ich mich: Ist die Authentifizierung und Autorisierung so einfach wie in ASP.NET MVC? Ganz zu schweigen davon, wie einfach es ist, OAuth für Google usw. zu implementieren. Meine Frage ist also, wie einfach es ist, all diese Aufgaben mit REST / WebAPI zu erledigen. Ich würde also in Betracht ziehen, ein Mini-SPA zu haben.
AlexRebula
In unserem Fall richten wir ein Token in jeder http-Anforderung ein (http standardmäßig an einem einzigen Ort, um es hinzuzufügen). Verwenden Sie ASP .net MVC / Web-API AuthorizeAttribute, um das Token und die Berechtigungen zu überprüfen. Sie können dieses Token auch innerhalb der Web-API-Methode abrufen und ausführen feinere Sicherheitsüberprüfung. Wenn Sie OAuth benötigen, gibt es auch Bibliotheken auf der Winkelseite, die Ihnen dabei helfen.
Braulio
0

Sie können das Angular-Framework für die Front-End-Entwicklung verwenden, dh um Ansichten zu erstellen. Es bietet Ihnen eine robuste Architektur und sobald Sie dies gelernt haben, werden Sie feststellen, dass es Vorteile gegenüber der Rasiermesser-Ansichts-Engine von Asp.net MVC bietet. Um Daten abzurufen, müssen Sie WebAPIs verwenden. Jetzt unterstützt das ASP.Net MVC-Projekt sofort sowohl WebAPI- als auch MVC-Controller. Sie können sich auf den folgenden Link beziehen, der mit der Entwicklung von Angular- und ASP.Net MVC-Anwendungen beginnt.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

Derzeit sind zwei Frameworks für die Entwicklung von UI-Komponenten für Winkelanwendungen verfügbar. Ich habe beide Frameworks in einem der Winkelprojekte verwendet, an denen ich gearbeitet habe.

Material https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

Rinoy
quelle