轻松学习 .NET 6.0 和 Angular - 入门 Angular 模板 - 第 1 部分

• 下载源代码 - 452.5 KB

引言

一直以来，我都计划发布 .NET 6.0 和 Angular 系列文章。在这个系列中，我计划发布类似的文章：

• 易学易用 .NET 6.0 和 Angular - Angular 模板入门 – 第 1 部分
• 易学易用 .NET 6.0 和 Angular - Angular 独立模板入门 – 第 2 部分
• 易学易用 .NET 6.0 和 Angular - Admin LTE 设计入门 – 第 3 部分
• 易学易用 .NET 6.0 和 Angular - 多语言入门 – 第 4 部分
• 易学易用 .NET 6.0 和 Angular - 发布到 IIS 入门 – 第 5 部分
• 易学易用 .NET 6.0 和 Angular - WEB API 入门 – 第 6 部分
• 易学易用 .NET 6.0 和 Angular - WEB API CRUD SQL SERVER 入门 – 第 7 部分

在本文中，我们将详细介绍如何使用 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 版本，因为 .NET6.0 和 Angular 13 都是新版本，学习和使用新事物肯定会很有趣。

背景

必备组件

• Visual Studio 2022
• Node.js – 如果您没有安装 Node.js，请安装 Node.js（下载 链接）

Using the Code

使用 Angular 模板创建 ASP.NET Core

在安装完以上所有必需软件后，点击桌面上的开始>>程序>>Visual Studio 2022>>Visual Studio 2022。点击新建>>项目。

搜索 Angular 模板，选择 ASP.NET Core with Angular，然后点击下一步。

输入您的项目名称并点击 下一步。

现在我们可以看到框架是 .NET 6.0 (长期支持)。点击创建按钮。

创建项目时，我们可以看到如下的解决方案结构：

在这里，我们可以看到添加了一些有趣的新文件，并且在 Visual Studio 中，没有 2019 版本中 ASP.NET Core 项目的主要类 Startup.cs 文件。

Visual Studio 2019 使用 Startup.cs

如果您曾使用过 ASP.NET MVC 和 ASP.NET Core，您可能知道 Startup.cs 类。因为这个类是所有 .NET 和 .NET Core 应用程序的主要类。这个 Startup.cs 类包含 configure 和 configureService 方法。这个类用于在 ConfigureService 中注册我们应用程序所需的所有服务，而 configure 方法则用作中间件管道来控制应用程序。

Visual Studio 2022 不需要 Startup.cs

当我们创建 ASP.NET Core 6.0 和 Angular 应用程序时，Startup.cs 类文件将不存在。是的，现在所有与 Configure 和 ConfigureService 相关的服务都将添加到 Program.cs 文件中。

例如，如果我们想添加连接字符串并添加 DBContext，那么我们可以将其添加到 Program.cs 文件中，使用 builder.Service.AddDbContext()。为了添加所有服务，我们可以使用 builder 对象，就像我们看到的使用 builder.Service.AddDbContext() 来添加 DBContext 服务一样。

我们可以看到 program.cs 文件中没有 main 方法、类和 using 声明，不用担心，是的，在 .NET 6.0 中，代码变得更简单，智能代码支持似乎更高级，现在工作代码和项目更容易，可以节省时间。

顶级语句

这被称为顶级语句，因为从 C# 9 开始就不再需要 main 方法了。顶级语句的主要目的是减少代码量并提高性能。main 方法和类将由编译器创建，我们无需为其编写单独的代码。

新 Angular 文件部分

aspnetcore-https.js

此 JavaScript 文件为目标为使用 ASP.NET Core HTTPS 证书的应用程序设置 HTTPS。

proxy.conf.js

此 JavaScript 文件用于添加我们的 HTTPS 端口、WEB API URL 作为目标，并在 context 中添加我们所有的控制器和方法，以便在 Angular 应用程序中访问。

构建并运行应用程序

当我们运行应用程序时，默认会看到主页。Counter 和 Fetch 数据组件已添加到菜单中，我们可以导航到每个菜单并查看组件结果。

当前月按项销售明细制作

现在，让我们创建一个简单的 WEB API 控制器来获取 Item Sales 详细信息。

创建模型类

为此，我们首先需要添加一个类文件来创建我们的 Model 类。右键单击项目，然后点击>添加>新项。选择类，并将其命名为 ItemDetails.cs，然后点击添加。

在类中，添加如下代码所示的属性变量：

public class ItemDetails
    {
        public String ItemCode { get; set; }
        public int SaleCount { get; set; }
    }

创建 API 控制器类

右键单击 Controllers 文件夹，然后点击>添加>控制器。选择API> 选择API 控制器 – 空，然后点击添加。

将空的 API 控制器命名为 ItemDetailsController.cs，然后点击添加。

在控制器中，我们添加 Get 方法，该方法将生成 10 个随机项代码以及范围在 20 到 100 之间的随机销售数量。

这是本系列的第一篇文章。稍后，当我们使用 SQL Server 进行 CRUD 操作时，我们将更详细地了解真实世界的例子是如何工作的。

[ApiController]
    [Route("[controller]")]
    public class ItemDetailsController : ControllerBase
    {
        private readonly ILogger<ItemDetailsController> _logger;
        public ItemDetailsController(ILogger<ItemDetailsController> logger)
        {
            _logger = logger;
        }

        [HttpGet(Name = "GetItemDetails")]
        public IEnumerable<ItemDetails> 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 部分

在这里，我使用默认的主页 Angular 组件来更新以显示项目详细信息和销售数量。

Home 组件

在 home 组件中，我更新了代码，添加了 HTTPClient 导入部分，以及注入 import 部分。

然后，我创建了一个与 Model 类中创建的 ItemDetails 相同的接口。

在 Constructor 方法中，使用 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<ItemDetails[]>(baseUrl + 'ItemDetails').subscribe(result => {
      this.itemsdetails = result;
    }, error => console.error(error));
  }
}
interface ItemDetails {
  itemCode: string;
  saleCount: number;
}

home.component.html

在 HTML 中，添加以下代码以显示来自 API 的 ItemCode 和 salescount 的结果。

<h1>Current Month Item wise Sales Details</h1> 
<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="itemsdetails">
  <thead>
    <tr>
      <th>Item Code</th>
      <th>Sales Count</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let itemdetail of itemsdetails">
      <td>{{ itemdetail.itemCode }}</td>
      <td>{{ itemdetail.saleCount }}</td>
    </tr>
  </tbody>
</table>

构建和运行

生成并运行应用程序。在主页上，我们可以看到如下结果，您会注意到我们看不到 itemdetails 和 salecount 值。这是因为我们还没有在 proxy.config.js 文件中添加 controller 类和方法。为了在 Angular 应用中使用 WEB API，我们需要在 Proxy.config.js 的 context 数组中添加 WEB API Controller 和方法。

从下图可以看到，我们已将名为 ItemDetails 的控制器添加到 proxy.config.js 文件的 context 数组中。

运行应用程序查看结果。现在，我们可以看到 WEB API 结果已绑定到我们的主页，显示 Item Code 和 Sales Count。

关注点

希望本文能帮助您了解如何使用 Visual Studio 2022 开始 ASP.NET Core 和 Angular。在下一部分，我们将更详细地介绍如何使用 ASP.NET Core 创建独立的 Angular 应用程序。

历史

• 2022 年 5 月 26 日：初始版本