在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程

Visual Studio 2017已经发布了很久了。做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧。

随着Google Angular4的发布。我一直在想,怎么能够用这个地表最强IDE工具编写Angular4的Asp.Net Core项目。经过不懈的研究。终于的得到了一套很好的解决方案与大家分享。 

我们的目的

随着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. ,这是微软推出的跨平台Web应用程序。功能强大。官方文档非常完善。

5. TypeScript,这是一种类型化的JavaScript,可以通过他编译生成Javascript,Angular就是基于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他

image

回到正题,想要安装这个模板,你就需要使用DotNet CLI工具了。具体命令如下:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

当你使用CMD或Powershell运行后会得到一下结果:

image

可以看到微软很给力,给我提供了好多模板。有Angular的,有Knockout的,有Aurelia的,有React的,有Vue的。可以说,非常全面。

可以使用如下DotNetCLI命令根据模板新建项目。

dotnet new angular

如果你了解dotnet CLI,你就会明白,这条命名的意义就是从当前目录使用MVC ASP.NET Core with Angular创建一个Asp.Net Core的项目。

新建成功后,使用如下命令还原.NET依赖包和Angular依赖包:

dotnet restore

npm install

完成之后你就可以运行程序,查看效果:

Generated Angular application homepage

你不妨可以试试看,期间你可能需要一个高速VPN,否则你在执行npm install命令时,可能会有很多Angular的包安装不上。

有人会说,为啥我们不直接用微软的模板反而要自己去构建Asp.Net Core+Angular的应用程序呢。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/13680.html