Question

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

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

我的问题是：

是否有一种简单的方法可以创建一个基于Web的基于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＆amp; Asp.net Core WebApi

Kestrel Web服务器中的主机静态angular5应用程序

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

2。在WebAPI项目的Configure文件中添加startup.cs方法（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用户在我们职业生涯中的某些方面所面临的问题，而您所提出的问题是我从很多角色的人那里听到的。

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

我鼓励您转到 visual studio code ，使用角度CLI启动一个新项目，当您到达HttpClient部分时，突然间事情会变得更加清晰。< / p>

Answer 5

设置开发环境

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

我会做两个单独的项目。

Q1。是的，您可以使用vscode

中的这些命令创建WEB API的基本模板

mkdir TodoApi
cd TodoApi
dotnet new webapi

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

您可以安装angular cli

npm install -g @angular/cli

使用角度cli创建角度模板。

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

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

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

我还没试过

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

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

5 个答案: