将前端 Angular 5 和后端 Web API 代码分开的简单方法？

Posted 2023-03-09

【中文标题】将前端 Angular 5 和后端 Web API 代码分开的简单方法？

【英文标题】：Simple way to keep Front-end Angular 5 and back-end Web API code separate?

【发布时间】：2018-08-13 21:41:01

【问题描述】：

我开发了一个 Angular 5 应用程序，其中包含大量移动部件（服务、引导程序、Angular Material、内部+外部 JS 脚本等）。现在我也想为这个应用程序添加数据库连接（仅限 MS SQL Server）。该应用是在 Visual Studio Code 中开发的。

我正在关注来自 MSDN 的 this tutorial，以了解如何将此应用程序与 SQL Server 数据库连接。我相信我需要 Web API 和 .NET Core 支持来实现连接性，如果不从 VS Code（例如here）或 Visual Studio（如参考文章），因为我能找到的关于该主题的几乎所有文章/教程都是从头开始的。在我看来，在 Visual Studio 中创建一个新的 Angular + Core 项目并逐个文件迁移应用程序逻辑对我来说不是一个可行的解决方案。

我的问题是：

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

【问题讨论】：

开发人员经常使用 Visual Studio 将 Web API 构建为一个完全独立于 VS Code 中构建的 Angular 应用程序的项目。

@DeborahK - 问这个问题的原因之一是确认我是否走在正确的轨道上，因为我没有 .NET / Web API 经验。我会看看我现在是否可以找到一些关于它的资源。谢谢！

请参阅此以使用 Visual Studio 代码创建 Web api

此视频可能会帮助您入门channel9.msdn.com/Blogs/dotnet/…

【参考方案1】：

我建议您创建一个单独的项目，其中包含带有 ASP.NET Core 的 REST-Endpoint。

这里有一个简单的教程：

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

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

（如果您使用的是 Visual Studio，请查看项目模板。这里有您需要的一切。

【参考方案2】：

如果您需要在服务器端渲染 Angular 应用程序（使用 Angular Universal），那么从同一个应用程序渲染 Angular 和 ASP.NET Core 会很有帮助。否则，您可以创建一个单独的 ASP.NET Core 或常规 ASP.NET Web API 项目作为后端，从 SQL Server 获取数据并提供给 Angular 客户端。

【讨论】：

因此，如果我创建一个单独的 ASP.NET Web API 项目来提供来自 SQL Server 数据库的数据，那么我的 Angular 5 应用程序需要添加哪些内容才能获取它们？ （我只是想要一个关于复杂性的一般概念，而不是一个完整的解决方案，例如，http.get() 调用是否可以用于获取记录或更复杂的技术？）

是的，您只需要在 Angular 中使用 HttpClient 进行 http 调用。此外，您还需要在 ASP.NET 项目中启用 CORS，以便您的单独客户端应用程序（在不同的 URL 上）可以与服务器（在不同的 URL 上）进行通信。

【参考方案3】：

我的项目工作正常。试一试。

创建两个单独的项目。 Angular5 & Asp.net Core WebApi

在 Kestrel 网络服务器中托管静态 angular5 应用

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

2. 在WebAPI项目的startup.cs文件中添加Configure方法 (https://docs.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 以正确调用服务器

【参考方案4】：

这是所有 Visual-Studio 用户在我们职业生涯的某个阶段都会遇到的问题，而您所问的问题是我从 Angular 新手那里听到的很多问题。

由于 Visual Studio 模板非常易于使用，很多人似乎都认为后端和前端是一体的。例如，asp.net MVC 在隐藏所有耦合逻辑方面做得非常好，而且一切似乎都神奇地正常工作。

我鼓励你转移到 visual studio code，使用 angular CLI 开始一个新项目，当你到达 HttpClient 部分时，你会突然变得更加清晰。

【讨论】：

我已经在 VS Code + Visual Studio 之间来回切换了很多次。重点似乎肯定是 VS Code 上的有用扩展，例如 marketplace.visualstudio.com/…，它允许您在同一组件的 ts、css 和 html 文件之间切换，一旦您习惯了这些快捷方式，这将大大节省时间。此外，VS Code 在理解 Angular 代码方面变得更加智能，并且当您从 .html 引用它们时能够检查 .ts 文件中的属性是否存在，这又是巨大的。

我希望我知道这两种产品的路线图，了解他们试图支持的内容。 Visual Studio 会赶上来，还是我只是错过了一些重要扩展的安装。希望我知道，但现在我专注于 VS Code for angular 和 Visual Studio for Web API 作为两个完全独立的项目。

【参考方案5】：

设置你的开发环境

.NET Core 2.0.0 SDK 或更高版本。 Visual Studio 代码 Visual Studio Code C# 扩展

我会做两个独立的项目。

第一季度。是的，您可以在 vscode 中使用这些命令创建WEB API 的基本模板

mkdir TodoApi
cd TodoApi
dotnet new webapi

第二季度。 Angular 应用程序只需要 api Endpoint 就可以与任何后端应用程序通信。

你可以安装angular cli

npm install -g @angular/cli

使用 Angular cli 创建 Angular 模板。

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

现在您可以将您的服务端点指向您的 API 公开的服务。它将开始提供数据。

get started with vs code using C# & .Net core

我没试过

您还可以尝试将这两个项目组合到一个工作空间并创建一个构建任务，以便 WEBAPI 和 Angular 可以在单个 vs 代码窗口中操作。