Angular5 和 ASP.NET Core 入门

• 下载源代码 - 1.9 MB

引言

我希望大家都知道 Angular 5 已经发布。在本文中，我们将看到如何使用 Angular5TemplateCore 开始使用 Angular 5 和 ASP.NET Core 进行开发。

使用 Angular5TemplateCore 为 ASP.NET Core 开发 Angular 5 应用程序非常简单易行。让我们详细看看。

背景

必备组件

请确保您的计算机上已安装所有必需的先决条件。如果没有，请逐一下载并安装。

1. 首先，从此 链接 下载并安装 Visual Studio 2017。
2. 下载 并安装 .NET Core 2.0
3. 下载并安装 Node.js v9.0 或更高版本。我已经安装了 v9.1.0（下载 链接）。

注意

在开始项目之前，请确保您的计算机上已安装 Visual Studio 2.0 和 .NET Core 版本 2.0 或更高版本。如果没有，请从上述链接下载并安装。

先决条件安装部分

安装 Node.js

在您的计算机上安装 Node.js 版本 9.0 或更高版本。

下载 Node.js 后，将其安装在您的计算机上。

安装 Angular5TemplateCore

让我们看看如何将 Angular5TemplateCore 安装到您的 Visual Studio .NET Core 模板中。

打开 Visual Studio 2017，然后转到 文件 -> 新建项目。从左侧菜单选择 Online，然后选择 Visual C#。在列表中，搜索 Angular5TemplateCore，然后单击 OK。

关闭您的 Visual Studio，然后等待 Angular5TemplateCore 安装。安装完成后，就可以使用 ASP.NET Core 模板构建您的第一个 Angular 5 应用程序了。我们将在代码部分详细介绍。

Using the Code

现在，是时候创建我们的第一个 Angular 5 和 ASP.NET Core 应用程序了。

步骤 1 创建 Angular5TemplateCore

安装了上面列出的所有先决条件和 Angular5TemplateCore 后，在桌面上单击 开始 >> 程序 >> Visual Studio 2017 >> Visual Studio 2017。

单击 新建 >> 项目。选择 Visual C# >> 选择 Angular5Core2。输入您的项目名称，然后单击 OK。

项目创建完成后，我们可以在解决方案资源管理器中看到 ClientApp 文件夹中包含 Angular5 示例组件、HTML 和应用程序，以及 ASP.NET Core 的 Controllers 和 View 文件夹。

这里的这些文件和文件夹与我们的 ASP.NET Core Angular 2 模板包非常相似。

Package.json 文件

如果我们打开 package.json 文件，我们可以看到 Angular 5 所需的所有依赖项以及 Angular CLI 已经默认添加。

在 Package.json 中添加 Webpack

为了运行我们的 Angular 5 应用程序，我们需要在应用程序中安装 webpack。如果 webpack 默认未添加到我们的 package.json 文件中，那么我们需要手动添加它。Webpack 是一个开源的 JavaScript 模块打包器。它接收带有依赖项的模块，并生成代表这些模块的静态资源。要了解更多关于 Webpack 的信息，请 点击此处。

打开您的 package.json 文件，在 scripts 下添加以下行。

"postinstall": "webpack --config webpack.config.vendor.js"

构建并运行您的项目

现在，我们的 Angular 5 和 ASP.NET Core 应用程序已准备就绪。我们可以在浏览器中运行并查看输出。首先，构建应用程序。构建成功后，运行应用程序。

当我们运行 Angular 5 ASP.NET Core 应用程序时，我们可以看到默认的主页，左侧有菜单，以及 Counter 和 Fetch data。是的，在 Angular5Core2Template 中，当我们创建一个新项目时，默认会添加 3 个组件和 HTML 文件用于 Angular 5 演示 - Home、Counter 和 Fetch data。

在组件文件中，我们可以根据需要更改 Angular 5 类以产生输出，或者我们可以添加自己的文件夹来显示输出，其中包含组件和 HTML 文件。

更改 Home 组件和 HTML 文件

现在，让我们尝试更改 home 组件类和 HTML 文件，以在主页上显示我们的名字。

为此，我们首先编辑 home.components.ts 文件。在这里，在 Home Component 类中，我创建了一个 public 变量来显示我的名字为“myname”。

import { Component } from <a href="mailto:'@angular/core'">'@angular/core'</a>;

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {
    public myname = "Shanu";
}

在 home.html 文件中，我更改了 HTML 设计，以绑定和显示 Angular5 组件变量。

<h1>
    Welcome to <strong>{{ myname }}</strong> Angular5 and ASP.NET Core world
</h1>

刷新主页。我们将看到我的名字将从 Angular5 Component 显示在 HTML 页面上，以及欢迎消息。

同样，我们也可以找到默认的 Counter 和 Fetch data 来自 API 的示例组件和 HTML 文件已默认添加。如果需要，我们可以根据要求更改它们，或者创建我们自己的组件和 HTML 文件。

左侧菜单

在应用程序中，我们可以在左侧看到菜单。菜单使用 navmenu.component.ts 和 navmenu.components.html 显示。如果您想删除或添加菜单，可以更改 HTML 和 Angular 5 TypeScript 文件。

关注点

如果您已经使用过 ASP.NET Core Angular 2 模板包，那么使用 Angular 5 对您来说会更简单易行，因为它遵循类似的步骤。Angular 5 与 Angular 4 非常相似，具有相同的功能，但有一些高级特性。在下一篇文章中，我们将通过一些实际示例更深入、更详细地探讨使用 Angular 5 和 ASP.NET Core。

历史

• 2017/11/14 : Angular5Core2.zip - 版本 1.0