保持前端Angular 5和后端Web API代码分离的简单方法？

Question

我开发了一个Angular 5 app，里面有很多移动部件（服务，Bootstrap，Angular Material，内部+外部JS脚本等）。 现在我想要添加数据库连接到这个应用程序（仅限MS SQL Server）。 该应用程序是在Visual Studio Code中开发的。

我从MSDN关注本教程 ，以了解如何将此应用程序与SQL Server数据库连接。 我相信我需要Web API和.NET Core支持连接，我无法找到一种方法来做到这一点，无需从头开始在任何VS代码（例如这里 ）或Visual Studio（如引用中）因为几乎所有关于这个主题的文章/教程都是从头开始的。 我看到它的方式，在Visual Studio中创建一个新的Angular + Core项目并逐个文件地迁移app逻辑对我来说不是一个可行的解决方案。

我的问题是：

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

Answer 1

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

Answer 2

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

在这里你会找到一个简单的教程

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

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

（如果您正在使用visual studio，请查看项目模板。您需要的是所有东西。

Answer 3

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

创建两个单独的项目。 Angular5和Asp.net核心WebApi

在Kestrel Web服务器中托管静态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以正确调用服务器

Answer 4

这是所有Visual-Studio用户在我们职业生涯中的某些方面所面临的问题，而您所提出的问题是我从很多角色的人那里听到的。

因为可视化工作室模板非常容易使用，所以许多人似乎都认为后端和前端是一个块。 例如，asp.net MVC在隐藏所有耦合逻辑方面做得非常出色，而且一切似乎都神奇地起作用。

我鼓励你转向visual studio代码 ，使用角度CLI启动一个新项目，当你到达HttpClient部分时，突然间事情会变得更加清晰。

Answer 5

设置您的开发环境

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

我会做两个单独的项目。

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

mkdir TodoApi
cd TodoApi
dotnet new webapi

Q2。 Angular应用程序只需要api Endpoint就可以与任何后端应用程序进行通信。

你可以安装角度cli

npm install -g @angular/cli

使用angular cli创建角度模板。

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

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

使用C＃和.Net核心开始使用vs代码

我没试过

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