ASP.NET Core 2.0 Razor + Angular 4 Hybrid

Question

Ich habe eine Anwendung, die auf ASP.NET Core 2.0 mit Razor Engine (.cshtml) läuft, aber ich möchte Angular 4 in die Anwendung integrieren, um die alte Schule jQuery zu vermeiden Datenbindung von AJAX-Anrufen. Welche Schritte muss ich unternehmen, um Angular in mein bestehendes Projekt aufzunehmen?

Ich schaute auch auf KnowKoutJS, aber ich weiß nicht, ob dies sogar aktiv unterstützt wird.

EDIT:

Ich denke, was ich suche ist Schritt für Schritt Verfahren, wie Angular 4 in eine bestehende .NET-Core 2.0-Anwendung hinzuzufügen, die Razor-Engine verwendet.

Answer 1

Ich arbeite zZ an einem neuen Projekt mit eckigem 4. Ich lerne unterwegs. Ich habe mit eckigen 1.5.X entwickelt. Dies ist das erste Mal mit Winkel 4.

Hier sind meine Ergebnisse. Ich weiß nicht, warum Sie es vorziehen, nicht mit Winkelführung zu mischen. Aber Mix und Anpassung einer eckigen Route mit. NET-Anwendung ist einfach. Ich hoffe, dies wird Ihnen helfen, in eine gute Richtung zu kommen.

Zuerst Wie @ Ilya.Sulimanov sagte Angular 4 Anwendung scheint mit Routing, Gebäude (WebPack) umluftunabhängigem SPA zu sein usw.

Als nächstes Authentifizierung Implementierung ist ein bisschen Ärger mit Winkel 4 und .Net . Die .Net-Identität unterstützt standardmäßig keine eckige Authentifizierung. Ideal ist die tokenbasierte Authentifizierung. Dies muss zusätzlich zur Identität implementiert werden. Aber es ist einfach zu tun und zukunftssicher, als ob Sie eine mobile App usw. entwickeln möchten.

Andernfalls können Sie einen Hybrid-Ansatz für die Authentifizierung verwenden. Verwenden Sie einfach die Ansichtsseiten (Formularauthentifizierung) für die Anmeldung, Anmeldung und Änderung des Passworts usw. Nach der Authentifizierung leiten Sie die Benutzer zum SPA um. Verwenden Sie dann das Attribut "Autorisiert" in der gesamten API für SPA. Aber da ist ein Haken. Sie müssen HTTP-Fehlerbehandlung auf der winkligen Seite injizieren, um zu überprüfen, ob der Benutzer jedes Mal authentifiziert wird. Wenn Timeout/ausgeloggt ist, verwenden Sie den eckigen Router, um zur Anmeldeseite umzuleiten.

Punkte zu beachten,

eine feste URL für Ihre SPA verwenden. Sagen Sie www.example.com/spa Also alle Winkelrouten finden von dort statt. Beispiel: www.example.com/spa/#/home usw.

Ich bin ein bisschen bemüht, Webpack Hand in Hand mit .netcore zu arbeiten. Es scheint ein bisschen Lernkurve zu geben. Ich bin vom Schluckhintergrund.

Hoffe es hilft, Ihre Optionen zu entscheiden.

Gute Punkte zu beginnen,

UI

• http://coreui.io/angular/
• https://github.com/akveo/ng2-admin

Einige Apps [gut für Punkt Start],

• https://github.com/asadsahi/AspNetCoreSpa
• https://github.com/ChuckkNorris/SuperCoolApp
• https://github.com/emonney/QuickApp

aktualisieren

dieses https://github.com/MarkPieszak/aspnetcore-angular2-universal gefunden. Dies gibt eine gute Idee, wie man Webpack mit .net Core-Entwicklung konfigurieren kann.

Bis jetzt gibt es keine der Beispiele, die nicht die Lösung für eine einzige Lösung geben. Aber jeder von ihnen löst verschiedene Probleme in Richtung einer vollständigen Lösung.

Answer 2

Angular ist nicht die beste Wahl für eine bestimmte Integration. Sie müssen das gesamte Framework mit Routing und e.t.c verwenden. Als Ergebnis haben Sie zwei separate Anwendungen (Frontend - powered by Angular) und ASP.NET Core als Web-API-Teil nicht mehr, ohne Rasierklingen-Seite. Wenn Sie es nicht mögen, werfen Sie einen Blick auf https://vuejs.org/. Es ist viel leichter Rahmen und kann zusammen mit Rasiermesser als moderne Alternative von jquery verwendet werden