在这个详细的教程中，将学习如何创建一个使用Angular 2+和ASP.NET Core的应用程序，并集成PrimeNG组件库和数据库。将从安装必要的工具开始，然后创建项目，添加PrimeNG组件，最后连接到数据库并使用API控制器检索数据。
在开始之前，请确保已经安装了以下工具：
如果还没有安装这些工具，请先进行安装。
在Windows电脑上创建一个新的文件夹，确保文件夹名称中不包含特殊字符。例如，感叹号(!)可能会导致JavaScript代码出错。
打开命令行（CMD），并确保位于新创建的文件夹中。如果还没有安装JavaScriptServices，请通过运行以下命令来安装：
dotnet --install Microsoft.AspNetCore.SpaTemplates::*
安装完成后，将看到可用的模板列表。接下来，通过运行以下命令来创建ASP.NET CoreJavaScriptServices应用程序：
dotnet new angular
应用程序将被创建。双击打开*.csproj文件，Visual Studio 2017将开始恢复.Net依赖项和node_modules（可以查看../node_modules目录来查看生成的项目）。
（注意：这个过程可能需要3-10分钟或更长时间）
当Visual Studio提示完成时，按下Ctrl+F5以无调试模式启动应用程序。应用程序将构建并显示。
现在将安装免费的开源PrimeNG Angular 2组件库。这将展示如何将大多数Angular 2+库与JavaScriptServices集成。
打开package.json文件并添加以下依赖：
"font-awesome": "^4.7.0", "primeng": "^2.0.0"
保存文件。打开webpack.config.vendor.js文件并添加以下内容：
'font-awesome/css/font-awesome.css',
'primeng/primeng',
'primeng/resources/themes/omega/theme.css',
'primeng/resources/primeng.min.css',
同时，在rules/test中添加：
|gif
保存文件。由于PrimeNG不支持预渲染，所以在..\Views\Home\Index.cshtml文件中，将以下代码更改为：
<app>Loading...</app>
保存文件。需要手动运行webpack配置，因为正常的构建过程不会更新它。在项目根目录下打开命令提示符，运行：
webpack --config webpack.config.vendor.js
（注意：如果还没有安装webpack工具，例如运行上述代码时出现错误，需要先运行："npm install -g webpack"）
在components文件夹中创建一个名为prime的新文件夹，并添加以下代码到..\ClientApp\app\components\prime\prime.component.html：
<H1>Counter</H1>
<p>This is a simple example of an Angular 2 component.</p>
<p>Current count: <strong>{{ currentCount }}</strong></p>
<p-growl [value]="msgs"></p-growl>
<button pButton type="button" (click)="incrementCounter()" label="Increment" icon="fa-check" class="ui-button-info"></button>
创建文件并在..\ClientApp\app\components\prime\prime.component.ts中添加以下代码：
import { Component } from '@angular/core';
import { ButtonModule, GrowlModule, Message } from 'primeng/primeng';
@Component({
selector: 'counter',
templateUrl: './prime.component.html'
})
export class PrimeComponent {
public currentCount = 0;
public msgs: Message[] = [];
public incrementCounter() {
this.currentCount++;
this.msgs.push({
severity: 'info',
summary: 'Info Message',
detail: this.currentCount.toString()
});
}
}
修改..\ClientApp\app\app.module.ts文件，添加以下内容：
import { FormsModule } from '@angular/forms';
import { PrimeComponent } from './components/prime/prime.component';
import { ButtonModule, GrowlModule } from 'primeng/primeng';
@NgModule({
declarations: [
...
PrimeComponent
],
imports: [
RouterModule.forRoot([
...
{ path: 'prime', component: PrimeComponent },
...
]),
FormsModule,
ButtonModule,
GrowlModule
]
})
...
在..\ClientApp\app\components\navmenu\navmenu.component.html中添加以下代码：
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/prime']">
<span class='glyphicon glyphicon-th-list'></span>
Prime
</a>
</li>
按下Ctrl+F5以无调试模式启动应用程序。当点击菜单中的Prime链接时，将看到一个使用PrimeNg组件的页面。
右键点击项目节点，选择“添加”然后“新建脚手架项…”。选择“完整依赖项”然后点击“添加”。脚手架将运行。关闭打开的ScaffoldingReadMe.txt文件。
右键点击项目节点并选择“编辑HelloWorldData.csproj”。添加以下内容：
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0"/>
保存并关闭文件。从Visual Studio菜单中选择“工具”然后“连接到数据库…”。确保选择了“Microsoft SQL Server Database File (SqlClient)”作为数据源（如果不是，请使用“更改”按钮）。
输入HelloData.mdf作为数据库名称，并指示它位于项目根目录下的名为Data的文件夹中（该文件不存在，将由Visual Studio创建）。点击“确定”，然后点击“是”以创建数据库。
在Visual Studio的“服务器资源管理器”窗口中（可以通过“视图”然后“服务器资源管理器”从Visual Studio菜单中访问），数据库将显示。展开它，右键点击“表格”节点并选择“添加新表格”。
输入以下脚本并点击“更新”按钮：
CREATE TABLE [dbo].[WeatherForecast] (
[Id] INT IDENTITY (1,1) NOT NULL,
[DateFormatted] NVARCHAR (50) NOT NULL,
[TemperatureC] INT NOT NULL,
[TemperatureF] INT NOT NULL,
[Summary] NVARCHAR(50) NOT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
点击“更新数据库”。“数据工具操作”窗口将指示更新何时完成。在“服务器资源管理器”窗口中，右键点击数据库并选择“刷新”。WeatherForecast表将显示。
右键点击表格并选择“显示表格数据”。在网格中输入示例数据。完成工作后，始终关闭数据库连接以防止锁定。
在“解决方案资源管理器”中，右键点击项目节点并选择“管理NuGet包”。搜索并安装：
Microsoft.EntityFrameworkCore.Tools
打开“NuGet包管理器控制台”。输入：
Scaffold-DbContext "Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=C:\TEMP\HelloWorldData\Data\HelloData.mdf;Integrated Security=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
（请更新上面的连接字符串以指向项目中.mdf文件的位置）
生成的文件将出现在Models目录中。
注意：如果遇到DBContext找不到错误（Visual Studio文本编辑器中的红色波纹线），只需关闭Visual Studio然后重新打开即可。将DataContext文件和类重命名为HelloDataContext。
接下来，按照这个链接的指示进行操作：ASP.NET Core - Existing Database。移除OnConfiguring方法。向类添加以下构造函数：
public HelloDataContext(DbContextOptions<HelloDataContext> options) : base(options) { }
在Startup.cs中添加以下using语句：
using HelloWorldData.Models;
using Microsoft.EntityFrameworkCore;
在ConfigureServices部分添加以下代码：
services.AddDbContext<HelloDataContext>(options => options.UseSqlServer(
Configuration.GetConnectionString("HelloWorldDataDatabase")));
在appsettings.json文件中添加以下设置：
"ConnectionStrings": {
"HelloWorldDataDatabase":
"Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=C:\\TEMP\\HelloWorldData\\Data\\HelloData.mdf;Integrated Security=True;"
},
（注意：HelloWorldDataDatabase值需要在一行上 - 请查看源代码以获取确切的设置）
右键点击“控制器”文件夹并选择“添加”然后“新建脚手架项…”。选择“API”，然后“使用Entity Framework的API控制器与操作”，然后点击“添加”。
将创建一个API控制器，用于从数据库检索数据。
现在将指向新的API控制器的Angular页面。打开..\ClientApp\app\components\fetchdata\fetchdata.component.ts文件，并将.get地址更改为：
'/api/WeatherForecasts'
当运行应用程序，并点击“获取数据”链接时，数据将从数据库中检索。
以下是一些有用的链接，可以帮助进一步了解Angular 2+和ASP.NET Core的集成：
http://lightswitchhelpwebsite.com/Downloads.aspx