用 Angular 2 应用程序替换现有的 MVC 项目

Question

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

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

普通页面可以通过 www.mysite.com/controllername/index 访问。

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

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

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

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

Answer 1

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

结果比我想象的要容易。

这就是我所做的：

1. 在项目中创建一个文件夹，命名为：“app”
2. 运行 ng-build 并将构建文件放入此文件夹中。
3. 创建一个控制器，作为应用程序的包装器。我的是 AppController

4. 在控制器中添加这段代码：

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

5. 我们现在需要处理路由。进入 RoutesConfig.cs 并确保在 RegisterRoutes 中有这个

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

6. 现在您需要编辑 Angular 的 index.html，将“base href”更改为：base href="/app/"（这是因为 Angular 项目的根目录位于您之前创建的文件夹 app 中。）

1234563不过，我们有幸拥有 UrlRewrite！

如果您还没有，请转到您的应用文件夹并创建一个 Web.config。

8. 这是位于应用文件夹内的 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>
   

这甚至会忽略模式 site.com/api，因此您的 api 调用仍然有效！此外，这里的神奇之处在于 action type="Rewrite" url="/app/" 这将解决无法复制粘贴链接的问题。最后，如果您有 mvc 控制器并尝试访问它们，它仍然可以工作。

瞧。

Answer 2

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

要做的主要事情是确保您设置了静态文件服务，以便您的网络服务器将适当的 javascript 和 html 文件发送到服务器。这至少应该让你的 Angular 应用程序启动。

另一个导入要做的事情是在角度中使用“#”样式的路由。 MVC 不使用这些路由，因此它们总是被传递给 angular。 可能配置路由器将“正常”路由传递给 angular，但这种方法往往更容易。