Wir haben eine große bereits bestehende MVC 5 ASP.NET 4.5.1-Webanwendung. Das Kernkonzept, da es so viele Bereiche umfasst, ist, dass jede Seite ihre eigene Anwendung ist. Alle vorhandenen Seiten verwenden außer JQuery, regulärem JavaScript und Handlebars-Templating nichts.
Angular 2 scheint sehr aufregend zu sein, aber ich versuche herauszufinden, wie genau es mit unserer Philosophie funktionieren wird. Zum Beispiel unten ist, wie unser mvc-Routing unsere separaten Apps zur Zeit anbietet ...
Bereich / Controller1 / Aktion1 (App1)
Bereich / Controller1 / Aktion2 (App2)
Bereich / Controller2 / Aktion1 (App3)
usw.
Dann haben wir separate API-Controller, die unsere JSON-Daten bereitstellen. Von den anfänglichen Lesungen / Erkenntnissen von Angular 2 kann ich nicht den Kopf darüber verdecken, wie ich separate Apps bedienen würde (da alles, was ich finden kann, immer das index.html als Heim hat, was sinnvoll ist, wenn Sie wirklich ein SPA machen ). Im Wesentlichen versuchen wir, die Entwicklung mit mehreren SPAs fortzuführen, die über diese bestehende Struktur bereitgestellt werden, müssen nicht ältere "Legacy" -Apps auf der Site ändern, um Angular zu verwenden, bis sie einzeln überarbeitet werden, und herausfinden, wie das Routing effektiv durchgeführt werden kann.
Routing:
Also ein Beispiel in meinem Kopf wäre
Area/Controller/Action(App)/routeUrlstuff
Ich möchte immer noch in der Lage sein, sie den erweiterten Link kopieren und einfügen zu lassen und mit dem eckigen Routing zurück zu bringen, anstatt vielleicht nur diese URL abzuschneiden und die eckige App am Ausgangspunkt zu starten.
Ich habe wirklich keinen Code zu zeigen, da ich versuche, ein aktuelles Projekt als Beweis des Konzepts zu machen, dass die Verwendung von Angular 2 von nun an für die Anwendung geeignet ist.
Ich habe kürzlich an einem Projekt gearbeitet, das ähnliche Bedenken hatte. Wir haben über die Implementierung mehrerer SPAs nachgedacht, aber am Ende entschieden wir uns, ein SPA mit mehreren Modulen zu implementieren.
Ich denke, dass wir diese Lösung auch für mehrere SPAs erweitern können. Schauen wir uns einen einfachen Anwendungsfall an:
Sie möchten 2 SPAs erstellen
Sie haben folgende MVC-Controller-Aktionen, die Sie für die oben genannten SPAs verwenden möchten:
Die MVC-Controller-Aktionen 1 und 2 sollen mit SPA UserApp verwendet werden, Routing zu AddUser- und ManageUser-Modulen. Ebenso müssen die Controller-Aktionen 3 und 4 mit der SPA ProductApp verwendet werden, die zu AddProduct- und ManageProduct-Modulen geleitet wird.
Vom Konzept her sieht das so aus:
Mehrere SPA mit mehreren Modulen
Ich würde das Typoskript auf Angular CLI transpilieren und bündeln. Wenn Ihr Projekt komplex wird und Sie der Ansicht sind, dass der angulare Client Ihre Bündelungsbedürfnisse nicht bewältigen kann, können Sie die Konfiguration des Webpacks immer auswerfen.
Es gibt einen wirklich guten Blog von Yakov Fain < Sie können nach dem Konfigurieren von CLI suchen, um mehrere SPAs zu bündeln. Grundsätzlich werden Sie angular cli konfigurieren, um Ihre SPAs an verschiedene dist-Ordner auszugeben. In unserem Fall nehmen wir an, dass dies sein wird:
Um verschiedene SPAs auf verschiedenen Seiten zu laden, müssen Sie für jeden SPA verschiedene Layouts oder Sublayouts erstellen.
Sagen wir: _userLayout.cshtml für UserApp
In _userLayout.cshtml müssen Sie Ihre Skripte aus dem Ordner userAppDist laden
In etwa so:
%Vor%Ähnlich müssen Sie das Layout für die anderen SPA-Ladeskripts von productAppDist implementieren. Sagen wir _productLayout.cshtml
Um die Dinge einfach zu halten, können Sie Ihre Serverrouten an eckige SPA-Modulrouten anpassen. Andernfalls müssen Sie HashLocationStrategy auf eckige App implementieren. Angenommen, Sie gehen mit der einfachen Option, haben Sie folgende Ansichten:
AddUser.chtml und ManageUser.cshtml verwenden _userLayout und sehen wie folgt aus:
%Vor%Dies zielt auf UserApp SPA
abAddProduct.cshtml und ManageProduct.cshtml verwenden _productLayout und sehen wie folgt aus:
%Vor%Dies zielt auf ProductApp SPA ab
Die MainAppComponent Vorlagen für diese Apps haben
%Vor%wird basierend auf den Routen vom Server zu den eckigen Modulrouten aufgelöst. Jetzt müssen Sie die Routen in Ihren eckigen Apps abgleichen
Beispiel für UserAppRoutingModule:
%Vor%Ebenso müssen Sie passende Routen für die Produktseiten im Produkt App SPA definieren.
Hoffe, das hilft.
Für den obigen Anwendungsfall gibt es folgende Controller:
UserController mit einer Indexaktion, die auf user / index.cshtml (mit _userLayout) mit dem folgenden Code zeigt:
%Vor%ProductController mit einer Indexaktion, die auf product / index.cshtml verweist (mit _productLayout), mit folgendem Code:
%Vor%Sie müssen auch Ihre routeConfig.cs so anpassen, dass sie Folgendes enthält:
%Vor%Die obigen Änderungen erzwingen folgendes Verhalten:
User / index.chtml spinnt den Angular User SPA und dann werden eckige Routen eingefügt. Sie werden ein ähnliches Verhalten von product route und product / index.cshtml beobachten.
Endgültige Routenkonfiguration für eckigen SPA-Benutzer:
%Vor%Die erste Route ist standardmäßig für die Benutzer-App. Dies entspricht der MVC-Route myapp / user. Die restlichen Routen müssen nicht mit den MVC-Routen übereinstimmen. Sie müssen eine ähnliche Konfiguration auch auf Produkt-SPA vornehmen.
Aus der Perspektive eines Lösungsarchitekten würde ich Änderungen sowohl auf der Serverseite als auch auf der Clientseite empfehlen.
Um mit zu sein, sagen wir mal, es gibt 3 Apps Bereich / Controller1 / Aktion1 (App1)
Bereich / Controller1 / Aktion2 (App2)
Bereich / Controller2 / Aktion1 (App3)
Entwickeln Sie angular SPA für main -Anwendung. Die Ansicht von der Hauptanwendung hat Links zu Controller1. Dies sollte eine Route in Ihrem eckigen SPA sein. Controller1 / Action1 sollte jedoch eine Route sein, die in angular SPA nicht verfügbar ist. Es muss direkt vom Server mithilfe von HTML-Verweis-Links angefordert werden. Dies bedeutet im Wesentlichen Neuladen der Seite.
Wenn die Entwicklung für verschiedene SPA abgeschlossen ist, generieren Sie den Produktions-Build mit komprimiertem JS und index.html.
Platzieren Sie die verschiedenen SPA in ihren jeweiligen Ordnern. Zum Beispiel ist / home / user / proj / Controller1 / Action1 ein Ordner mit unabhängigem SPA
%Vor%Konfigurieren Sie Ihren Web- / Anwendungsserver. Zum Beispiel in nodejs. (IIS wird etwas ähnliches haben)
%Vor%wobei $ 1 den Ziel-Controller enthält und $ 2 enthält die Zielaktion
Die index.html von / area / target Controller / target Aktion wird abgerufen und diese Action ist ein eigenständiges SPA.
Unterschiedliche Teams können mit diesem Ansatz an Main, App1, App2 und App3 als eigenständige Ergebnisse arbeiten.
Die Idee besteht darin, das MVC-Routing so zu konfigurieren, dass alle möglichen URLs für jeden Controller den gleichen entsprechenden Ansichten zugeordnet werden, d. h .:
%Vor% Jeder Index.cshtml hat seinen eigenen Skriptbereich, der auf die entsprechende eckige App verweist. Also, wenn Sie URL app2/angular/dashboard/page einfügen, wird es auch den entsprechenden Controller und View ( App2/Index.cshtml ) routen, und wenn angular router startet, öffnet sich der Rest der URL /angular/dashboard/page page.
Passen Sie dann die Basis-URL und das Winkel-Routing für jede App an, was von Ihrer App-Struktur abhängt.
Sie müssen das Routing in Angular nicht für die gesamte Site durchführen. Wenn Sie bereits auf der ASP.NET MVC-Seite Routing durchführen, behalten Sie es einfach so bei. Stellen Sie sich vor, dass es sich bei jeder Seitenanforderung um eine eigene eckige Anwendung handelt. Das bedeutet, dass jede Seite eine eigene ng-App im Körper hat, und sie enthält ihre eigene angular.js und was auch immer diese app.js ist. app.js initialisiert angular und richtet die Controller / Komponenten ein, die Sie nur für diese Seite verwenden. Jede Seite würde das tun. Wenn Sie innerhalb jeder App mehrere Ansichten haben, können Sie für genau diese Ansichten nur für diese App Winkelrouting verwenden. Wenn eine Person auf einen neuen App-Link klickt, verwendet sie das serverseitige ASP.NET-Routing, um der neuen Seite die Intuition zuzuweisen, das Inter-Page-Routing auf der Clientseite nur für diese App einzurichten und die von dieser App verwendeten Controller einzurichten / p>
Ich bin mir nicht sicher, ob ich das ganze Bild bekommen habe, aber ich werde versuchen, Ihnen zu helfen, indem ich Ihnen sage, wie ich mehrere SPAs mit Angular mache.
In _Layout.chtml erstellen Sie folgendes
%Vor%In Home.chtml mit dem obigen Layout-Set schreiben Sie folgendes
%Vor%In HomeController.cs erstellen Sie die Indexaktion, die das obige
zurückgibtFür das Routing und mehrere Module ist angular sehr gut. Sehen Sie sich einen anderen Beispielcode an:
CreateAccount.chtml mit dem obigen Layout-Set.
%Vor%AccountCreateViewModel.js:
%Vor%Jedes Winkelmodul hat seine eigene Routing- und Geschäftslogik, die sich von anderen Modulen vollständig unterscheidet. Jeder Bereich mit seinen mvc-Aktionen (vollständige Seite neu laden) und Web-API-Methoden (JSON)) ist jetzt ein SPA-Silo auf eine sehr gepflegte Weise geschrieben.
Tags und Links asp.net angular asp.net-mvc-5 angular2-routing
