从Angular5和ASP开始。网络核心
介绍 我希望你们都知道Angular 5已经发布了。在这篇文章中，我们将看到如何开始使用Angular 5和ASP。NET Core使用Angular5TemplateCore。 为ASP开发一个Angular 5应用程序非常简单和容易。NET Core使用Angular5TemplateCore。让我们仔细看看。 背景 先决条件 确保已在计算机上安装了所有先决条件。如果没有，那么下载并安装所有，一个一个。 首先，从这个链接下载并安装Visual Studio 2017。下载并安装Node.js v9.0或以上版本。我已经安装了v9.1.0(下载链接)。 请注意 在启动项目之前，请确保您的计算机上已经安装了Visual Studio 2.0和。net Core version 2.0或更高版本。如果没有，请从以上链接下载并安装。 先决条件安装部分 安装node . js 在您的计算机上安装Node.js 9.0或更高版本。 在下载节点。js，安装到你的电脑上。 安装Angular5TemplateCore 让我们看看如何将Angular5TemplateCore安装到Visual Studio . net核心模板中。 打开Visual Studio 2017，点击File ->新项目。从左侧菜单中选择Online，然后选择Visual c#。从列表中搜索Angular5TemplateCore并单击OK。 关闭Visual Studio并等待Angular5TemplateCore安装。安装完成后，就该使用ASP构建第一个Angular 5应用程序了。网络核心模板。我们将在代码部分中详细了解这一点。 使用的代码 现在，是时候创建第一个Angular 5和ASP了。网络核心应用程序。 步骤1创建Angular5TemplateCore 在安装了上面列出的所有先决条件和Angular5TemplateCore之后，单击开始>>项目在祝辞Visual Studio 2017 >>Visual Studio 2017，在你的桌面上。 单击New祝辞祝辞项目。选择Visual c# >>选择Angular5Core2。输入项目名称并单击OK。 项目创建后，我们可以在解决方案资源管理器中看到它与Angular5样例组件、HTML和ClientApp文件夹中的app，以及ASP。NET Core控制器和视图文件夹。 这里，这些文件和文件夹非常类似于我们的ASP。Angular 2的NET Core模板包。 包中。json文件 如果我们打开包裹。我们可以看到Angular 5需要的所有依赖项，Angular CLI已经默认添加了。 在Package.json中添加Webpack 为了运行我们的Angular 5应用程序，我们需要在应用程序中安装webpack。如果webpack默认没有添加到我们的包中。json文件，然后我们需要手动添加。Webpack是一个开源的JavaScript模块包。它接受具有依赖关系的模块，并生成表示这些模块的静态资产。如欲了解更多有关Webpack的资料，请按这里。 打开你的包。json文件，并在脚本下面添加下面一行。 隐藏,复制Code
"postinstall": "webpack --config webpack.config.vendor.js"
构建并运行项目 现在，我们的Angular 5和ASP。NET Core应用程序准备好了。我们可以在浏览器中运行并查看输出。首先，构建应用程序。成功创建构建后，运行应用程序。 当我们运行Angular 5 ASP时。NET Core应用程序，我们可以看到默认的主页，左边的菜单和计数器和获取数据。是的，在Angular5Core2Template中，当我们创建一个新项目时，默认情况下，3个组件和一个HTML文件被添加到Angular5演示中——Home、Counter和Fetch数据。 在组件文件中，我们可以根据需要改变Angular 5类来生成输出，或者我们可以添加自己的文件夹来显示输出，包含组件和HTML文件。 改变家组件和HTML文件 现在，让我们尝试更改home组件类和HTML文件，以在主页上显示带有我们名字的输出。 为此，首先编辑home.components.ts文件。在这里，在Home组件类中，我创建了一个公共变量来显示我的名字为“myname”。 隐藏,复制Code
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组件变量。 隐藏,复制Code
<h1>
Welcome to <strong>{{ myname }}</strong> Angular5 and ASP.NET Core world
</h1>刷新主页。我们可以看到我的名字将显示在html页面从Angular5组件以及欢迎消息。 同样，我们也可以找到默认的计数器并从API样例组件中获取数据，HTML文件已经默认添加。如果需要，我们可以将其更改为我们的需求，或者我们可以创建自己的组件和HTML文件。 左菜单 在应用程序中，我们可以看到左侧的菜单。菜单已经使用navmenu. components.com .ts和navmenu. components.com .html显示。如果你想要移除或添加一个菜单，我们可以改变HTML和Angular 5 TypeScript文件。 的兴趣点 如果您已经使用过ASP。Angular 2的NET Core模板包，这样你在Angular 5中工作就会更简单，因为它遵循的步骤与Angular 5相似。Angular 5主要是similar到Angular 4有相同的特性，但是有一些高级的级别。在我们的下一篇文章中，我们将通过一些使用Angular 5和ASP的实时示例来更深入、更详细地了解。净的核心。 历史 2017/11/14: Angular5Core2.zip 1.0版本 本文转载于：http://www.diyabc.com/frontweb/news17317.html
