随着Web技术的快速发展新的技术层出不穷这使得Web程序的用户体验不断提升。最具代表性的就是SPA(Single Page Application)应用。技术的快速发展也有弊端那就是学习成本的不断提升。作为一名开发人员你需要不断学习、提升自己的技术以适应这个技术快速发展的时代以让自己不在这个技术快速发展的洪流中所淘汰。当然我们的老大Microsoft也是如此借着Asp.Net Core的机会发布了好几款集成目前流行的前端框架的Asp.Net Core的模板。文章后边我就具体描述以一下。你需要知道的东西你需要明白的东西1. NodeJS,这是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时的库NPM就包含在NodeJS中他具有强大的生态系统。2. NPM包管理器是Node包生态系统的管理器。可以使用他安装Angular所有的包以及依赖包。2. DotNet CLI这是微软提供的命令行接口工具。用于开发跨平台.NET程序的工具链。如果你安装了VS2017,默认应该已经安装DotNetCLI工具。3. AngularCLI这是Angular官方发布的AngularCLI工具可以使用他对Angular进行新建、编译、运行等操作。4. Asp.Net Core这是微软推出的跨平台Web应用程序。功能强大。官方文档非常完善。5. TypeScript这是一种类型化的JavaScript可以通过他编译生成JavascriptAngular就是基于TypeScript的。6. RESTful API这是一个很火热的Web应用程序API的设计理念。微软官网也写过一篇关于RESTful的文章但实在太老了。于是用aisuhua的GitHub代替了你需要了解的东西1. 翻GFW根据我国国情需要GFW是“必须要有的”这无可厚非。但是带来的问题就是开发人员的一手资料被屏蔽。所以你应该了解怎么翻GFW。2. 国内NPM源之后会细说。3. WebPack这是一个现代化的JavaScript模块打包器。具体内容可以去官网了解也许有一些没有接触过以上提到的这些工具或知识的童鞋可能会一脸懵逼但是不用担心也不用着急本文会用最浅显易懂的方式告诉你如何配置。微软SPA模板(不在本文讨论范围)先说说老大Microsoft的模板。想要安装微软官方提供的模板我们就需要用到dotnet CLI工具了。这套模板是由微软Steve Sanderson提出并研发的。关于史蒂夫·桑德森从2010年到现在在微软从事Web技术工作。并且最先加入到Asp.Net MVC3的技术团队。构建了一系列JavaScript库以及Azure的门户网站。我们所熟知的Knockout.js就是这个人主导开发的。可以说是绝对的.Net技术大牛。附上一张他的照片还有他的Twitter。有玩Twitter的可以Follow他回到正题想要安装这个模板你就需要使用DotNet CLI工具了。具体命令如下dotnet new --install Microsoft.AspNetCore.SpaTemplates::*当你使用CMD或Powershell运行后会得到一下结果可以看到微软很给力给我提供了好多模板。有Angular的有Knockout的有Aurelia的有React的有Vue的。可以说非常全面。可以使用如下DotNetCLI命令根据模板新建项目。dotnet new angular如果你了解dotnet CLI你就会明白这条命名的意义就是从当前目录使用MVC ASP.NET Core with Angular创建一个Asp.Net Core的项目。新建成功后使用如下命令还原.NET依赖包和Angular依赖包dotnet restorenpm install完成之后你就可以运行程序查看效果你不妨可以试试看期间你可能需要一个高速VPN否则你在执行npm install命令时可能会有很多Angular的包安装不上。有人会说为啥我们不直接用微软的模板反而要自己去构建Asp.Net CoreAngular的应用程序呢。其实原因很简单微软一如既往的作风就是高度集成高度封装。他所提供的这些模板中集成Server-side prerendering(服务端渲染)WebPack dev middlewareHot Module Replacement(模块热插拔)等等技术。最后再加上Angular。如果你对这些技术了解程度不够很难做到高度扩展。例如添加新的npm包也会有可能引起一些莫名其妙的异常。所以我们才要自己去构建集成Angular的Asp.Net Core的应用程序。有兴趣的童鞋可以自己去尝试一下。让我们开始把1.新建一个Asp.Net Core项目打开宇宙最强IDEVisual Studio 2017新建一个Asp.Net Core项目。并且取个名字比如AspNetCoreWithAngular4之后我们创建一个空的Asp.Net Core 程序我是用的版本是1.12. 配置我们的Asp.Net Core这一步我们需要配置一些Core的依赖包并且设置Core在VS重构时MSBuild不去编译Typescript文件因为我们要使用其他工具去编译Typescript文件。直接打开csproj文件添加如下代码代码PackageReference IncludeMicrosoft.AspNetCore.Mvc Version1.1.3 /PackageReference IncludeMicrosoft.AspNetCore.StaticFiles Version1.1.2 /在我们的项目中Microsoft.AspNetCore.Mvc包能够允许我们添加控制器并且构建WebAPI而Microsoft.AspNetCore.StaticFiles包可以让我们配置提供静态目录访问的功能。例如默认提供/wwwroot目录的访问。因为我们会使用其他工具去编译Typescript文件所以需要在PropertyGroup节点中配置TypeScriptCompileBlockedtrue/TypeScriptCompileBlocked保存csproj文件后VS2017会自动下载相关包。如果你在MacOS或者Linux环境请使用dotnet restore命令还原包。3. 配置Startup.cs文件首先在ConfigServives方法中添加MVC服务services.AddMvc();如果VS出现红色波浪线你需要关闭项目重新打开项目即可。之后删除Configure方法中的所有代码使用如下代码替换app.Use(async(context, next) {awaitnext();if(context.Response.StatusCode 404 !System.IO.Path.HasExtension(context.Request.Path.Value) !context.Request.Path.Value.StartsWith(/api/)) { context.Request.Path/index.html;awaitnext(); } }); app.UseMvcWithDefaultRoute(); app.UseDefaultFiles(); app.UseStaticFiles();这里简单说一下首先第一个app.Use中间件的作用是当系统返回404状态码并且访问的Request不包含文件扩展名并且访问Request不是以“/api/”开头的访问直接将其跳转到/index.htmlapp.UseMvcWithDefaultRoute()的意思是使用MVC的默认路由中间件。app.UseDefaultFiles()的意思是启用默认文档提供器中间件他会对只有主机的URL进行访问时搜索default.html、default.htm、index.html、index.htm文件如果有就返回内容。app.UseStaticFiles()的意思启用程序的静态文件支持也就是启用wwwroot文件夹可以通过URL访问。4. 创建一个APIController在根目录中创建一个Controllers的文件夹当然直接在根目录创建一个WebAPIController也可以。这里简单说一下VS2017 15.2(26430.14)这个版本有一个小bug就是当你使用MVC脚手架功能的时候比如上图的新建中的“控制器”亦或者在Controller的Action中使用右键新建视图的功能时中文会出现乱码。所以我推荐大家直接使用“新建项”放弃使用脚手架功能。当然在目前的项目中涉及不到上述问题。创建一个默认的ValuesController让我们来修改一下ValuesController中Get方法的返回值publicIEnumerablestringGet() {returnnewstring[] {Hello Angular4,Hello Asp.Net Core 1.1}; }创建一个Angular4的应用程序我们的Asp.Net Core服务器已经构建完成了。现在让我们来向项目中添加Angular1. 在项目位置中打开CMD或PowerShell命令行工具以PowerShell为例输如如下命令导航到项目所在目录PS C:\WINDOWS\system32 cd F:\Code\TFSProject\GitHub\AspNetCoreWithAngular4\AspNetCoreWithAngular4\AspNetCoreWithAngular 4我的这个路径有点长当人如果你觉得麻烦可以安装一个小插件。他可以直接从项目根目录打开命令行工具。插件的名字是Open Command Line你可以通过Visual Studio Marketplace下载安装。安装好之后你就可以通过如下方式直接在根目录打开命令行工具了也许有人会问为什么不用VS的PowerShell Interactive Window,我只想说我不喜欢他的界面。2. 全局安装AngularCLI如果你的机器上没有安装nodeJS你需要去官网下载nodeJS进行安装根据你的系统下载相应的安装包。node会有两个版本可供下载。一个是LTS版本也就是通常我们所说的稳定版另一种是Current版本就是尝鲜版。有新的功能。当然我推荐安装稳定版。安装成功之后我们需要处理的下一个问题就是GFW的问题。众所周知node的资源镜像是在GFW禁止访问的黑名单URL列表中。这就导致你可能在使用node的NPM包管理器安装AngularCLI的过程出现问题。不过马云家的淘宝已经有了很好的解决方案那就是国内NPM数据镜像。提到国内NPM数据镜像淘宝建立自己的NPM数据镜像他们的数据镜像与NPM官网的数据镜像是同步的时间差大约在10分左右。因为是在国内所以不会受到GFW的影响。我们需要做的就是更改NPM包管理器的镜像地址在我们的刚刚的PowerShell中使用如下命令npm config set registry https://registry.npm.taobao.org当你替换之后在不使用VPN或代理的情况下通过NPM安装包就会速度很快了。但是我要阐述一点当我们安装AngularCLI的时候其中有一个依赖项为node-sass他的指定访问一个https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-57_binding.node地址去下载该地址是被GFW屏蔽的。所以就算我们使用国内NPM镜像也会出现问题。当然最好的解决方案是设置NPM为原始镜像地址然以挂上高速VPN去安装AngularCLI。也许你本的网络很好你也可以尝试使用淘宝NPM镜像但是不要开VPN那样会很慢。就像我家和我单位的网。都是淘宝NPM镜像单位安装AngularCLI一点问题没有但是家里就出现了我上面说的node-sass下载不下来的问题了。替换完淘宝NPM镜像之后那么让我们继续使用如下命令全局安装AngularCLI注意这个只需要安装一次即可npm install –g angular/cli其中npm install是NPM安装的意思。-g是全局安装的意思是-global的简写angular/cli就是告诉NPM我们要安装AngularCLI执行后就是慢慢等待他完成吧。如果安装失败你需要执行一下命令卸载AngularCLInpm uninstall –g angular/clinpm cache clean --force并删除“C:\Users\[你用系统账户名]\AppData\Roaming\npm\node_modules”目录下的angular文件夹重复上面的安装步骤。安装成功之后你会看到如下界面OK通过上述操作我们已经在系统上安装完成了AngularCLI。3. 在Asp.NET Core 中安装Angular现在回到之前的项目路径运行如下命令在项目根目录中新建一个Angular项目ng new [你的Angular项目名称] --skip-install解析一下这条命令ng new是AngularCLI的新建命令--skip-install是npm的跳过还原包命令作用就是在当前目录下新建一个Angular项目并且跳过还原包大神别嫌我啰嗦。我要照顾一下新手。OK运行之后的结果