易于学习的.NET 6.0和Angular——Angular模板入门——第1部分

目录

介绍

背景

先决条件

使用代码

使用Angular模板创建ASP.NET Core

带有Startup.cs的Visual Studio 2019

Visual Studio 2022不需要Startup.cs

顶级语句

新的Angular文件部分

aspnetcore-https.js

proxy.conf.js

构建并运行应用程序

当月项目明智的销售细节制作

创建模型类

创建API控制器类：

Angular部分

home组件

home.component.html

构建并运行

兴趣点

---

• 下载源代码 - 452.5 KB

介绍

一直以来，我都计划发布.NET 6.0和Angular系列文章。在本系列中，我计划发表以下文章：

• 易于学习的.NET 6.0和Angular——Angular模板入门——第1部分
• 易于学习的.NET 6.0和Angular——Angular独立模板入门——第2部分
• 易于学习的.NET 6.0和Angular——管理员LTE设计入门——第3部分
• 易于学习的.NET 6.0和Angular——多语言入门——第4部分
• 易于学习的.NET 6.0和Angular——发布到IIS入门——第5部分

在本文中，我们将详细了解如何使用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（下载链接）

使用代码

使用Angular模板创建ASP.NET Core

安装上面列出的所有先决条件并单击桌面上的开始>>程序>> Visual Studio 2022 >> Visual Studio 2022 。单击新建>>项目。

搜索Angular Template并选择ASP.NET Core with Angular并单击Next。

输入您的项目名称，然后单击Next。

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

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

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

带有Startup.cs的Visual Studio 2019

如果您使用过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，那么我们可以使用builder.Service.AddDbContext()将其添加到Program.cs文件中。要添加所有服务，我们可以使用我们可以看到的builder对象来添加DBContext服务，我们使用builder.Service.AddDbContext()。

我们可以看到，由于program.cs文件中没有main方法、类和using头，不要慌，是的，现在在.NET 6.0中，代码变得更简单了，智能代码支持似乎更高级了现在它更容易并减少了处理我们的代码和项目的时间。

顶级语句

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

新的Angular文件部分

aspnetcore-https.js

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

proxy.conf.js

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

构建并运行应用程序

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

当月项目明智的销售细节制作

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

创建模型类

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

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

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

创建API控制器类：

右键单击Controllers文件夹，然后单击 > Add > Controller。选择API > 选择API控制器-空，然后单击添加：

将空API控制器名称指定为ItemDetailsController.cs并单击Add。

在控制器中，我们添加将创建随机10项代码以及随机销售计数值范围从20到100的Get方法。

这是本系列的第一篇文章。稍后，当我们将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部分

在这里，我使用默认的home Angular组件进行更新，以显示带有销售计数的商品详细信息。

home组件

在home组件中，我通过添加HTTPClient导入部分和注入import部分来更新代码。

然后，我创建与我们在Model类上创建的相同的ItemDetails接口。

在使用该http.get方法的Constructor方法中，我们获取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 App中使用WEB API，我们需要在Proxy.config.js上下文数组中添加WEB API控制器和方法。

您可以从下图中看到，现在我们已经在proxy.config.js文件上下文数组中添加了名为ItemDetails的控制器。

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

兴趣点

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

https://www.codeproject.com/Articles/5333497/Easy-to-Learn-NET-6-0-and-Angular-Getting-Started