MVC 5 & Angular 2 Multiple “Siloed” Apps Structure Advisement

We have a large already existing MVC 5 ASP.NET 4.5.1 web application. The core concept since there are so many areas it covers, is that each page was it's own application. All the existing pages don't use anything besides JQuery, regular Javascript, and Handlebars templating.

我们有一个已经存在的大型MVC 5 ASP.NET 4.5.1 Web应用程序。由于它涵盖了如此多的领域，核心概念是每个页面都是它自己的应用程序。除了JQuery，常规Javascript和Handlebars模板之外，所有现有页面都不使用任何东西。

Angular 2 seems very exciting, but I'm trying to figure out how exactly it will work with our philosophy. For example below is how our mvc routing serves up our separate apps currently...

Angular 2看起来非常令人兴奋，但我正在试图弄清楚它将如何与我们的理念一致。例如，下面是我们的mvc路由当前如何提供我们的单独应用程序...

Area/Controller1/Action1(App1)

区/控制器1 /措施1（应用）

Area/Controller1/Action2(App2)

区/控制器1 /措施2（应用）

Area/Controller2/Action1(App3)

区/控制器2 /措施1（App3的）

etc.

等等

Then we have separate API controllers to serve up our JSON data. From initial readings/learnings of Angular 2 I can't seem to wrap my head around how I would serve separate apps (since everything I can find always wants the index.html as the home, which makes sense if you really are making a SPA). Essentially, we're trying to continue development with multiple SPAs served up via this existing structure, not have to change older "legacy" apps on the site to use Angular until they are revisited individually, and figure out how to do the routing effectively.

然后我们有单独的API控制器来提供我们的JSON数据。从Angular 2的初步读物/学习开始，我似乎无法理解我将如何为不同的应用程序提供服务（因为我能找到的所有内容总是希望将index.html作为主页，如果你真的在制作SPA，这是有意义的）。从本质上讲，我们正在尝试通过现有结构提供多个SPA来继续开发，而不必更改站点上较旧的“遗留”应用程序以使用Angular，直到它们被单独重新访问，并找出如何有效地进行路由。

Routing: So an example in my head would be Area/Controller/Action(App)/routeUrlstuff

路由：所以我脑子里的一个例子是Area / Controller / Action（App）/ routeUrlstuff

I still want to be able to let them copy and paste that extended link and be brought back using the angular routing, instead of maybe just cutting off that URL and starting the angular app at it's starting point.

我仍然希望能够让他们复制并粘贴扩展链接并使用角度路由返回，而不是仅仅切断该URL并在其起始点启动角度应用程序。

I don't really have any code to show, as I'm attempting to do a current project as a proof of concept that using Angular 2 from now on is viable for the application.

我真的没有任何代码可以显示，因为我正在尝试将当前项目作为概念证明，从现在开始使用Angular 2对于应用程序是可行的。

5 个解决方案

#1

I recently worked on a project which had similar concerns. We did thought about implementing multiple SPAs but in the end decided to implement one SPA with multiple modules.

我最近参与了一个有类似问题的项目。我们考虑过实施多个SPA，但最终决定实施一个具有多个模块的SPA。

I think we can extend that solution for multiple SPAs as well. Let’s look at a simple use case:

我认为我们也可以为多个SPA扩展该解决方案。让我们看一个简单的用例：

You want to create 2 SPAs

您想要创建2个SPA

1. UserApp containing 2 modules (AddUser and ManageUser)
2. UserApp包含2个模块（AddUser和ManageUser）
3. ProductApp containing 2 modules (AddProduct and ManageProduct)
4. ProductApp包含2个模块（AddProduct和ManageProduct）

You have following MVC controller actions that you want to use for above SPAs:

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

1. myApp/user/add
2. 对myApp /用户/添加
3. myApp/user/manage
4. 对myApp /用户/管理
5. myApp/product/add
6. 对myApp /产品/加
7. myApp/product/manage
8. 对myApp /产品/管理

MVC controller actions 1 and 2 are to be used with SPA UserApp, routing to AddUser and ManageUser modules. Similarly, controller actions 3 and 4 are to be used with SPA ProductApp, routing to AddProduct and ManageProduct modules.

MVC控制器操作1和2将与SPA UserApp一起使用，路由到AddUser和ManageUser模块。同样，控制器操作3和4将与SPA ProductApp一起使用，路由到AddProduct和ManageProduct模块。

Conceptually this looks like:

从概念上讲，这看起来像：

Multiple SPAs with multiple modules

具有多个模块的多个SPA

Angular Bundling:

I would leave the typescript transpiling and bundling to Angular CLI. If your project gets complex and you feel that the angular cli can’t handle your bundling needs, you can always eject webpack configuration.

我会留下打字稿并将其捆绑到Angular CLI。如果您的项目变得复杂并且您认为角度cli无法满足您的捆绑需求，您可以随时弹出webpack配置。

There is a really good blog from Yakov Fain that you can look for configuring cli to bundle multiple SPAs. Basically you will be configuring angular cli to output your SPAs to different dist folders. In our case, let’s assume that these will be:

Yakov Fain有一个非常好的博客，您可以查找配置cli以捆绑多个SPA。基本上，您将配置角度cli以将您的SPA输出到不同的dist文件夹。在我们的例子中，我们假设这些将是：

1. userAppDist for UserApp SPA
2. UserApp SPA的userAppDist
3. productAppDist for ProductApp SPA
4. ProductApp SPA的productAppDist

MVC Layouts:

To Load different SPAs on different pages, you will have to create different layouts or sub-layouts for each SPA.

要在不同页面上加载不同的SPA，您必须为每个SPA创建不同的布局或子布局。

Let’s Say: _userLayout.cshtml for UserApp

我们来说：UserApp的_userLayout.cshtml

Inside _userLayout.cshtml, you will have to load your scripts from userAppDist folder

在_userLayout.cshtml中，您必须从userAppDist文件夹加载脚本

Something like this:

像这样的东西：

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

@*Now load scripts from userAppDist*@

Similarly you will have to implement layout for the other SPA loading scripts from productAppDist. Let’s say _productLayout.cshtml

同样，您必须从productAppDist实现其他SPA加载脚本的布局。让我们说_productLayout.cshtml

Routes:

To keep things simple you can match your server routes to angular SPA module routes. Otherwise, you will have to implement HashLocationStrategy on angular App. Assuming you are going with the simple option, you have following views:

为简单起见，您可以将服务器路由与角度SPA模块路由相匹配。否则，您必须在angular App上实现HashLocationStrategy。假设您使用简单选项，您有以下视图：

1. myApp/user/add --> AddUser.cshtml
2. myApp / user / add - > AddUser.cshtml
3. myApp/user/manage --> ManageUser.cshtml
4. myApp / user / manage - > ManageUser.cshtml
5. myApp/product/add --> AddProduct.cshtml
6. myApp / product / add - > AddProduct.cshtml
7. myApp/product/manage --> ManageProduct.cshtml
8. myApp / product / manage - > ManageProduct.cshtml

AddUser.chtml and ManageUser.cshtml will use _userLayout and will look like:

AddUser.chtml和ManageUser.cshtml将使用_userLayout，如下所示：

<user-app></user-app>

This is targeting UserApp SPA

这是针对UserApp SPA

AddProduct.cshtml and ManageProduct.cshtml will use _productLayout and will look like:

AddProduct.cshtml和ManageProduct.cshtml将使用_productLayout，如下所示：

<product-app></product-app>

This is targeting ProductApp SPA

这是针对ProductApp SPA

The MainAppComponent templates for these Apps will have

这些应用程序的MainAppComponent模板将具有

<router-outlet></router-outlet>

which will resolve to the angular module routes, based on the routes from the server. Now you have to match the routes in you angular Apps

它将根据来自服务器的路由解析为角度模块路由。现在，您必须匹配角度应用程序中的路线

Example for UserAppRoutingModule:

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' }
];

Similarly, you will have to define matching routes for the product pages in product App SPA.

同样，您必须在产品App SPA中定义产品页面的匹配路线。

Hope this helps.

希望这可以帮助。

Update: Configuration to avoid multiple route files

For above use case, there will be following controllers:

对于上述用例，将有以下控制器：

UserController with index action pointing to user/index.cshtml (using _userLayout) having following code:

UserController，索引操作指向user / index.cshtml（使用_userLayout），代码如下：

 <user-app></user-app>

ProductController with index action pointing to product/index.cshtml (using _productLayout) having following code:

ProductController，索引操作指向product / index.cshtml（使用_productLayout），代码如下：

<product-app></product-app>

You will also need to modify you routeConfig.cs to include following:

您还需要修改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 });

Above changes will force following behaviour:

以上更改将强制执行以下操作：

1. Routes to myapp/user --> will go to user/index.cshtml
2. 路由到myapp / user - >将转到user / index.cshtml
3. Also, any extended routes after myapp/user/blah/blah will still resolve to user/index.cstml
4. 此外，myapp / user / blah / blah之后的任何扩展路由仍将解析为user / index.cstml

User/index.chtml spins up Angular User SPA and then angular routes will kick in. You will observe similar behavior from product route and product/index.cshtml as well.

用户/ index.chtml旋转Angular User SPA，然后角度路线将启动。您将在产品路线和product / index.cshtml中观察到类似的行为。

Final route configuration on angular SPA user:

角度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' }
  ];

The first route is default for user app. This maps to the MVC route myapp/user. Rest of the routes are not required to match MVC routes. You will have to do similar configuration on product SPA as well.

第一条路线是用户应用的默认路线。这映射到MVC路由myapp / user。其余路线不需要匹配MVC路线。您还必须在产品SPA上进行类似的配置。

#2

From a solution architect perspective, I would recommend changes both on server side and client side.

从解决方案架构师的角度来看，我建议在服务器端和客户端进行更改。

To being with, lets say there are 3 apps Area/Controller1/Action1(App1)

和我一起，假设有3个应用程序区域/ Controller1 / Action1（App1）

Area/Controller1/Action2(App2)

区/控制器1 /措施2（应用）

Area/Controller2/Action1(App3)

区/控制器2 /措施1（App3的）

1. Identify SPA's

Develop angular SPA for main application. The view from the main application has links to Controller1. This should be a route in your angular SPA. However Controller1/Action1 should be a route not available in angular SPA. It needs to be requested directly from the server using html href links. This essentially means page reload.

为主要应用开发角度SPA。主应用程序中的视图具有到Controller1的链接。这应该是您的角度SPA中的路线。但是，Controller1 / Action1应该是角度SPA中不可用的路径。需要使用html href链接直接从服务器请求它。这实际上意味着页面重新加载。

2. Project Locations on Server

Once development is complete for different SPA's, generate the production build with compressed JS and index.html.

一旦针对不同的SPA完成开发，使用压缩的JS和index.html生成生产构建。

Place the different SPA under their respective folders. For example, /home/user/proj/Controller1/Action1 is a folder which has independent SPA

将不同的SPA放在各自的文件夹下。例如，/ home / user / proj / Controller1 / Action1是具有独立SPA的文件夹

proj
-- Controller 1
---- Action 1
---- Action 2
-- Controller 2
---- Action 1

3. Webserver Configuration

Configure your web/app server. For example in nodejs. (IIS will have something similar)

配置您的Web / app服务器。例如在nodejs中。 （IIS会有类似的东西）

# For Action SPA
location = /area/(.*)/(.*) {
  root /home/user/proj/$1/$2;
}
# For main SPA
location = / {
  root /home/user/proj;
}

where $1 will contain target Controller and $2 will contain target Action

其中$ 1将包含目标Controller，$ 2将包含目标Action

The index.html from /area/target Controller/target Action will be fetched and these Action are independent SPA of their own.

将从/ area / target Controller / target Action获取index.html，这些Action是他们自己的独立SPA。

4. Summary

Different teams can work on Main, App1, App2 and App3 as independent deliverables with this approach.

使用这种方法，不同的团队可以使用Main，App1，App2和App3作为独立的可交付成果。

#3

The idea is to configure MVC routing to map all possible urls for each controller to the same corresponding views i.e.:

我们的想法是配置MVC路由，将每个控制器的所有可能的URL映射到相同的相应视图，即：

routes.MapRoute("app1", "app1/{*catchall}", new {controller = "App1", action = "Index", id = UrlParameter.Optional});
routes.MapRoute("app2", "app2/{*catchall}", new {controller = "App2", action = "Index", id = UrlParameter.Optional});

Each Index.cshtml will have its own script section pointing to corresponding angular app. So if you paste URL app2/angular/dashboard/page it will route too corresponding controller and view (App2/Index.cshtml), then when angular router kicks in it will open the rest part of URL /angular/dashboard/page page.

每个Index.cshtml都有自己的脚本部分指向相应的角度应用程序。因此，如果您粘贴URL app2 / angular / dashboard / page，它将路由太多相应的控制器和视图（App2 / Index.cshtml），然后当角度路由器启动它将打开URL /角度/仪表板/页面页面的其余部分。

Then adjust base url and angular routing for each app, which it depends on your app structure.

然后调整每个应用的基本网址和角度路由，这取决于您的应用结构。

#4

You don't have to do the routing in Angular for the overall site. If you're already doing routing on the ASP.NET MVC side just keep it that way. Think of it as each page request is it's own angular application. That means each page has it's own ng-app in the body, and it includes it's own angular.js and whatever that app.js is as well. app.js will init angular and setup the controllers/components you use for that page only. Each page would do that. If you have multiple views within each app, then you can use angular routing for just those views for just that app. When a person clicks on a new app link, it uses ASP.NET server side routing to give the new page that will init angular, setup inter-page routing on client side for just that app, and setup controllers used by that app.

您不必在Angular中为整个站点进行路由。如果您已经在ASP.NET MVC端进行路由，那就保持这种方式。想想它，因为每个页面请求都是它自己的角度应用程序。这意味着每个页面都有自己的ng-app，它包含了自己的angular.js以及app.js。 app.js将初始化角度并设置您仅用于该页面的控制器/组件。每个页面都会这样做。如果您在每个应用中都有多个视图，那么您可以仅为该应用使用角度路由。当一个人点击一个新的应用程序链接时，它会使用ASP.NET服务器端路由来提供初始角度的新页面，在客户端设置仅用于该应用程序的页面间路由，以及该应用程序使用的设置控制器。

#5

I am not sure if i got the whole image but will try to help by telling you how i do multiple SPAs with Angular.

我不确定我是否得到了整个图像，但会尝试通过告诉您如何使用Angular执行多个SPA来帮助我。

In _Layout.chtml, you create the following

在_Layout.chtml中，您创建以下内容

<body data-ng-app="appMain">
  <main>
     @RenderBody()
  </main>
</body>

In Home.chtml with above layout set, you write the following

在具有上述布局设置的Home.chtml中，您可以编写以下内容

<script src="@Url.Content("~/Models/HomeModel.js")" type="text/javascript"/>
<script src="@Url.Content("~/ViewModels/HomeViewModel.js")" type="text/javascript"/>

<div data-ng-controller="HomeViewModel" ng-init="">
  home view html content
</div>

In HomeController.cs you create the Index action that return the above

在HomeController.cs中，您可以创建返回上述内容的Index操作

For routing and multiple modules, angular is very good on that. See another sample code below:

对于路由和多个模块，角度非常好。请参阅以下示例代码：

CreateAccount.chtml with above layout set.

具有上述布局集的CreateAccount.chtml。

<script src="@Url.Content("~/Models/AccountCreateModel.js")" type="text/javascript"/>
<script src="@Url.Content("~/ViewModels/AccountCreateViewModel.js")" type="text/javascript"/>

<div data-ng-app="accountCreate" data-ng-controller="AccountCreateViewModel">
    html content
</div>

AccountCreateViewModel.js:

AccountCreateViewModel.js：

    var accountCreateModule = angular.module('accountCreate', ['common'])
        .config(function ($routeProvider, $locationProvider) {
            $routeProvider.when(rootPath + 'Area/Controller/Action(App)/routeUrlstuff', { templateUrl: rootPath + 'Templates/redirectPage.html', controller: 'AccountCreateViewModel' });
            $routeProvider.otherwise({ redirectTo: rootPath + 'Area/Controller/Action(App)' });
            $locationProvider.html5Mode(true);
        });

accountCreateModule.controller("AccountCreateViewModel", function ($scope, $window) {

    // module scope code here
});

Each angular module has its own routing and business logic completely distinct from other modules. Each area, with its mvc actions (full page reload) and web api methods (JSON)) is now an SPA silo written in a very neat way.

每个角度模块都有自己的路由和业务逻辑，完全不同于其他模块。每个区域，其mvc操作（完整页面重新加载）和web api方法（JSON））现在是一个非常简洁的方式编写的SPA筒仓。