将 MVC 控制器和动作与 Angular 2 联系起来？

Question

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

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

因为 MVC 由多个控制器和动作组成。几个动作会有很多视图，每个动作也会有一个 GET(View) 和 POST(Form Submit) 方法。

如果有人使用 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. 您需要在服务器中有一个包罗万象的路由来为您的index.html 提供服务。你可以在this file 中看到一个这样的例子。您会注意到以r.NoRoute 开头的长句...我说“到目前为止没有找到路由，因此提供 index.html 并让 Angular 2 从那里处理路由”。
2. 您不再需要担心 CORS 错误

希望有帮助！

Answer 2

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