保持前端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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

1.发布Angular5（https://angular.io/guide/deployment）软件包中包含index.html文件

2.在WebAPI项目的文件中添加Configure方法startup.cs（https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/static-files?tabs=aspnetcore2x）

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

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

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

客户端中的p / s Config BaseURL以正确调用服务器

Answer 4

这是所有Visual-Studio用户在我们的职业生涯中都会遇到的一个问题，您的要求是我刚从棱角人那里听到很多。

由于Visual Studio模板非常易于使用，因此许多人似乎都知道后端和前端是一个障碍。例如，asp.net MVC在隐藏所有耦合逻辑方面做得非常出色，一切似乎都神奇地起作用了。

我鼓励您转到 Visual Studio代码，使用angular CLI启动新项目，当您接触到HttpClient零件时，事情会突然变得清晰起来。