我希望你们都知道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或更高版本。如果没有,请从上面的链接下载并安装。

先决条件安装部分

安装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文件并在脚本下添加下面的行。

  1. “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”。

  1. 从'@ angular / core' 导入{Component} ;

  2. @零件({

  3. 选择器: “家” ,

  4. templateUrl: './home.component.html'

  5. })

  6. 导出类 HomeComponent {

  7. public myname = “Shanu” ;

  8. }

在home.html文件中,我更改了HTML设计来绑定和显示Angular 5组件变量。

  1. < h1 >

  2. 欢迎来到 < strong > {{myname}} </ strong > Angular5和ASP.NET Core的世界

  3. </ 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大致相同,功能相同,但具有一定的先进性。

更多精彩文章请关注我们的微信公众号FocusDotCore

Angular 5和ASP.NET Core入门的更多相关文章

  1. Angular + asp.net core 入门

    一.简介 通俗的理解,Angular 只是一个前端框架,它只负责前端的事,但一个完整的项目还应该有后端,这其中之一可选的技术就是 asp.net core .这里简单学习一下两个框架之间的协同开发. ...

  2. CentOS开发ASP.NET Core入门教程

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...

  3. ASP.NET Core 入门教程 10、ASP.NET Core 日志记录(NLog)入门

    一.前言 1.本教程主要内容 ASP.NET Core + 内置日志组件记录控制台日志 ASP.NET Core + NLog 按天记录本地日志 ASP.NET Core + NLog 将日志按自定义 ...

  4. ASP.NET Core入门(一)

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  5. 【翻译】ASP.NET Core 入门

    ASP.NET Core 入门 原文地址:Introduction to ASP.NET Core         译文地址:asp.net core 简介           翻译:ganqiyin ...

  6. ASP.NET CORE 入门教程(附源码)

    ASP.NET CORE 入门教程 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 ...

  7. Asp.net Core 入门实战

    Asp.Net Core 是开源,跨平台,模块化,快速而简单的Web框架. Asp.net Core官网的一个合集,方便一次性Clone 目录 快速入门 安装 一个最小的应用 项目模板 路由 静态文件 ...

  8. 转载: ASP.NET Core入门系列文章

    今天在网上发现了ithome上的asp.net core 系列文章,对于新手入门还不错,这里转载一下,也方便查阅. [Day01] 從頭開始 [Day02] 程式生命週期 (Application L ...

  9. C# & ASP.NET Core 入门官方资料汇总

    借助给公司实习生培训事宜,整理了一些微软官方的适合新同学入门的资料,这里分享一下: 工具: Visual Studio 2017 Community 版本下载地址:https://www.visual ...

随机推荐

  1. Python 获取当前脚本文件路径目录

    # -*- coding: cp936 -*- import sys,os # 获取脚本文件的当前路径 def cur_file_dir(): # 获取脚本路径 path = sys.path[0] ...

  2. Win CE 6.0 获取手持机GPS定位2----示例代码 (C#)

    一.须知 1.手持机(PDA)必须有GPS模块,才能通过代码使用串口通信获取GPS相关信息 2.要清楚自己手持机(PDA)固定的GPS通信串口号,如我们公司的手持机获取GPS信息的串口为COM4 3. ...

  3. 【学习】滚动延迟加载插件scrollLoading用法

    今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为http://www.zhangxinxu.com/. 以前也写过这种效果,用的是lazyload,不过只能实现图片的加载.而 ...

  4. mac 通过brew安装php70 +php-fpm+ phalcon3.0.3

    安装php7.0.15 brew install homebrew/php/php70 brew install homebrew/php/php70-mcrypt brew install home ...

  5. Ubuntu16.04下Office替代品Office Online

    Ubuntu16.04下Office替代品 Ubuntu16.04下的office Libreoffice 这个是Ubuntu自带的Office,总是存在各种问题,如果用来阅读还是不错的,但是编辑就不 ...

  6. win7下安装Ubuntu后进不去win7的解决方法

    win7下安装Ubuntu后进不去win7的解决方法 刚刚给同学在win7下安装了Ubuntu16.04,结果在安装完后竟然无法在电脑重启后,找到win7的进入选项. 在网上找了找,都不行!就差点重装 ...

  7. PHP 支付

    蚂蚁金服开放平台 2.下载PHP的SDK&demo 3.申请应用 OR 使用沙箱环境 4.生成应用私钥&应用公钥 5.配置config.php 蚂蚁金服开放平台",对,没错, ...

  8. Ubuntu安装Flash视频插件

    http://www.linuxidc.com/Linux/2014-05/101095.htm

  9. 表单处理的方案与注意事项(servlet)

    摘要 表单是后端程序员用的与接触最多的,我这里例举了常用处理办法,与注意事项 sevlet处理代码 package myform; import java.io.IOException; import ...

  10. hack查询地址

    悲催的IE! http://browserhacks.com/