使用ASP.NET Core创建Angular 7应用程序：循序渐进的指南（asp.net core web api教程）

Angular 7刚刚到达。在这篇文章中，开发人员提供了在Visual Studio 2017中使用ASP.NET Core SPA模板创建Angular 7应用程序的分步指南。

最后，我们有一个新的主要版本的Angular，版本7.我使用“finally”这个词的原因不仅仅是因为人们在等待Angular的最新主要版本，而且因为有很多关于这些功能的传言Angular 7会提供。特别是自愚人节发表文章以“ Angular 7.0中的四大变化 ”出版以来。

几天前，Angular团队正式宣布Angular 7，Angular 7 引入了一些非常棒的功能，例如Angular Material的改进，性能改进和CLI改进等等。

在这篇文章中：

• 我们将看到如何使用ASP.NET Core SPA模板创建Angular 7应用程序。
• 我们还将看到此主要版本引入的功能。
• 我将演示一些Angular 7引入的Angular Material功能。

Angular7与SPA模板

让我们首先看看如何使用Visual Studio 2017创建一个带有ASP.NET Core SPA模板的Angular 7应用程序。使用.NET Core创建Angular 7应用程序的方法不止一个，但让我们来看看这个。

确保已安装Visual Studio 2017和最新的.NET Core SDK以及最新版本的Node。

在这种方法中，我们将使用Angular模板和ASP .NET Core。

在开始之前，让我们首先将Angular CLI更新到版本7.为此，请打开命令提示符并运行命令：

npm i -g @angular/cli

完成后，您的CLI将更新到版本7：

在VS 2017中使用.NET Core 2.1模板创建Angular应用程序

安装完所有这些后，打开Visual Studio 2017 – >创建新项目 – >选择Core Web应用程序：

单击“确定”，然后在下一个窗口中选择Angular，如下所示：

Visual Studio将为您创建一个结构良好的应用程序，目前在Angular 5中。

Angular 7

如果在ClientApp文件夹中打开package.json文件，您会注意到Angular版本是5.2，但我们想要创建一个Angular 7应用程序。

因此，请转到文件资源管理器并删除ClientApp文件夹。

删除文件夹后，打开命令提示符并导航到该项目并运行命令：

ng new ClientApp

此命令将使用最新版本（7）创建一个全新的Angular应用程序：

而已。我们刚刚创建了一个Angular 7应用程序。

使用以下命令运行应用程序ng serve：

Angular 7主要特点

让我们来看看Angular 7发布的一些主要功能。

CLI更具说服力

从Angular 7开始，CLI将在用户运行命令时提示用户，ng new或者ng add帮助用户选择路由，SCSS支持等功能：

如您所见，您可以回复是或否，或使用向上/向下箭头键选择选项。

Angular Material改进

组件开发工具包（CDK）已得到改进，现在我们可以使用虚拟滚动和拖放等功能。让我们看看如何使用Angular 7来完成它。

安装Angular Material

我们首先使用以下命令安装Angular Material：

npm install –save @angular/material @angular/cdk @angular/animations

完成后，添加 BrowserAnimationsModule app.component.ts：

import {BrowserAnimationsModule} from \’@angular/platform-browser/animations\’;

@NgModule({

…

imports: [BrowserAnimationsModule],

…

})

就是这样，我们现在准备使用Angular 7和Angular 7。

拖放功能

我记得有关此问题的一些Stack Overflow问题，而且，我个人希望这将成为Material的一部分。从Angular 7开始，我们将能够使用Material进行拖放。我们现在可以将项目水平，垂直，从一个列表拖动到另一个列表，重新排序列表，打开可拖动项目等。

为此，我们首先需要将DragDropModule app.component.ts 添加到如下：

import { DragDropModule } from \’@angular/cdk/drag-drop\’;

@NgModule({

…

imports: [DragDropModule],

…

})

让我们创建一个水平拖放。为此，请在app.coponent.html中添加以下代码：

<div cdkDropList cdkDropListOrientation=\”horizontal\” class=\”example-list\” (cdkDropListDropped)=\”drop($event)\”>

<div class=\”example-box\” *ngFor=\”let timePeriod of timePeriods\” cdkDrag>{{timePeriod}}</div>

</div>

接下来，我们将需要timePeriods。为此，请在app.component.ts中添加以下代码：

timePeriods = [

\’Bronze age\’,

\’Iron age\’,

\’Middle ages\’,

\’Early modern period\’,

\’Long nineteenth century\’

];

drop(event: CdkDragDrop<string[]>) {

moveItemInArray(this.timePeriods, event.previousIndex, event.currentIndex);

}

我们都准备好了。现在，运行应用程序ng serve：

你可以在这里找到更多细节。

虚拟滚动

我们可以使用版本7的Angular Material进行虚拟滚动。有了这个，我们可以根据显示大小加载和卸载DOM元素。即使滚动列表很大，它也会为用户创建非常快速的体验。

为此，我们首先需要将ScrollDispatchModule app.component.ts 添加到如下：

import { ScrollDispatchModule } from \’@angular/cdk/scrolling\’;

@NgModule({

…

imports: [ScrollDispatchModule],

…

})

让我们在Angular 7应用程序中添加虚拟滚动。为此，请在app.coponent.html中添加以下代码：

<cdk-virtual-scroll-viewport itemSize=\”50\” class=\”example-viewport\”>

<div *cdkVirtualFor=\”let item of items\” class=\”example-item\”>{{item}}</div>

</cdk-virtual-scroll-viewport>

接下来，我们将需要这些物品。为此，请在app.component.ts中添加以下代码：

items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);

而已。现在，运行应用程序ng serve：

更多细节可以在这里找到。

能够在角度材质中使用原生选择

从Angular 7开始，Angular材料将允许使用原生<select>内部a <mat-form-field>。我们知道原生选择是强大的，因为它是本机元素，本机<select>具有一些性能，可访问性和可用性优于mat-select。所以使用原生本身会很好<select>。

生产性能改进

Angular团队注意到了开发人员在生产中添加反射元数据填充的常见错误，尽管只在开发中需要它。

因此，从Angular 7开始，这将自动从polyfills.ts中删除。您可以在开发模式下运行时将其添加为构建步骤。

捆绑预算功能

有了这个，如果您的捆绑包超过2 MB – >您将被应用程序警告，如果捆绑包超过5 MB – >您将从应用程序收到错误。但它是可配置的，因此您可以更改angular.json文件中的设置：

\”budgets\”: [{

\”type\”: \”initial\”,

\”maximumWarning\”: \”2mb\”,

\”maximumError\”: \”5mb\”

}]

这样，您将习惯于创建具有尽可能低的bundle大小的应用程序。

这些是Angular 7的一些主要功能。让我们快速提一下Angular 7附带的一些功能，Stephen Fluin在他的博客中提到：

• Angular Console – 一个可下载的控制台，用于在本地计算机上启动和运行Angular项目。
• @ angular / fire – AngularFire在npm上有一个新家，并为Angular提供了第一个稳定的版本。
• NativeScript – 现在可以使用NativeScript为Web和已安装的移动设备构建单个项目。
• StackBlitz – StackBlitz 2.0已经发布，现在包括Angular语言服务，以及更多功能，如选项卡式编辑。

最后，如果您想将现有的Angular应用程序升级到Angular 7，Angular团队可以更轻松地完成此步骤。只需运行以下命令：

ng update @angular/cli @angular/core

这是一种非常快速的升级方式。

如果您有大型应用程序，可以查看此处以查看有关升级的更多详细信息：

https://update.angular.io/

您可以在此处找到我使用Angular 7创建的应用程序的源代码。希望能帮助到你！