用 angular 2 个应用替换现有的 MVC 项目

Question

听起来有点奇怪，但我会解释我想做什么。

我目前有一个使用 Razor Views 的 C# 编写的 MVC 网站。在同一个项目中，我添加了一个 API，我可以像这样访问它：www.mysite.com/api/controller/get.

普通页面只需www.mysite.com/controllername/index.

即可访问

现在的问题是我用angular2重新创建了网站，现在我需要把网站发布到网上，我的意思是完全替换mvc项目。

我的解决方案 1 是将 angular 应用程序和 api 分开：因此，我在 www.mysite.com 上发布 angular 网站并发布 api 在 api.mysite.com.

解决方案 2？：我想知道是否可以用 angular 2 应用程序简单地替换我当前项目的 MVC 部分？所以一切都在同一个域中。（又名同一个项目）

编辑：如果解决方案 2 可行：如何在项目中包含 angular 2 应用程序而不与 mvc 项目发生冲突。换句话说，我想删除 MVC 路由。

Answer 1

是的，您可以将 ASP.NET MVC 代码替换为使用 Web API 调用的 Angular 站点。正如你所怀疑的那样； ASP.NET MVC 路由将优先于任何 angular 路由。

要做的主要事情是确保您设置了静态文件服务，以便您的 Web 服务器将适当的 javascript 和 html 文件发送到服务器。这至少应该让你的 angular 应用引导。

另一件重要的事情是在 angular 中使用“#”样式的路由。 MVC 不使用这些路由，因此它们总是传递给 angular。它可能配置路由器以将 "normal" 路由传递到 angular，但这种方法往往更容易。

Answer 2

所以我最终选择了解决方案#2。

事实证明比我想象的要容易。

这是我所做的：

在项目中创建一个文件夹，任意命名例如："app"
运行 ng-build 并将构建文件放入此文件夹中。
创建一个控制器，作为应用程序的包装器。我的是 AppController

在控制器中添加此代码：

public ActionResult Index()
{
    return new FilePathResult("~/app/index.html", "text/html");
}

我们现在需要处理路由。进入 RoutesConfig.cs 并确保你在 RegisterRoutes

中有这个

   routes.MapRoute(
      name: "Default",
      url: "{controller}/{action}/{id}",
      defaults: new { controller = "App", action = "Index", id = UrlParameter.Optional }
    );

现在您需要编辑 angular 的 index.html，将 "base href" 更改为：base href="/app/"（这是因为根angular 项目位于您之前创建的文件夹 app 中。）
现在这是棘手的部分，如果你运行它，它会起作用，但你很快就会注意到你无法复制和粘贴你的 url有一个错误。然而，我们很幸运有 UrlRewrite！

转到您的应用程序文件夹并创建一个 Web.config（如果您还没有的话）。

这是位于应用程序文件夹内的 Web.config 文件的内容。

<?xml version="1.0"?>
 <configuration>
  <system.web>
   <compilation debug="true" targetFramework="4.0"/>
  </system.web>

  <system.webServer>
   <rewrite>
   <rules>
    <rule name="Angular Routes" stopProcessing="true">
     <match url=".*" />
      <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
     </conditions>
     <action type="Rewrite" url="/app/" />
     </rule>
   </rules>
  </rewrite>
 </system.webServer>
</configuration>

这甚至会忽略模式站点。com/api，因此您的 api 调用仍然有效！此外，这里的魔法是带有 action type="Rewrite" url="/app/" 的行，这将解决无法复制粘贴链接的问题。最后，如果您有 mvc 控制器并尝试访问它们，它仍然有效。

瞧。

用 angular 2 个应用替换现有的 MVC 项目

Replace existing MVC project with angular 2 app

c#

asp.net-mvc

publish

angular