目录
Visual Studio 2019 Angular Template项目
Visual Studio 2022 Angular独立项目
ASP.NET Core WEB API Swagger结果
介绍
一直以来，我都计划发布.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部分
在本文中，我们将了解如何开始使用.NET 6.0和Visual Studio 2022中提供的独立Angular模板。
在以前版本的Visual Studio（如2019）中，可以使用ASP.NET Core Angular Templates创建Angular项目，但在以前版本的Angular Template中，所有与Angular相关的项目都将添加到ClientAPP并包括API控制器和ASP.NET Core项目结构。在Visual Studio中，它可以被分割为Frontend UI部分和Backend API部分，默认情况下，Visual Studio 2022 ASP.CORE Angular独立项目仅包含与Angular相关的项目文件。我们看不到任何ASP.NET Core文件夹结构，如果我们想使用WEB API，那么我们可以在Angular Independent项目解决方案中添加新的WEB API项目。在本文中，我们将详细介绍这一点。
背景
先决条件
Visual Studio 2022
如果您尚未安装Visual Studio 2022，则可以从此链接下载它并将其安装在您的计算机上。
下载并安装Visual Studio 2022。
注意：社区版本对所有人免费，您可以下载社区版本，就像没有安装密钥一样，如果您有安装密钥或MSDN订阅，则可以下载专业版或企业版。
作为微软MVP，我有MSDN订阅，并且安装了专业版。
使用代码
使用Angular模板创建ASP.NET Core
安装上面列出的所有先决条件后，单击桌面上的“启动>>程序>> Visual Studio 2022 >> Visual Studio 2022”。单击“新建>>项目”。
搜索Angular模板并选择 ASP.NET Core with Angular，然后单击下一步。
输入您的项目名称，然后单击下一步。
如果要为项目使用ASP.NET Core和WEB API，则必须选中“Add integration for Empty ASP.NET Web API”然后单击“创建”按钮。
创建项目时，我们可以看到如下所示的解决方案结构：
在这里，我们可以看到添加了一些有趣的新文件，我们也可以看到在Visual Studio中，没有ASP.NET Core项目的结构。我们还可以在app文件夹中看到只有app.component和app.module Angular文件存在。
Visual Studio 2019 Angular Template项目
如果您使用过Visual Studio 2019 ASP.NET Core Angular模板，我们知道项目结构，因为它将包含Angular和ASP.NET Core项目的组合。此外，在Angular项目中，我们可以看到使用此演示工作添加了一些示例，例如主页、获取数据、主页和导航菜单文件夹，我们将很容易根据我们的要求扩展项目和添加页面。
Visual Studio 2022 Angular独立项目
正如我们在Visual Studio 2022 Angular独立项目中看到的那样，没有示例演示Angular页面，如主页、获取数据、计数器和导航栏。在这里，我们只能看到 App.component 和 app.module Angular主文件。Angular独立项目中也缺少ASP.NET Core项目结构。如果我们需要使用ASP.NET Core WEB API作为项目的后端，那么我们可以在Angular独立解决方案中添加新项目，并且可以将WEB API控制器添加到 proxy.conf.js文件中，我们将看到如何制作WEB API项目并将控件添加到我们的独立Angular项目中，详见下文：
新的Angular文件部分
ASPNetCore-https.js
此JavaScript文件为应用程序设置HTTPS，目标是使用ASP.NET Core HTTPS证书。
proy.config.js
这个JavaScript文件用于添加我们的HTTPs端口，WEB API URL作为目标，在上下文中，我们将添加我们所有的控制器和方法，以便在Angular应用程序中访问。
为空ASP.NET Web API项目添加集成
注意：为了添加ASP.NET Core WEB API项目并将API集成到我们的Angular项目中，我们必须检查为空ASP.NET Web API项目添加集成。
在这里，我们可以在下图中看到，因为我又创建了一个测试Angular独立项目，但这一次，我没有检查为空ASP.NET Web API项目添加集成。
当我们这次创建Angular独立项目时，我们可以看到Angular项目中缺少 proxy.conf.js和aspnetcore-https.js文件。为了集成ASP.NET Core和WEB API，proxy.conf.js和aspnetcore-https.js都非常重要。永远记住，如果要使用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 Independent项目解决方案下。
禁用WEB API项目的启动浏览器
由于我们的Angular和WEB API项目解决方案都在相同的解决方案中，因此我们不需要为Angular和WEB API打开两个浏览器。我们的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项目的顶部，就好像我们想在Angular中绑定ASP.NET Core结果一样，那么我们需要首先运行我们的WEB API项目，然后运行Angular项目。
生成并运行应用程序
当我们运行应用程序时，我们可以看到Angular组件无法在Angular页面中加载WEB API结果，因为我们没有在angular项目 proxy.conf.js 文件中添加WEB API URL。
若要检查WEB API URL，请从ASP.NET Core WEB API项目中打开“属性”文件夹，然后打开 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 https://localhost:7101/swagger/index.html 中添加 swagger 并运行它来测试和查看 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项目，然后单击>添加新项>。选择“Class”并将其命名为“StudentDetails.cs”然后单击“添加”。
在类中，添加属性变量，如下面的代码：
public class StudentDetails
{
public String REG_Code { get; set; }
public int StudentMark { get; set; }
}创建API控制器类
右键单击控制器文件夹，然后单击>添加>控制器。选择 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部分
现在，让我们通过添加一些主页，学生页面来组织Angular项目，并将app.component页面中的fetchdata详细信息绑定到主页。另外，让我们添加导航菜单文件夹以导航到组件。
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组件
在应用程序文件夹中添加新文件夹作为students，并添加html和typescript，然后命名为students.component：
在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组件
将新文件夹添加为应用程序文件夹内的navbar，然后添加html和typescript，名称为navbar.component。
导航栏组件用于导航到我们将在此项目中使用的不同菜单，因此在组件中，我们只是将组件名称添加为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> ||
<a [routerLink]="['/students']"> Student Details</a>app.component.ts
在应用程序组件中，我们替换以下代码，因为这是我们的主要组件，我们添加：
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模块中，我们需要导入我们添加的所有新组件，并且我们还添加了用于添加所有路由和路由URL映射的RouterModule.forRoot组件。
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进行管理LTE设计。
https://www.codeproject.com/Articles/5334406/Easy-to-learn-NET-6-0-and-Angular-Getting-Starte-2
扫一扫
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
