如何简单地将前端Angular 5和后端Web API代码分离？

Question

我已经开发了一个有很多组件（服务、Bootstrap、Angular Material、内部和外部 JS 脚本等）的 Angular 5 应用程序。现在我也想将数据库连接功能添加到此应用程序中（仅支持 MS SQL Server）。该应用程序是在 Visual Studio Code 中开发的。

为了学习如何将此应用程序与 SQL Server 数据库连接，我正在遵循 MSDN 上的这个教程。我相信我需要使用 Web API 和 .NET Core 支持进行连接，并且我找不到不从头开始在 VS Code（例如这里）或 Visual Studio（就像在引用的文章中一样）中执行此操作的方法，因为我能够找到的几乎所有关于此主题的文章/教程都是从头开始的。我的看法是，在 Visual Studio 中创建一个新的 Angular + Core 项目，并逐个文件迁移应用程序逻辑，这不是对我可行的解决方案。

我的问题是：

• 是否有一种简单的方法来创建一个基于 Web API 的后端应用程序，该应用程序为前端 Angular 5 应用程序提供来自 SQL Server 数据库的数据？还是所有的 .NET Core、Web API 和 Angular 前端支持都来自同一个应用程序？
• 如果没有，是否有一种简单/官方的方法可以将 .NET Core 和 Web API 功能添加到在 VS Code 中构建的 Angular 5 应用程序中？

- Uzair A.

---

开发人员常常使用Visual Studio单独构建Web API项目，与使用VS Code构建的Angular应用程序完全分开。 - DeborahK

@DeborahK - 提出这个问题的原因之一是为了确认我是否走在正确的轨道上，因为我没有.NET / Web API经验。我现在会看看能否找到相关资源。谢谢！ - Uzair A.

请参考以下内容，使用 Visual Studio Code 创建 Web API。 - Eldho

这个视频可能会帮助你入门 https://channel9.msdn.com/Blogs/dotnet/Get-started-VSCode-Csharp-NET-Core-Windows - Eldho

Answer 1

我建议您创建一个单独的项目，其中包含了使用ASP.NET Core的REST端点。

您可以在这里找到一个简单的教程：

https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api

使用此解决方案，您的服务器与客户端是分离的。也许在未来您想要使用除了Angular之外的其他东西，或者您想要创建另一个客户端（例如本机移动应用程序）。在这种情况下，您不必更改服务器项目。

（如果您正在使用Visual Studio，请查看项目模板。您需要的一切都在那里。）

- Stephu

Answer 2

如果你需要在服务器端呈现 Angular 应用程序（使用 Angular Universal），那么从同一个应用程序中呈现 Angular 和 ASP.NET Core 将是有益的。否则，你可以创建一个单独的 ASP.NET Core 或传统的 ASP.NET Web API 项目作为后端，从 SQL Server 获取数据并提供给 Angular 客户端。

- Ali Shahzad

---

如果我创建一个单独的ASP.NET Web API项目来从SQL Server数据库提供数据，那么我需要对我的Angular 5应用程序进行哪些修改才能获取它们呢？（我只是想要一个关于复杂性的概括，而不是完整的解决方案，例如，使用http.get()调用是否足以获取记录，还是需要更复杂的技术？） - Uzair A.

你只需在Angular中使用HttpClient进行HTTP调用。此外，你还需要在ASP.NET项目中启用CORS，以便你的客户端应用程序（位于不同的URL上）可以与服务器（位于不同的URL上）通信。 - Ali Shahzad

Answer 3

这对我的项目很有效。你可以试试。

创建两个独立的项目。Angular5 和 Asp.net Core WebApi

在 Kestrel web 服务器上托管静态的 Angular5 应用程序

1. 发布 Angular5 (https://angular.io/guide/deployment) 包含 index.html 文件

2. 在 WebAPI 项目的 startup.cs 文件中的 Configure 方法中添加 (https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?tabs=aspnetcore2x)

app.UseDefaultFiles();
app.UseStaticFiles();

3. 将所有已发布的Angular5文件复制到WebAPI中的wwwroot文件夹中。

4. 运行WebAPI项目将默认启动Angular5应用程序。

p/s 在客户端配置BaseURL以正确调用服务器。

- Hung Quach

Answer 4

这是所有Visual Studio用户在我们职业生涯中都会遇到的问题，而你所问的是我经常听到新手Angular开发者提出的问题。

由于Visual Studio模板非常易于使用，许多人似乎认为后端和前端是一个整体。例如，ASP.NET MVC非常擅长将所有耦合逻辑隐藏起来，一切都似乎神奇地自动工作。

我建议你转移到 Visual Studio Code，使用Angular CLI启动一个新项目，当你进入HttpClient部分时，事情会变得更加清晰易懂。

- Stavm

---

我在使用Angular时，已经多次在VS Code和Visual Studio之间切换。显然，VS Code更注重有用的扩展，比如https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher，它可以让你在同一个组件的ts、css和html文件之间切换，一旦你习惯了快捷键，这将是一个巨大的时间节省。此外，VS Code在理解Angular代码方面变得更加智能，并且能够检查你从.html引用时.ts文件中属性的存在，这也是非常重要的。 - Simon_Weaver

我希望我知道这两个产品的路线图，了解它们所支持的内容。Visual Studio会追赶上来吗？还是我只是错过了某些重要扩展的安装。我希望我知道，但现在我将把重点放在VS Code上进行Angular开发，而将Visual Studio用于Web API作为两个完全独立的项目。 - Simon_Weaver

Answer 5

设置您的开发环境

• .NET Core 2.0.0 SDK或更高版本。
• Visual Studio Code
• Visual Studio Code C# 扩展程序

我会创建两个不同的项目。

问题1：是的，您可以在VSCode中使用这些命令创建WEB API的基本模板。

mkdir TodoApi
cd TodoApi
dotnet new webapi

Q2. Angular应用程序只需要API端点与任何后端应用程序通信。

您可以安装angular cli。

npm install -g @angular/cli

使用 Angular CLI 创建一个 Angular 模板。

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

现在，您只需将服务端点指向API公开的服务即可。它将开始提供数据。 使用C#和.Net Core开始使用VS Code 我还没有尝试过。

您还可以尝试将这两个项目合并到一个工作区，并创建一个构建任务，以便WEBAPI和Angular可以从一个VS Code窗口操作。

- Eldho