Angular 7 和 ASP.NET Core 2.1 入门
5.00/5 (12投票s)
使用 Angular 7 Web 应用程序 (.NET Core) 模板和 ASP.NET Core MVC 应用程序开始使用 Angular 7 和 ASP.NET Core 2.0
引言
在本文中，我们将详细介绍如何使用 Angular 7 Web 应用程序 (.NET Core) 模板和 ASP.NET Core MVC 应用程序开始使用 Angular 7 和 ASP.NET Core 2.0。我们还将详细了解如何使用 Angular 7 的虚拟滚动和拖放项目等新功能。
如果您是 Angular 新手，请阅读我的以下文章
- ASP.NET Core 1.0 RC2 和 Angular2 入门
- 使用 WEB API 的 ASP.NET Core 和 Angular 4 入门
- Angular 5 和 ASP.NET Core 入门
背景
必备组件
确保您已在计算机上安装所有先决条件。如果没有，请逐个下载并安装。
Using the Code
现在，是时候使用模板创建我们的第一个 ASP.NET Core 和 Angular 7 应用程序了。
使用模板的 Angular 7 Web 应用程序 (.NET Core)
步骤 1 - 使用模板创建 Angular 7 ASP.NET Core
安装上述所有先决条件后，在桌面上单击“开始”>>“程序”>>“Visual Studio 2017”>>“Visual Studio 2017”。
单击“新建”>>“项目”。选择“联机”>>“模板”>>“搜索 Angular 7 .NetCore 2 模板”
下载并安装模板。
我们可以看到新的 Angular 7 Web 应用程序 (.NET Core) 模板已添加。选择模板，添加您的项目名称，然后单击“确定”以使用 ASP.NET Core 创建您的 Angular 7 应用程序。
您可以看到新的 Angular7 项目已创建，我们还可以从解决方案资源管理器中看到 ASP.NET Core 控制器和 Angular 7 客户端应用程序文件夹。
如果我们打开 package.json 文件，我们可以看到新的 Angular 7 包已安装到我们的项目中。
注意：我们需要将 Angular CLI 升级到版本 7。如果您尚未安装 Angular CLI，请首先安装 Angular CLI 并升级到 Angular CLI 版本 7。
现在，让我们开始使用 Angular 部分。
首先，我们需要将 Angular CLI 安装到我们的项目中。
Angular CLI
Angular CLI 是一个命令行界面，用于使用 node.js 样式 (commonJS) 模块搭建和构建 Angular 应用程序。有关更多详细信息，请单击此处。
要将 Angular CLI 安装到您的项目中，请打开 Visual Studio 命令提示符并运行以下命令。
npm i -g @angular/cli
步骤 2 - 构建并运行应用程序
现在我们的应用程序已准备好构建和运行以查看示例 Angular 7 页面。运行应用程序后，我们可以看到一个如下所示的示例 Angular 7 页面
ClientApp 文件夹
我们的 Angular 文件将位于 ClientApp 文件夹下。如果我们要使用组件或 HTML，则打开 ClientApp 下的 app 文件夹，我们可以看到 app.Component.ts 和 app.Component.html。
现在我们可以更改组件文件中的 Title，并在应用程序 HTML 页面中显示带有日期时间的新副标题。
在我们的 app.Component.ts 文件中，我们更改了默认标题，并添加了一个新变量以获取当前日期和时间以显示在我们的 HTML 页面中。
title = 'Welcome to Shanu Angular 7 Web page';
subtitle = '.NET Core + Angular CLI v7 + Bootstrap & FontAwesome + Swagger Template';
datetime = Date.now();
在我们的 HTML 页面中，我们使用以下代码绑定了新声明的变量 datetime
<h1>{{title}}</h1>
<h3>{{subtitle}}</h3>
<h4>
Current Date and Time: {{datetime | date:'yyyy-MM-dd hh:mm'}}
</h4>
当我们运行应用程序时，我们可以看到标题已更新并显示今天的日期和时间，如下图所示
使用 ASP.NET Core Web 应用程序
步骤 1 - 创建 ASP.NET Core Web 应用程序
在桌面上单击“开始”>>“程序”>>“Visual Studio 2017”>>“Visual Studio 2017”。
单击“新建”>>“项目”。选择“Web”>>“ASP.NET Core Web 应用程序”。输入您的项目名称，然后单击“确定”。
选择 Angular 项目，然后单击“确定”。
步骤 2 – 升级到 Angular 7
默认情况下，我们可以看到 Angular 5 版本已安装在我们的项目中。我们可以从 Package.json 文件中检查这一点。
要升级到 Angular 7，首先我们从项目中删除 ClientApp 文件夹，并从命令提示符创建新的 ClientApp。
首先，我们从项目中删除 ClientApp 文件夹。
要安装并创建包含 Angular7 包的新 ClientApp，请打开命令提示符并转到我们的项目文件夹。输入以下命令并运行以安装 Angular 7 包并创建新的 ClientApp 文件夹以使用 Angular 7。
>> ng new ClientApp
安装所有 Angular 7 包将需要几秒钟，我们可以从命令窗口中看到安装包的详细信息和确认。
我们可以看到新的 ClientApp 文件夹已在我们的项目中创建，当我们打开 Package.json 文件时，Angular 7 版本已安装到我们的项目中。
注意：我们需要将 Angular CLI 升级到版本 7。如果您尚未安装 Angular CLI，请首先安装 Angular CLI 并升级到 Angular CLI 版本 7。
现在，让我们开始使用 Angular 部分。
首先，我们需要将 Angular CLI 安装到我们的项目中。
Angular CLI
Angular CLI 是一个命令行界面，用于使用 node.js 样式 (commonJS) 模块搭建和构建 Angular 应用程序。有关更多详细信息，请单击此处。
要将 Angular CLI 安装到您的项目中，请打开 Visual Studio 命令提示符并运行以下命令。
npm i -g @angular/cli
步骤 3 - 构建并运行应用程序
现在我们的应用程序已准备好构建和运行以查看示例 Angular 7 页面。运行应用程序后，我们可以看到一个如下所示的示例 Angular 7 页面
Angular 7 有哪些新功能
虚拟滚动和拖放是 Angular 7 CDK 中添加的主要功能。如果列表中有大量项目并希望快速性能滚动以加载和显示所有项目，那么我们可以使用新的 Angular 7 虚拟滚动来滚动列表中的项目。使用 Angular 7 拖放，我们现在可以将项目拖放到同一列表或另一个列表。我们将在下面详细介绍如何通过示例使用 Angular 7 虚拟滚动和拖放。
安装 Angular CDK
为了使用虚拟滚动和拖放，我们需要将 Angular CDK 包安装到我们的项目中。为此，我们打开命令提示符并转到我们的项目 ClientApp 文件夹路径，然后输入以下代码并运行命令。
我们可以在命令提示符中看到确认消息，表明 Angular CDK 包已添加到我们的项目中。
App 模块 - 将滚动模块导入我们的应用程序
为了使用虚拟滚动，在添加 CDK 项目后，我们需要将 ScrollingModule 导入到我们的 Modules 应用程序中。
打开我们的 Module.ts 文件，在这里我们将使用我们的默认 app.module.ts 导入 ScrollingModule 以在我们的应用程序中创建虚拟滚动。
在模块的 import 部分添加以下代码以导入 ScrollingModule。
import { ScrollingModule } from '@angular/cdk/scrolling';
此外，我们需要在 import 部分添加 ScrollingModule 以使用虚拟滚动。
imports: [
BrowserModule,
AppRoutingModule,
ScrollingModule
],
我们的代码将如下图所示
App 组件
为了向列表中添加项目，我们需要一个项目，为了在我们的应用程序组件中创建项目，我们创建了一个新数组并在构造函数中向数组添加项目。这样，当页面加载时，将创建带有新值的新数组项目。打开 app.component.ts 文件并在您的组件导出类中添加以下代码。
incrementValue: number[] = [];
constructor() {
for (let index = 1; index <= 200; index++) {
this.incrementValue.push(index);
}
完整的代码将如下所示
添加 CSS
对于我们的列表滚动，我们将添加以下 CSS 来设计带有圆角的列表并添加颜色。将以下 css 代码添加到您的 app.component.css 文件中
ul {
max-width: 800px;
color: #cc4871;
margin: 20px auto;
padding: 2px;
}
.list li {
padding: 20px;
background: #f8d8f2;
border-radius: 12px;
margin-bottom: 12px;
text-align: center;
font-size: 12px;
}
设计您的 HTML 页面以使用 CDK 虚拟滚动显示列表
现在，是时候设计我们的 HTML 页面以向 List 添加虚拟滚动功能，以从列表中滚动项目。打开 app.component.html 并添加以下代码以显示带有虚拟滚动功能的列表项。
在列表中，我们使用 cdk-virtual-scroll-viewport 向列表中添加虚拟滚动，在这里，我们设置 List 的宽度和高度以及每次滚动的 Itemsize。
<h2>Angular 7 Virtual Scrolling </h2>
<hr />
<ul class="list">
<cdk-virtual-scroll-viewport style="width:200px;height: 300px" itemSize="5">
<ng-container *cdkVirtualFor="let incValue of incrementValue">
<li> Loop {{incValue}} </li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>
运行应用程序
拖放
App 模块 - 将 DragDrop 模块导入我们的应用程序
为了在添加 CDK 项目后使用拖放，我们需要将 DragDrop 模块导入到我们的 Modules 应用程序中。
打开我们的 app.Module.ts 文件。在这里，我们将使用我们的默认 app.module.ts 导入 DragDrop 模块，以在我们的应用程序中创建拖放项目。
在模块的 import 部分添加以下代码以导入拖放。
import { DragDropModule } from '@angular/cdk/drag-drop';
此外，我们需要在 import 部分添加 ScrollingModule 以使用虚拟滚动。
imports: [
BrowserModule,
AppRoutingModule,
ScrollingModule ,
DragDropModule
],
我们的代码将如下图所示
App 组件
为了向列表中添加项目，我们需要一个项目，为了在我们的应用程序组件中创建 Item，我们创建了一个新 Array 并在构造函数中向数组添加项目。这样，当页面加载时，将创建带有新值的新数组项目。打开 app.component.ts 文件并在您的组件导出类中添加以下代码。
incrementValue: number[] = [];
decrementValue: number[] = [];
constructor() {
for (let index = 1; index <= 200; index++) {
this.incrementValue.push(index);
}
for (let int1 = 400; int1 >= 201; int1--) {
this.decrementValue.push(int1);
}
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.decrementValue, event.previousIndex, event.currentIndex);
}}
在这里，我们使用了用于虚拟滚动的增量数组和用于拖放的减量数组项。
现在，我们需要导入 CdkDragDrop 和 MoveItemInArray 来创建 Drop 事件，以便在列表中选定位置拖放时添加拖动的项目。
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
然后，我们在应用程序组件类中添加 drop 事件方法，以将选定的项目数组添加到选定的当前索引。
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.decrementValue, event.previousIndex, event.currentIndex);
}
完整的代码将如下所示
添加 CSS
对于我们的列表拖放，我们将添加以下 CSS 来设计我们的列表。将以下 CSS 代码添加到您的 app.component.css 文件中
.divClasslist {
width: 200px;
border: solid 1px #234365;
min-height: 60px;
display: block;
background: #cc4871;
border-radius: 12px;
margin-bottom: 12px;
overflow: hidden;
}
.divClass {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: #f8d8f2;
font-size: 14px;
}
.divClass:active {
background-color: #cc4871;
}
设计您的 HTML 页面以使用 CDK 虚拟滚动显示列表
现在，是时候设计我们的 HTML 页面以向列表添加拖放功能了。打开 app.component.html 并添加以下代码以显示带有拖放功能的列表项。
在这里，我们创建了带有 cdkDropListDropped 的 Drop 事件的 cdkDropList div 元素。我们在 cdkDroplist 内部添加了一个额外的 div 元素，用于添加具有 cdkDrag 功能的项目，以便在选定的 div 元素内拖动项目。
<h2>Angular 7 Drag and Drop </h2>
<hr />
<div cdkDropList class="divClasslist" (cdkDropListDropped)="drop($event)">
<div class="divClass" *ngFor="let decValue of decrementValue" cdkDrag>{{decValue}}</div>
</div>
运行应用程序
关注点
希望您喜欢这篇文章。在我们的下一篇文章中，我们将详细介绍如何使用 Angular 7 和 ASP.NET Core 与 Web API 执行 CRUD 操作。
历史
- 2019-01-15: ASPNETCoreAngular7.zip