NET Core + Angular 2
ASP.NET Core + Angular 2 Template for Visual Studio
2017-01-11 08:45 by 小白哥哥, 2069 阅读, 19 评论, 收藏, 编辑
多个月以来,我和多个Github上的社区贡献者一起建立支持库、包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中,这个模板包含一下这些方面:
- 服务端预加载(预渲染):这样你的UI可以快速的显示,甚至在浏览器下载Javascript之前。
- Webpack中间件集成:在开发期间,你不需要一直重新编译你的客户端项目,或者你可以用一个watcher工具在后台帮你做这些事。
- 模块热拔插:在开发期间,一旦你编辑了一个Typescript文件、CSS文件、或者其他客户端资源,你的改变也将在不刷新页面的情况下立即推送到浏览器。
- 快速构建:对于开发来说,你不需要再等待再每次更改之后,webpack去重新解析第三方代码,因为第三方类库将会独立到另外的一个bundle中,另外,超快速的构建包含了所有的map文件便于调试,再发布版本的文件中却将直接输出压缩版本,再发布过程中,这些工作将自动完成。
那如果你想使用一个不一样的framework呢?如果你倾向于React、React+Redux或者Knockout,我们也同样为他们提供了模板。
假如你是在Linux和MacOS开发,或者使用其他IDE,使用我们的Yeoman生成器来获得在VS Code或者其他编辑器上对于Angular2、React、React+Redux或者knockout项目的相同支持,.NET Core是完全跨平台的。
安装
首先,确保你已经安装了一下必须内容,没有他们事情就无法进行下去了:
- Visual Studio 2015 Update3:注意Update2是不够的,你需要Update3,因为它修复了一些关于npm的bug,而且它是使用Typescript的先决条件。
- .NET Core 1.0.1
- TypeScript 2.0 for Visual Studio 2015: 如果你的VS2015一直"抱怨" Cannot find name 'require',这就是因为你忘记了安装本插件。
- Node.js 4及以上: 因为一些issue ,我们暂时不支持Node 0.x,使用node -v检查你的Node版本。
当你确认过以上内容安装之后,下载并安装 ASP.NET Core Template Pack Extension
创建并且运行项目
当你完成安装以上所有内容后,你可以打开VS2015 创建新项目,展开Web目录,选择 ASP.NET Core Angular2 Starter Application(.NET Core)
键入一个名字,点击OK,现在耐心等待一段时间,让Node.js安装所有依赖项目,考虑你的网络环境,这可能需要一段时间(而且,考虑国内环境)
一切就绪之后,项目中看起来可能回出现一点问题,但是实际上并不是这样,当VS2015完成安装依赖后将会显示not installed
然后,VS犯了个错,事实上是因为一个只在macos上的可选依赖没有安装成功,你可以选择视而不见,但是如果你是个强迫症患者,那么看这里,追随大神的脚步,去解决掉它。
现在,你可以运行这个项目了,按下Ctrl+F5试试吧,以下内容将会显示在你的浏览器里:
服务端预渲染
在浏览一遍这个站点之后,你会发现一些简单的angluar2 component的例子,这看起来倒不是什么牛逼了的事,但是歧视已经在你看不见的地方发生了一些牛逼拉瞎的事情。
第一件事,虽然通常angular2运行在浏览器里,但是ASP.NET Core Server也可以让他运行在服务器端,所以它可以仅将HTML代码发送到浏览器,不需要javascript就可以显示内容。
为了证明它,你可以通过禁用浏览器的Javascript功能,然后刷新页面来查看内容,对于Chrome来说,你可以打开F12控制台,点击设置,在里面找到Disable Javascript复选框,并且反选它。
刷新页面,你会发现一切看起来和之前一样,左边的tab还是可以工作,但是一些依赖javascript的内容就不再可以运行了,比如counter。
服务器端预加载的意义何在?
意义并不在于让支持哪些不运行javascript的浏览器,它只是一种极端情况而已(如果为了这种极端情况,那还为什么要建立一个SPA应用呢?)
它真正的意义在于:
- 它极大的提高了用户体验:及时他们是在一个较慢的网络环境或者设备上,也可以在很快的看到你想显示给他们的内容,在这背后,你可能又一个很大的捆绑javascript正在下载、转换并且执行,然后紧接着接管页面实现绑定你的那些功能,这比花很长时间加载javascript代码,让客户看到一个空白的网页好的多。
- 它支持一些能不运行javascript的爬虫:对于搜索引擎来说,返回简单的HTML代码对于他们来说是更简单的理解和收录的。
假如你不想使用预加载,可以通过移除在Views/Home/Index.cshtml中的app标签的asp-prerender-module属性来禁用它。
Webpack集成
当前系统里的代码使用typescript编写,这就是说你需要在运行它之前先构建它,就像你使用SASS一样,需要在使用之前编码,甚至捆绑和压缩它。
目前最兴盛的modern javascript构建系统是Webpack,它类似Grunt和Gulp,但是在2017的今天(原文中是2016),Webpack是最流行的typescript编译、捆绑和压缩工具,我们在template中使用它的几个非常酷的功能:
Webpack 开发中间件
通常来说,一旦你改变任何一个Typescript文件,你都需要去运行webpack来重新生成javascript文件,但是webpack开发中间件会帮助你做这些工作。
如果你的项目运行在VS默认开发模式下,webpack会在后台监控你每一个到http://yoursite/dist的请求,它处理每一个请求并且返回一个编译过的代码文件。
模块热拔插(HMR)
在有任何代码修改之后,通常我们需要刷新页面来应用这些修改,但是这对于效率和调试方便性来说是很不友好的。
模块热拔插(HMR)解决了这个问题,在默认的开发模式下,它会监测对于angular项目文件的任何改变(Typescript,css,html),当改变发生,它会自动触发一次快速的编译,并且托送所有改变的文件到活动的浏览器窗口,你的应用程序将会在不刷新页面的情况下啊立即应用改变。
你可以通过打开控制才来观测它的工作,当VS开始调试,浏览器控制台将会显示以下内容:
看到[HMR] Connected的字眼了吗?它代表已经准备好接收新的文件了,尝试更改一个源文件。比如:ClientApp/app/components/home/home.component.html。
原文地址:http://www.dotnet.online/Article/66/ASP-NETCoreAngular2TemplateforVisualStudio
源地址:http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/
NET Core + Angular 2的更多相关文章
- 52abp框架asp.net core & Angular快速开发实战视频教程
课程标题 52abp框架asp.net core & Angular全栈开发实战视频课程 课程简介 从零开始学 52ABP企业开发框架,企业项目是如何开发和技术选型,代码如何管理,团队协同开发 ...
- publish dotnet core angular spa app to docker
公司一个使用Angular开发的应用准备下个版本使用.Net Core开发后台, 刚好可以用到.Net Core Angular Spa模板, 而且最近也在学习Docker, 于是就想把它融汇贯通, ...
- .NET Core +Angular 项目 部署到CentOS
前言: 最近公司需要开发项目能在Linux系统上运行,示例开发项目采用.Net Core + Angular开发:理论上完全支持跨平台. 但是实践才是检验真理的唯一标准:那么还是动手来验证实现下:过程 ...
- ASP.NET Core + Angular 2 Template for Visual Studio
多个月以来,我和多个Github上的社区贡献者一起建立支持库.包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项 ...
- .Net Core + Angular Cli / Angular4 开发环境搭建
一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm ...
- .Net Core+Angular Cli/Angular4开发环境搭建教程
一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm ...
- 关于.Net Core+Angular+Ueditor富文本编辑器的使用方式
博客:https://www.cnblogs.com/24klr/ 资料:https://www.jianshu.com/p/0b21a1324d47 GitHub:https://github.co ...
- ABP .Net Core API和Angular前端APP集成部署
前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...
- ASP.NET Core知多少(6):VS Code联调Angular + .NetCore
ASP.NET Core知多少系列:总体介绍及目录 1. 引言 最近在看<程序员的成长课>,讲到程序员如何构建技能树,印象深刻.作为一名后台开发的程序员,深感技能单一,就别说技能树了.作为 ...
随机推荐
- 三款功能强大代码比较工具Beyond compare、DiffMerge、WinMerge
我们经常会遇到需要比较同一文件的不同版本,特别是代码文件.如果人工去对比查看,势必费时实力还会出现纰漏和错误,因此我们需要借助一些代码比较的工具来自动完成这些工作.这里介绍3款比较流行且功能强大的工具 ...
- Java_Path_01_路径问题
二.参考资料 1.java 路径问题 2.Java路径问题最终解决方案—可定位所有资源的相对路径寻址 3.Java获取文件的路径 4.Thread.currentThread().getContext ...
- bytearray类型
bytearray类型是python中的二进制数组类型,返回一个字节数组. byte=bytearray(str,encoding,error) str:待转化的字符串,若该值为字符串,则encodi ...
- MySQL 单笔订单满6个及以上产品且金额>=300赠送优惠券_20161103
活动内容: 单笔订单满6个及以上产品(帽子.浴巾除外),金额满赠300元,即赠送300-10元(除帽子.浴巾外)优惠券一张.需求数据:满足条件的用户ID活动时间:11.2-11.5(4天)活动规则:① ...
- 数据结构与算法(4)----->链表、二分搜索
1. 链表的基本概念 链表和数组一样都是一种线性结构; 数组是一段连续的存储空间; 链表空间不一定保证连续,是临时分配的; 链表的分类 按方向: 单链表:每个节点只能通过next指针指向下一个节点; ...
- DataGrid 滚动特定的行或者列
DataGrid 滚动特定的行或者列. DataGrid.ScrollIntoView Method (Object, DataGridColumn) .NET Framework 4.5 Silve ...
- go http 下载视频(TS码流文件)(推荐一个网站学习 go example)
视频 http下载代码 dn.go(注意:代码很ugly,没怎么花时间) 总体感觉特别简单,网上看了下 net/http ,io这2个库的使用, 几分钟就写完了,感觉cpp 在做工具这块 开发效率的 ...
- strTemp.Format ("%.*lf",3,600.0);
CString strTemp; strTemp.Format ("%.*lf",3,600.0); 这句话的含义?求指教 优质解答 这就是一个格式化输出,分号之前的CStri ...
- sass安装方法,绝对好用的方式
系统重做了,很多东西都重装,sass也一样,结果在安装的过程中遇到了问题,这里记录下,也给同样遇到问题的朋友们一个思路.本方法是参照http://www.w3cplus.com/sassguide/i ...
- windows64位如何安装pyspider并运行
1.下载whl文件: http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 2.安装该文件 3.可能碰到问题,pip的版本低了,需要更新一下pip的版本.更新 ...