手把手教你aspnetcore（Angular5和ASP.NETCore入门）
手把手教你aspnetcore（Angular5和ASP.NETCore入门）在启动项目之前，请确保您的计算机上安装了Visual Studio 2.0和.NET Core 2.0或更高版本。如果没有，请从上面的链接下载并安装。注意首先，从这个链接下载并安装Visual Studio 2017 。下载并安装.NET Core 2.0下载并安装Node.js v9.0或更高版本。我已经安装了v9.1.0（下载链接）。
我希望你们都知道Angular 5已经发布了。在本文中，我们将看到如何使用Angular5TemplateCore开始使用Angular 5和ASP.NET Core。
使用Angular5TemplateCore开发一个适用于ASP.NET Core的Angular 5应用程序非常简单和容易。我们来详细看看
先决条件
确保您已经在计算机上安装了所有先决条件。如果没有，那么下载并安装所有，一个一个。
-
首先，从这个链接下载并安装Visual Studio 2017 。
-
下载并安装.NET Core 2.0
-
下载并安装Node.js v9.0或更高版本。我已经安装了v9.1.0（下载链接）。
注意
在启动项目之前，请确保您的计算机上安装了Visual Studio 2.0和.NET Core 2.0或更高版本。如果没有，请从上面的链接下载并安装。
先决条件安装部分
安装Nod.js
在您的计算机上安装Node.js 9.0或更高版本。
安装Angular5TemplateCore
我们来看看如何将Angular5TemplateCore安装到Visual Studio .NET Core模板中。
打开Visual Studio 2017并转到文件 - >新建项目。从左侧菜单中选择Online，然后选择Visual C＃。从列表中，搜索Angular5TemplateCore并单击确定。
关闭你的Visual Studio，等到Angular5TemplateCore安装完成。安装完成后，就可以使用ASP.NET Core Template构建第一个Angular 5应用程序了。我们将在代码部分详细的看到这一点。
代码部分
现在是时候创建我们的第一个Angular 5和ASP.NET Core应用程序了。
步骤1创建Angular5TemplateCore
安装完上面列出的所有先决条件和Angular5TemplateCore后，单击开始>>程序>> Visual Studio 2017 >> Visual Studio 2017，在桌面上。
点击新建>>项目。选择Visual C＃>>选择Angular5Core2。输入您的项目名称，然后单击确定。
一旦我们的项目被创建，我们可以在解决方案资源管理器中看到它，以及ASP.NET Core控制器和View文件夹中的ClientApp文件夹中的Angular5示例组件，HTML和应用程序。
在这里，这些文件和文件夹与我们的Angular 2的ASP.NET核心模板包非常相似
。Package.json文件
如果我们打开package.json文件，我们可以看到Angular 5和Angular CLI所需的所有依赖关系已被默认添加。
在Package.json中添加Webpack
为了运行我们的Angular 5应用程序，我们需要在我们的应用程序中安装webpack。如果webpack默认没有添加到我们的package.json文件中，那么我们需要手动添加它。Webpack是一个开源的JavaScript模块捆绑器。它使用依赖关系的模块并生成代表这些模块的静态资产。要了解更多关于Webpack的信息， 请点击这里。
打开你的package.json文件并在脚本下添加下面的行。
-
“postinstall”：“webpack --config webpack.config.vendor.js”
建立并运行你的项目
现在，我们的Angular 5和ASP.NET Core应用程序已经准备就绪。我们可以运行并在浏览器中看到输出。首先，构建应用程序。构建成功创建后，运行该应用程序。
当我们运行Angular 5 ASP.NET Core应用程序时，我们可以通过左侧菜单和Counter和Fetch数据看到默认主页。是的，在Angular5Core2Template中，当我们创建一个新项目时，默认情况下，3个组件和一个html文件被添加到Angular 5 demo - Home，Counter和Fetch数据中。
在组件文件中，我们可以根据需要更改Angular 5类来生成输出，或者我们可以添加自己的文件夹来显示输出，包含组件和HTML文件。
更改家庭组件和HTML文件
现在，我们尝试更改主页组件类和HTML文件，以在主页上显示具有我们的名称的输出。
为此，首先，我们编辑home.components.ts文件。在这里，在Home组件类中，我创建了一个公共变量来显示我的名字为“myname”。
-
从'@ angular / core' 导入{Component} ;
-
@零件（{
-
选择器： “家” ，
-
templateUrl： './home.component.html'
-
}）
-
导出类 HomeComponent {
-
public myname = “Shanu” ;
-
}
在home.html文件中，我更改了HTML设计来绑定和显示Angular 5组件变量。
-
< h1 >
-
欢迎来到 < strong > {{myname}} </ strong > Angular5和ASP.NET Core的世界
-
</ h1 >
刷新主页，我们可以看到，我的名字将显示在Angular 5 Component的HTML页面上，并附有欢迎消息。
与此类似，我们也可以从API示例组件中找到默认的Counter和Fetch数据，并且默认添加了HTML文件。如果我们想要，我们可以改变我们的要求，或者我们可以创建我们自己的组件和HTML文件。
左菜单
在应用程序中，我们可以看到左侧的菜单。该菜单已使用navmenu.component.ts和navmenu.components.html显示。如果你想删除或添加一个菜单，我们可以改变HTML和Angular 5 TypeScript文件。
如果您已经使用过Angular 2的ASP.NET Core Template pack，那么使用Angular 5将会更加简单和容易，因为它遵循类似的步骤。Angular 5与Angular 4大致相同，功能相同，但具有一定的先进性。
