易学易用 .NET 6.0 和 Angular - Angular 独立模板入门 – 第 2 部分

syed shanu

5.00/5 (1投票)

2022年6月7日

CPOL

11分钟阅读

10826

190

在 VS 2022 中开始使用 .NET 6.0 和独立 Angular 模板

下载源代码 - 236.4 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 中提供的 .NET 6.0 和独立 Angular 模板。

在 Visual Studio 的以前版本（如 2019）中，可以使用 ASP.NET Core Angular 模板创建 Angular 项目，但在以前版本的 Angular 模板中，所有 Angular 相关项目都将添加到 ClientAPP，并且还包括 API 控制器和 ASP.NET Core 项目结构。在 Visual Studio 2022 ASP.NET Core Angular 独立项目中，默认情况下只包含 Angular 相关项目文件，因此可以将其分离为前端 UI 部分和后端 API 部分。我们看不到任何 ASP.NET Core 文件夹结构，如果想使用 WEB API，那么我们可以在 Angular 独立项目解决方案中添加新的 WEB API 项目。在本文中，我们将详细介绍这一点。

背景

必备组件

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

Visual Studio 2022

如果您尚未安装 Visual Studio 2022，可以从此链接下载并安装到您的计算机上。

下载并安装 Visual Studio 2022。

注意：社区版对所有人免费，如果您没有安装密钥，可以下载社区版；如果您有安装密钥或 MSDN 订阅，则可以下载专业版或企业版。

作为 Microsoft MVP，我有 MSDN 订阅并安装了专业版。

Using the Code

使用 Angular 模板创建 ASP.NET Core

安装上述所有先决条件后，在桌面上依次单击开始 >> 程序 >> Visual Studio 2022 >> Visual Studio 2022。单击新建 >> 项目。

搜索 Angular 模板并选择 带 Angular 的 ASP.NET Core，然后单击下一步。

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

如果您想在项目中使用 ASP.NET Core 和 WEB API，则必须勾选为“空 ASP.NET Web API”添加集成，然后单击创建按钮。

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

在这里，我们可以看到一些有趣的新文件已被添加，并且我们还可以看到在 Visual Studio 中没有 ASP.NET Core 项目结构。我们还可以看到在 app 文件夹中只存在 app.component 和 app.module Angular 文件。

Visual Studio 2019 Angular 模板项目

如果您曾使用 Visual Studio 2019 ASP.NET Core Angular 模板，您应该了解其项目结构，它将包含 Angular 和 ASP.NET Core 项目的组合。此外，在 Angular 项目中，我们可以看到一些示例已添加，例如 Home、fetch-data、home 和 nav-menu 文件夹，通过这些示例工作，我们可以轻松地根据我们的需求扩展项目并添加页面。

Visual Studio 2022 Angular 独立项目

正如我们在 Visual Studio 2022 Angular 独立项目中看到的，没有像 home、fetch-data、counter 和 nav-bar 这样的示例 Angular 页面。在这里，我们能看到的只有 App.component 和 app.module Angular 主文件。Angular 独立项目也缺少 ASP.NET Core 项目结构。如果我们需要使用 ASP.NET Core WEB API 作为项目的后端，那么我们可以在 Angular 独立解决方案中添加新项目，并且可以在 proxy.conf.js 文件中添加 WEB API 控制器。我们将在下面详细介绍如何创建 WEB API 项目并将控制器添加到我们的独立 Angular 项目中。

新的 Angular 文件部分

aspnetcore-https.js

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

proxy.conf.js

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

为“空 ASP.NET Web API”项目添加集成

注意：为了添加 ASP.NET Core WEB API 项目并将其集成到我们的 Angular 项目中，我们必须勾选为“空 ASP.NET Web API”项目添加集成。

在这里，我们可以在下图中看到我创建了另一个测试 Angular 独立项目，但这次我没有勾选为“空 ASP.NET Web API”项目添加集成。

当我们这次创建 Angular 独立项目时，我们可以看到 proxy.conf.js 和 aspnetcore-https.js 文件在 Angular 项目中都缺失了。为了集成 ASP.NET Core 和 WEB API，这两个文件都非常重要。请始终记住，如果您想使用 Visual Studio 2022 为您的 Angular 独立项目集成 ASP.NET Core 和 WEB API，那么在创建项目时，您必须勾选为“空 ASP.NET Web API”添加集成项目。

添加 WEB API 项目

现在让我们在 Angular 独立解决方案中创建一个新的 ASP.NET Core WEB API 项目。

右键单击您的 Angular 独立解决方案，然后添加新项目 > 选择 ASP.NET Core Web API，然后单击下一步。

输入项目名称，并确保项目位于 Angular 独立解决方案下，然后单击下一步。

我们可以看到这里选择的框架是 .NET 6.0，然后点击创建按钮。

现在我们可以看到我们的 ASP.NET Core WEB API 项目已经添加到 Angular 独立项目解决方案中。

禁用 WEB API 项目的启动浏览器

由于我们的 Angular 和 WEB API 项目解决方案都在同一个解决方案中，我们不需要为 Angular 和 WEB API 打开两个浏览器。我们的 WEB API 需要在后台运行并执行 CRUD 操作和一些业务操作，而所有数据显示和控制都将从 Angular 项目的 UI 部分完成，所以现在我们禁用 WEB API 项目的启动浏览器选项。

右键单击我们的 ASP.NET Core WEB API 项目，然后选择属性 > 选择调试 > 单击打开调试启动配置文件 UI > 取消勾选启动浏览器。

选择启动项目

现在我们需要同时运行我们的 Angular 和 ASP.NET Core WEB API 项目，并且还需要设置启动项目以在开始时启动。在这里，我们首先需要运行 WEB API 项目，然后是 Angular 项目。

右键单击 Angular 和 ASP.NET Core WEB API 解决方案并选择属性。我们可以看到默认情况下它被选为单个启动项目，在这里，我们可以看到我们的 Angular 独立项目已被选中。

为了同时运行我们的 Angular 和 ASP.NET Core 项目，我们需要选择多个启动项目，并将每个项目的操作选择为启动。请确保您的 ASP.NET Core WEB API 在 Angular 项目的上方，因为如果我们要将 ASP.NET Core 的结果绑定到 Angular 中，我们需要首先运行 WEB API 项目，然后是 Angular 项目。

构建并运行应用程序

当我们运行应用程序时，可以看到 Angular 组件无法在 Angular 页面中加载 WEB API 结果，因为我们尚未在 Angular 项目的 proxy.conf.js 文件中添加 WEB API URL。

要检查 WEB API URL，请打开 ASP.NET Core WEB API 项目中的 Properties 文件夹并打开 launchSetting.json 文件。查找 applicationURL 并选择 HTTPS URL，如下所示：

打开 Angular 项目中的 proxy.config.js 文件，并将复制的 WEB API URL 替换到目标位置，如下所示：

运行应用程序

现在当你运行应用程序时，你会看到 ASP.NET Core WEB API 的天气预报已成功绑定到 Angular 页面。

ASP.NET Core WEB API Swagger 结果

Swagger 默认添加到 ASP.NET Core WEB API 项目中，以便检查和测试 WEB API 结果。当我们运行项目时，我们可以复制目标 URL 并在 URL 中添加 swagger https://:7101/swagger/index.html，然后运行它来测试和查看 WEB API 详细信息。

app.component.ts

在 Angular 项目的 app.component 文件中，我们可以看到默认情况下已添加代码以获取 WEB API 结果并绑定到 Angular 页面中。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public forecasts?: WeatherForecast[];

  constructor(http: HttpClient) {
    http.get<WeatherForecast[]>('/weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }

  title = 'AngularStandAlone';
}

interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

学生总分

现在让我们创建一个简单的 WEB API 控制器来获取学生的总分。

创建模型类

为此，我们首先需要添加类文件来创建我们的 Model 类。右键单击 ASP.NET Core WEB API 项目，然后单击 > 添加 > 新项。选择类并将其命名为 StudentDetails.cs，然后单击添加。

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

public class StudentDetails
    {
        public String REG_Code { get; set; }
        public int StudentMark { get; set; }
    }

创建 API 控制器类

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

将空 API 控制器命名为 StudentDetailsController.cs，然后单击添加。

在控制器中，我们添加 Get 方法，该方法将创建 10 个随机的学生注册码以及 500 分的随机学生总分。为此，我们创建了一个随机范围来显示 300 到 500 分的成绩。

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

        public StudentDetailsController(ILogger<StudentDetailsController> logger)
        {
            _logger = logger;
        }

        [HttpGet(Name = "StudentDetails")]
        public IEnumerable<StudentDetails> Get()
        {
            var rng = new Random();
            int ivale = 0;
            return Enumerable.Range(1, 10).Select(index => new StudentDetails
            {
                REG_Code = "STD_000" + rng.Next(1, 100),
                StudentMark = rng.Next(300, 500),
            }).ToArray(); ;
        }
    }
}

Angular 部分

现在让我们通过添加一些主页、学生页面并将 app.component 页面的 fetchdata 详细信息绑定到主页来组织 Angular 项目。此外，让我们添加导航菜单文件夹以导航到组件。

home 组件

在 app 文件夹内添加名为 home 的新文件夹，并添加名为 home.component 的 HTML 和 TypeScript 文件。

在 home 组件中，我们可以复制 app.component 的天气预报绑定详细信息，并将其添加到此 home 组件中。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  public forecasts?: WeatherForecast[];

  constructor(http: HttpClient) {
    http.get<WeatherForecast[]>('/weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }

  title = 'angularproject3';
}

interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

home.component.html

在 HTML 中，添加以下代码以显示天气预报详细信息的结果：

<h1 id="tableLabel">Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
<p *ngIf="!forecasts"><em>Loading... Please refresh once the ASP.NET backend 
 has started. See <a href="https://aka.ms/jspsintegrationangular">
 https://aka.ms/jspsintegrationangular</a> for more details.</em></p>

<table *ngIf="forecasts">
  <thead>
    <tr>
      <th>Date</th>
      <th>Temp. (C)</th>
      <th>Temp. (F)</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let forecast of forecasts">
      <td>{{ forecast.date }}</td>
      <td>{{ forecast.temperatureC }}</td>
      <td>{{ forecast.temperatureF }}</td>
      <td>{{ forecast.summary }}</td>
    </tr>
  </tbody>
</table>

students 组件

在 app 文件夹内添加名为 students 的新文件夹，并添加名为 students.component 的 HTML 和 TypeScript 文件。

在 students 组件中，我们将从 WEB API 获取 StudentDetails 并将结果绑定到 studentdetails 对象。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-students',
  templateUrl: './students.component.html'
})
export class StudentsComponent {

  public studentdetails?: StudentDetails[];

  constructor(http: HttpClient) {
    http.get<StudentDetails[]>('/StudentDetails').subscribe(result => {
      this.studentdetails = result;
    }, error => console.error(error));
  }

  title = 'Item Sales Count';
}

interface StudentDetails {
  reG_Code: string;
  studentMark: number;
}

students.component.html

在 HTML 页面中，我们将 studentdetails 结果绑定以显示学生的成绩以及学生的注册码。

<table *ngIf="studentdetails">
  <thead>
    <tr>
      <th>Student Registratoin Code</th>
      <th>Students Total Mark</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let stddtl of studentdetails">
      <td>{{ stddtl.reG_Code }}</td>
      <td align="right">{{ stddtl.studentMark }}</td>
    </tr>
  </tbody>
</table>

navbar 组件

在 app 文件夹内添加名为 navbar 的新文件夹，并添加名为 navbar.component 的 HTML 和 TypeScript 文件。

导航栏组件用于导航到我们将在此项目中使用不同的菜单，因此在组件中，我们只需添加组件名称为 NavBarComponent，而不向类中添加任何函数。

import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavBarComponent {

}

navbar.component.html

在 HTML 页面中，我们绑定了导航路由链接，因为我们有主页和学生详情页面。

<a [routerLink]="['/home']"> Home</a> &nbsp;&nbsp;&nbsp; || &nbsp;&nbsp;&nbsp;

<a [routerLink]="['/students']"> Student Details</a>

app.component.ts

在 app 组件中，我们替换了以下代码，因为这是我们的主组件，并且我们添加了

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {   

  title = 'AngularStandAlone';
}

app.component.html

在 HTML 页面中，我们将导航栏绑定在 body 标签内，并添加 router-outlet 以在 div 标签内显示我们的组件。

<body>
  <app-navbar></app-navbar>

  <div>
    <router-outlet></router-outlet>
  </div>

</body>

app.module.ts

在 app 模块中，我们需要导入我们添加的所有新组件，并且我们还添加了 RouterModule.forRoot 用于添加所有路由和路由 URL 映射。

import { BrowserModule } from '@angular/platform-browser';
import { Injectable, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { StudentsComponent } from './students/students.component';
import { HomeComponent } from './home/home.component';
import { NavBarComponent } from './navbar/navbar.component';
@NgModule({
  declarations: [
    AppComponent,
    StudentsComponent,
    HomeComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule, HttpClientModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent, pathMatch: 'full' },
      { path: 'students', component: StudentsComponent },
      { path: 'home', component: HomeComponent },
      { path: 'navbar', component: NavBarComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

proxy.conf.js

我们需要在 Angular 项目的 proxy.conf.js 文件的上下文中添加 studentDetails 控制器。

构建和运行

构建并运行应用程序。我们可以看到“主页”和“学生详情”导航链接都已添加，我们可以导航到这两个菜单并查看这两个 WEB API 的结果。

关注点

希望本文能帮助您了解如何使用 Visual Studio 2022 开始 ASP.NET Core 和 Angular 独立项目。在下一部分中，我们将更详细地探讨如何使用 ASP.NET Core 和 Angular 制作 Admin LTE 设计。

历史

2022年6月7日：初始版本