MVC 5 和 Angular 2 多個“孤立”應用程序結建構議

我們有一個已經存在的大型 MVC 5 ASP.NET 4.5.1 Web 應用程序。由於它涵蓋了很多領域，核心概念是每個頁面都是它自己的應用程序。除了 JQuery、正常 Javascript 和 Handlebars 模板之外，所有現有頁面都沒有使用任何東西。

Angular 2 看起來非常令人興奮，但我正試圖弄清楚它將如何與我們的理念相結合。例如，下面是我們的 mvc 路由目前如何為我們的單獨應用程序提供服務…

區域/Controller1/Action1(App1)

區域/Controller1/Action2(App2)

區域/Controller2/Action1(App3)

等等

然後我們有單獨的 API 控制器來提供我們的 JSON 數據。從 Angular 2 的最初閱讀/學習開始，我似乎無法理解如何為單獨的應用程序提供服務（因為我能找到的所有東西總是希望 index.html 作為首頁，如果你真的在做 SPA，這很有意義）。本質上，我們正​​在嘗試繼續開發通過這種現有結構提供的多個 SPA，在單獨重新訪問它們之前，不必更改站點上較舊的“遺留”應用程序以使用 Angular，並弄清楚如何有效地進行路由。

路由：所以我腦海中的一個例子是 Area/Controller/Action(App)/routeUrlstuff

我仍然希望能夠讓他們複製和粘貼該擴展連結並使用角度路由返回，而不是僅僅切斷該 URL 並在其起點啟動角度應用程序。

我真的沒有任何程式碼要顯示，因為我正在嘗試做一個目前項目作為概念證明，從現在開始使用 Angular 2 對應用程序是可行的。

我最近在一個有類似問題的項目上工作。我們確實考慮過實施多個 SPA，但最終決定實施一個具有多個模組的 SPA。

我認為我們也可以將該解決方案擴展到多個 SPA。讓我們看一個簡單的案例：

您要創建 2 個 SPA

1. UserApp 包含 2 個模組（AddUser 和 ManageUser）
2. ProductApp 包含 2 個模組（AddProduct 和 ManageProduct）

您有以下要用於上述 SPA 的 MVC 控制器操作：

1. 我的應用程序/使用者/添加
2. 我的應用程序/使用者/管理
3. 我的應用程序/產品/添加
4. 我的應用程序/產品/管理

MVC 控制器操作 1 和 2 將與 SPA UserApp 一起使用，路由到 AddUser 和 ManageUser 模組。同樣，控制器操作 3 和 4 將與 SPA ProductApp 一起使用，路由到 AddProduct 和 ManageProduct 模組。

從概念上講，這看起來像：

具有多個模組的多個 SPA

角度捆綁：

我會將打字稿的轉譯和捆綁留給 Angular CLI。如果您的項目變得複雜並且您覺得 angular cli 無法滿足您的捆綁需求，您可以隨時彈出 webpack 配置。

Yakov Fain有一個非常好的部落格，您可以查找配置 cli 以捆綁多個 SPA。基本上，您將配置 angular cli 以將您的 SPA 輸出到不同的 dist 文件夾。在我們的例子中，讓我們假設這些將是：

1. 用於 UserApp SPA 的 userAppDist
2. ProductApp SPA 的 productAppDist

MVC 佈局：

要在不同頁面上傳入不同的 SPA，您必須為每個 SPA 創建不同的佈局或子佈局。

假設：UserApp 的 _userLayout.cshtml

在 _userLayout.cshtml 中，您必須從 userAppDist 文件夾載入腳本

像這樣的東西：

<main class="layout">
   <base href="/">
</main>

@*Now load scripts from userAppDist*@

同樣，您必須為來自 productAppDist 的其他 SPA 載入腳本實現佈局。比方說 _productLayout.cshtml

路線：

為了簡單起見，您可以將伺服器路由與角度 SPA 模組路由相匹配。否則，您將不得不在 Angular App 上實現 HashLocationStrategy。假設您使用簡單選項，您有以下視圖：

1. myApp/user/add –> AddUser.cshtml
2. myApp/user/manage –> ManageUser.cshtml
3. myApp/product/add –> AddProduct.cshtml
4. myApp/product/manage –> ManageProduct.cshtml

AddUser.chtml 和 ManageUser.cshtml 將使用 _userLayout 並且看起來像：

<user-app></user-app>

這是針對 UserApp SPA

AddProduct.cshtml 和 ManageProduct.cshtml 將使用 _productLayout 並且看起來像：

<product-app></product-app>

這是針對 ProductApp SPA

這些應用程序的 MainAppComponent 模板將具有

<router-outlet></router-outlet>

它將根據來自伺服器的路由解析為角度模組路由。現在你必須在你的角度應用程序中匹配路線

UserAppRoutingModule 範例：

const routes: Routes = [
 { path: 'myApp/user/add', loadChildren: 'userApp/modules/add-user/add-user.module#AddUserModule' },
 { path: 'myApp/user/manage', loadChildren: 'userApp/modules/manage-user/manage-user.module#ManageUserModule' }
];

同樣，您必須在產品 App SPA 中為產品頁面定義匹配路由。

希望這可以幫助。

更新：配置以避免多個路由文件

對於上述案例，將有以下控制器：

具有指向 user/index.cshtml（使用 _userLayout）的索引操作的 UserController 具有以下程式碼：

<user-app></user-app>

具有指向 product/index.cshtml 的索引操作的 ProductController（使用 _productLayout）具有以下程式碼：

<product-app></product-app>

您還需要修改您的 routeConfig.cs 以包括以下內容：

routes.MapRoute("user", "user/{*catchall}", new { controller = "User", action = "Index", id = UrlParameter.Optional });
routes.MapRoute("product", "product/{*catchall}", new { controller = "Product", action = "Index", id = UrlParameter.Optional });

以上更改將強制執行以下行為：

1. 到 myapp/user 的路由 –> 將轉到 user/index.cshtml
2. 此外，myapp/user/blah/blah 之後的任何擴展路由仍將解析為 user/index.cstml

User/index.chtml 啟動 Angular User SPA，然後 Angular 路由將啟動。您將在 product 路由和 product/index.cshtml 中觀察到類似的行為。

角度 SPA 使用者的最終路由配置：

const routes: Routes = [
   { path: 'user', redirectTo: 'user/add' },
   { path: 'user/add', loadChildren: 'userApp/modules/add-user/add-user.module#AddUserModule' },
   { path: 'user/manage', loadChildren: 'userApp/modules/manage-user/manage-user.module#ManageUserModule' }
 ];

第一條路線是使用者應用程序的預設路線。這映射到 MVC 路由 myapp/user。其餘路由不需要匹配 MVC 路由。您還必須在產品 SPA 上進行類似的配置。

引用自：https://stackoverflow.com/questions/43459572