Hello World Angular 2+ 数据示例使用 JavaScriptServices .Net Core 和 PrimeNG

defwebserver

5.00/5 (6投票s)

2017年3月14日

CPOL

6分钟阅读

26959

您可以使用 JavaScriptServices 和 PrimeNG 创建由数据库驱动的 .Net Core 应用程序。

您可以使用 .Net Core、 JavaScriptServices 和 PrimeNg 创建由数据库驱动的应用程序。

实时示例

您可以在 Microsoft Azure 上实时查看运行中的应用程序： http://helloworlddata.azurewebsites.net

YouTube 视频

您可以在此处观看涵盖本文所有内容的 YouTube 视频： https://www.youtube.com/watch?v=i6ke21P-fgA

必备组件

如果您还没有安装，请安装以下先决条件

Visual Studio 2017
Node.js (版本 6 或更高版本)

创建 JavaScriptServices 项目

在您的 Microsoft Windows 计算机上创建一个 文件夹（本教程使用 Windows 10 创建）。

注意：文件夹名称中不要包含任何特殊字符。例如，感叹号 (!) 会破坏 JavaScript 代码。

您可以输入 CMD 并按 Enter 切换到命令行（仍然在该目录下）。

如果您还没有安装 JavaScriptServices，请通过输入（然后按 Enter）来安装

dotnet --install Microsoft.AspNetCore.SpaTemplates::*

屏幕将显示可用的模板。

通过输入（然后按 Enter）创建 ASP.NET Core JavaScriptServices 应用程序

dotnet new angular

应用程序将被创建。

双击 *.csproj 文件以在 Visual Studio 2017 中打开它。

它将开始恢复 .Net 依赖项和 node_modules（您可以查看 ../node_modules 目录以查看填充的项目）。

(注意：这可能需要 3-10 分钟或更长时间)

Visual Studio 将指示何时完成所有操作。

按 Ctrl+F5 无调试启动。

应用程序将生成。

应用程序将显示。

暂时关闭 Web 浏览器。

添加 PrimeNG

现在我们将安装免费的开源 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 asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

     <app>Loading...</app>

保存文件。

我们修改了 webpack.config.vendor.js 文件（添加 PrimeNg 和 Font Awesome），但它不会被正常生成过程更新。每次修改它时，我们都必须手动运行其配置。
在项目根目录的命令提示符下，运行

webpack --config webpack.config.vendor.js

(注意：如果您还没有安装 webpack 工具（例如，运行上述代码时收到错误），您需要先运行：“npm install -g webpack”)

在components 文件夹中创建一个名为prime 的文件夹，并将以下代码添加到 ..\ClientApp\app\components\prime\prime.component.html

<H1>计数器</H1>
<p>这是一个简单的 Angular 2 组件示例。</p>
<p>当前计数：<strong>{{ currentCount }}</strong></p>
<p-growl [value]="msgs"></p-growl>
<button pButton
type="button"
(click)="incrementCounter()"
label="增加"
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。

Add

<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0" />

保存并关闭文件。

在 Visual Studio 的菜单中，选择工具，然后选择 连接到数据库…

确保 数据源已选择 Microsoft SQL Server 数据库文件 (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 程序包管理器控制台。

Enter

Scaffold-DbContext "Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=C:\TEMP\HelloWorldData\Data\HelloData.mdf;Integrated Security=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

然后按 Enter。

(更新上面的连接字符串以指向项目中的 .mdf 文件位置)

脚手架化的文件将出现在 Models 目录中。

注意：如果您遇到 DBContext 无法找到的错误（Visual Studio 文本编辑器中出现红色波浪线），只需关闭 Visual Studio 并重新打开它。

重命名 DataContext 文件和类为 HelloDataContext。

接下来，我们遵循此链接上的说明： ASP.NET Core - 现有数据库。

我们删除OnConfiguring 方法。

我们将以下构造函数添加到类中

    public HelloDataContext(DbContextOptions<HelloDataContext> options) :  base(options) { }

我们将以下 using 语句添加到 Startup.cs

	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 值需要放在单行上 – 请参阅源代码以获取确切的设置)