在本系列文章中，将探讨如何使用Visual Studio 2022中的Angular模板开始.NET 6.0和Angular的学习。.NET 6.0在性能上有了显著提升，包括智能代码编辑等优势，被称为最快的全栈Web框架。此外，.NET 6.0在文件流性能方面也有所提升。
当使用Visual Studio 2022创建一个新的Angular模板项目时，会发现使用了ASP.NET Core 6.0和Angular 13版本，这两个都是新版本，学习并使用这些新工具无疑会非常有趣。
在开始之前，需要确保已经安装了以下先决条件：
创建ASP.NET Core与Angular模板：
安装完上述所有先决条件后，点击桌面上的Visual Studio 2022图标。点击“新建”>“项目”。搜索Angular模板并选择ASP.NET Core with Angular，然后点击“下一步”。输入项目名称并点击“下一步”。现在可以看到框架是.NET 6.0（长期支持）。点击“创建”按钮。
创建项目后，可以看到解决方案结构如下：
在这里，可以看到一些有趣和新的文件已经被添加，也可以看到在Visual Studio中没有Startup.cs文件，这是2019版本ASP.NET Core项目的主要类。
当创建ASP.NET Core 6.0和Angular应用程序时，Startup.cs类文件将缺失。是的，现在所有的Configure和ConfigureService相关的服务都将被添加到Program.cs文件中。
例如，如果需要添加连接字符串并添加DBContext，那么可以在Program.cs文件中使用builder.Service.AddDbContext()来添加。要添加所有服务，可以使用builder对象，如添加DBContext服务时，使用builder.Service.AddDbContext()。
可以看到Program.cs文件中没有main方法、类和using头文件，不要惊慌，是的，现在在.NET 6.0中，代码变得更简单，智能代码支持似乎更先进，现在编写代码和项目的工作更容易，减少了时间。
这被称为顶级语句，因为从C# 9开始不需要main方法。顶级语句的主要目的是减少代码并提高性能。main方法和类将由编译器创建，不需要为它编写单独的代码。
aspnetcore-https.js：这个JavaScript文件为应用程序设置HTTPS，这些应用程序旨在使用ASP.NET Core HTTPS证书。
proxy.conf.js：这个JavaScript文件用于添加HTTPs端口，WEB API URL作为目标，在上下文中，将添加所有的控制器和方法，以便在Angular应用程序中访问。
当运行应用程序时，可以看到默认的主页。计数器和获取数据组件已经被添加到菜单中，可以导航到每个菜单并查看组件结果。
现在让制作一个简单的WEB API控制器来获取项目销售详情。
首先，需要添加一个类文件来创建模型类。右键点击项目，点击“添加”>“新建项”。选择“类”并将其命名为ItemDetails.cs，然后点击“添加”。
在类中，添加如下属性变量：
public class ItemDetails
{
public string ItemCode { get; set; }
public int SaleCount { get; set; }
}
右键点击“控制器”文件夹，点击“添加”>“控制器”。选择“API”>选择“API控制器 - 空”，然后点击“添加”：给空API控制器命名为ItemDetailsController.cs，然后点击“添加”。
在控制器中，添加Get方法，它将创建随机的10个项目代码以及从20到100的随机销售计数值范围。
[ApiController]
[Route("[controller]")]
public class ItemDetailsController : ControllerBase
{
private readonly ILogger _logger;
public ItemDetailsController(ILogger logger)
{
_logger = logger;
}
[HttpGet(Name = "GetItemDetails")]
public IEnumerable Get()
{
var rng = new Random();
int ivale = 0;
return Enumerable.Range(1, 10).Select(index => new ItemDetails
{
ItemCode = "ITM_" + rng.Next(1, 100),
SaleCount = rng.Next(20, 100),
}).ToArray();
}
}
在这里，使用默认的主页Angular组件来更新显示项目详情和销售计数。
在主页组件中，通过添加HTTPClient导入部分和注入导入部分来更新代码。然后，使用与模型类中相同的ItemDetails创建接口。
在构造函数方法中，使用http.get方法，获取API JSON结果并将其绑定到itemsdetails，以在HTML页面上显示结果。
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent {
public itemsdetails: ItemDetails[] = [];
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
http.get(baseUrl + 'ItemDetails').subscribe(result => {
this.itemsdetails = result;
}, error => console.error(error));
}
}
interface ItemDetails {
itemCode: string;
saleCount: number;
}
在HTML中，添加以下代码以显示API的结果ItemCode和salescount。
项目代码
销售计数
{{ itemdetail.itemCode }}
{{ itemdetail.saleCount }}
构建并运行应用程序。在主页上，可以看到以下结果，可能会注意到看不到itemdetails和salecount值。这是因为还没有在proxy.config.js文件的上下文数组中添加控制器类和方法。为了在Angular应用程序中使用WEB API，需要在Proxy.config.js上下文数组中添加WEB API控制器和方法。
可以看到，从下面的图片中，现在在proxy.config.js文件的上下文数组中添加了控制器，命名为ItemDetails。
运行应用程序以查看结果。现在，可以看到WEB API结果已经绑定到主页上，显示项目代码和销售计数。