Angular 5和ASP.NET Core入门
我希望你们都知道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大致相同,功能相同,但具有一定的先进性。
更多精彩文章请关注我们的微信公众号FocusDotCore:
Angular 5和ASP.NET Core入门的更多相关文章
- Angular + asp.net core 入门
一.简介 通俗的理解,Angular 只是一个前端框架,它只负责前端的事,但一个完整的项目还应该有后端,这其中之一可选的技术就是 asp.net core .这里简单学习一下两个框架之间的协同开发. ...
- CentOS开发ASP.NET Core入门教程
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...
- ASP.NET Core 入门教程 10、ASP.NET Core 日志记录(NLog)入门
一.前言 1.本教程主要内容 ASP.NET Core + 内置日志组件记录控制台日志 ASP.NET Core + NLog 按天记录本地日志 ASP.NET Core + NLog 将日志按自定义 ...
- ASP.NET Core入门(一)
大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...
- 【翻译】ASP.NET Core 入门
ASP.NET Core 入门 原文地址:Introduction to ASP.NET Core 译文地址:asp.net core 简介 翻译:ganqiyin ...
- ASP.NET CORE 入门教程(附源码)
ASP.NET CORE 入门教程 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 ...
- Asp.net Core 入门实战
Asp.Net Core 是开源,跨平台,模块化,快速而简单的Web框架. Asp.net Core官网的一个合集,方便一次性Clone 目录 快速入门 安装 一个最小的应用 项目模板 路由 静态文件 ...
- 转载: ASP.NET Core入门系列文章
今天在网上发现了ithome上的asp.net core 系列文章,对于新手入门还不错,这里转载一下,也方便查阅. [Day01] 從頭開始 [Day02] 程式生命週期 (Application L ...
- C# & ASP.NET Core 入门官方资料汇总
借助给公司实习生培训事宜,整理了一些微软官方的适合新同学入门的资料,这里分享一下: 工具: Visual Studio 2017 Community 版本下载地址:https://www.visual ...
随机推荐
- Python 获取当前脚本文件路径目录
# -*- coding: cp936 -*- import sys,os # 获取脚本文件的当前路径 def cur_file_dir(): # 获取脚本路径 path = sys.path[0] ...
- Win CE 6.0 获取手持机GPS定位2----示例代码 (C#)
一.须知 1.手持机(PDA)必须有GPS模块,才能通过代码使用串口通信获取GPS相关信息 2.要清楚自己手持机(PDA)固定的GPS通信串口号,如我们公司的手持机获取GPS信息的串口为COM4 3. ...
- 【学习】滚动延迟加载插件scrollLoading用法
今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为http://www.zhangxinxu.com/. 以前也写过这种效果,用的是lazyload,不过只能实现图片的加载.而 ...
- 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 ...
- Ubuntu16.04下Office替代品Office Online
Ubuntu16.04下Office替代品 Ubuntu16.04下的office Libreoffice 这个是Ubuntu自带的Office,总是存在各种问题,如果用来阅读还是不错的,但是编辑就不 ...
- win7下安装Ubuntu后进不去win7的解决方法
win7下安装Ubuntu后进不去win7的解决方法 刚刚给同学在win7下安装了Ubuntu16.04,结果在安装完后竟然无法在电脑重启后,找到win7的进入选项. 在网上找了找,都不行!就差点重装 ...
- PHP 支付
蚂蚁金服开放平台 2.下载PHP的SDK&demo 3.申请应用 OR 使用沙箱环境 4.生成应用私钥&应用公钥 5.配置config.php 蚂蚁金服开放平台",对,没错, ...
- Ubuntu安装Flash视频插件
http://www.linuxidc.com/Linux/2014-05/101095.htm
- 表单处理的方案与注意事项(servlet)
摘要 表单是后端程序员用的与接触最多的,我这里例举了常用处理办法,与注意事项 sevlet处理代码 package myform; import java.io.IOException; import ...
- hack查询地址
悲催的IE! http://browserhacks.com/