使用Angular 2链接MVC控制器和动作？

Question

我在第一步中真的陷入了MVC + Angular 2项目。问题是，如何使用Angular 2连接控制器和操作？是否需要路由？

我已经使用Visual Studio 2015完成了所有设置，以便与Angular 2一起使用。它成功运行。但我真的在ASP.NET MVC 5（非ASP.NET核心）中完成我的项目。在这里，我不知道控制器和动作如何与Angular一起工作。如何在项目中路由（导航）到多个控制器和操作。

由于MVC由多个控制器和动作组成。对于多个操作将有许多视图，并且对于每个操作，还将存在GET（视图）和POST（表单提交）方法。

如果有人使用 Angular 2 + ASP.NET MVC ，请告诉我控制器和操作是如何连接的。

Answer 1

看起来您正在构建第一个与REST API通信的SPA。

对于初学者来说，你应该直截了当地说明两件事：

1. ASP.NET MVC是您的REST API。它将公开可通过HTTP调用请求的端点。
2. 您的Angular 2是SPA（单页应用程序），它将对您在ASP.NET中编写的REST API进行HTTP调用，并且该API将返回您想要的任何响应。然后，您可以在Angular 2前端中根据自己的喜好使用该响应数据。

话虽这么说，您要做的第一步是确保您可以正确访问您的API端点。下载名为Postman的工具并轻松测试。

理想情况下，您希望将此API设为JSON API，因为这对您的前端来说是最简单的方法。此外，它基本上是事实上的标准。但是一如既往地使用最适合您用例的内容。

一旦您的端点按预期工作，您需要做的是在您的前端进行一些AJAX调用，这些调用将触及这些服务器端点。对于Angular 2，您可以使用Http包。

在拨打服务器时，您无疑会遇到CORS（跨源请求共享）浏览器错误。这基本上是浏览器拒绝向您的服务器发送请求，直到您的服务器明确表示您可以向它发出请求，假设您不在同一主机和端口上。

以上是对您需要做的事情的一个非常简短且有限的细节分类。有关将所有内容放在一起的示例，请查看我的Angular 2/Golang chat room app。正如您将从this file看到的那样，我公开了一些端点，以允许我的Go服务器中的Todo创建/读取/更新/删除操作。 Angular 2代码位于this directory。

最后一个提示：如果您正在为前端文件提供服务并在同一个ASP.NET服务器上公开您的API端点，而不是为REST API提供一个ASP.NET服务器，一个用于提供UI文件，然后有两件事情是真的：

1. 您需要在服务器中拥有一条为您的cc提供服务的捕获路线。您可以在this file中查看此示例。您会注意到一个以MyModel.objects.aggregate(my_sum).order_by(my_sum)开头的长...这就是我所说的＃34;到目前为止还没有找到路由，因此请服务于index.html并让Angular 2从那里处理路由＆ ＃34;
2. 您不再需要担心CORS错误

希望有所帮助！

Answer 2

实际上，您将在MVC项目中创建和公开API（WEB API），而Angular 2将使用这些API。