MVC 5和Angular 2多个"孤立"应用程序结构建议

Question

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

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

区/控制器1 /措施1(应用)

区/控制器1 /措施2(应用)

区/控制器2 /措施1(App3的)

等等

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

路由:所以在我脑海中的一个例子就是 Area/Controller/Action(App)/routeUrlstuff

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

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

Answer 1

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

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

您想要创建2个SPA

1. UserApp包含2个模块(AddUser和ManageUser)
2. ProductApp包含2个模块(AddProduct和ManageProduct)

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

1. 对myApp /用户/添加
2. 对myApp /用户/管理
3. 对myApp /产品/加
4. 对myApp /产品/管理

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

从概念上讲,这看起来像:

具有多个模块的多个SPA

角度捆绑:

我会将typescript转换并捆绑到Angular CLI.如果您的项目变得复杂并且您认为角度cli无法满足您的捆绑需求,您可以始终弹出webpack配置.

Yakov Fain有一个非常好的博客,您可以查找配置cli以捆绑多个SPA.基本上,您将配置角度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中的产品页面定义匹配路线.

希望这可以帮助.

更新:配置以避免多个路由文件

对于上述用例,将有以下控制器:

UserController,索引操作指向user/index.cshtml(使用_userLayout),代码如下:

 <user-app></user-app>

ProductController,索引操作指向product/index.cshtml(使用_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

用户/ index.chtml旋转角度用户SPA,然后角度路线将启动.您将在产品路线和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上进行类似的配置.