ASP.NET Core + Angular 2 Template for Visual Studio

多个月以来，我和多个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或者其余编辑器上对于Angular二、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应用呢？）

它真正的意义在于：

1. 它极大的提升了用户体验：及时他们是在一个较慢的网络环境或者设备上，也能够在很快的看到你想显示给他们的内容，在这背后，你可能又一个很大的捆绑javascript正在下载、转换而且执行，而后紧接着接管页面实现绑定你的那些功能，这比花很长时间加载javascript代码，让客户看到一个空白的网页好的多。
2. 它支持一些能不运行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/

本文翻译征得了原做者Steve Sanderson的赞成，感谢他为ASP.NET Core作出的杰出贡献。

转载请注明出处

白玉龙 2017/1/9

 

个人博客即将搬运同步至腾讯云+社区，邀请你们一同入驻：https://cloud.tencent.com/developer/support-plan