在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序 - SmallProg(2)_H5之家

app.Use(async (context, next) => { await next(); if (context.Response.StatusCode == 404 && !System.IO.Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith()) { context.Request.Path = ; await next(); } }); app.UseMvcWithDefaultRoute(); app.UseDefaultFiles(); app.UseStaticFiles();

这里简单说一下，首先第一个app.Use中间件的作用是当系统返回404状态码并且访问的Request不包含文件扩展名并且访问Request不是以“/api/”开头的访问直接将其跳转到/index.html

app.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方法的返回值：

public IEnumerable<string> Get() { [] { , }; }

创建一个Angular4的应用程序

我们的Asp.Net Core服务器已经构建完成了。现在让我们来向项目中添加Angular

1. 在项目位置中打开CMD或PowerShell命令行工具

以PowerShell为例，输如如下命令，导航到项目所在目录：

PS C:\WINDOWS\system32> cd F:\Code\TFSProject\GitHub\AspNetCoreWithAngular4\AspNetCoreWithAngular4\AspNetCoreWithAngular 4

我的这个路径有点长，当人如果你觉得麻烦，可以安装一个小插件。他可以直接从项目根目录打开命令行工具。插件的名字是：

Open Command Line，你可以通过Visual Studio Marketplace下载安装。安装好之后，你就可以通过如下方式直接在根目录打开命令行工具了：

解析一下这条命令：

ng new是AngularCLI的新建命令

--skip-install是npm的跳过还原包命令

作用就是在当前目录下新建一个Angular项目并且跳过还原包

大神别嫌我啰嗦。我要照顾一下新手。

OK，运行之后的结果：

4. 目录调整

回到VS，你会发现，目录中多了一个Angular的目录：

这就是刚刚我们使用AngularCLI安装后的文件。

让我们调整一下目录结构，已使Angular能更好的集成到Core中：

将Angular文件夹下的所有文件拖拽到系统根目录下。并且删除Angular文件夹。调整后的结果：

啰嗦几句，其中package.json是Angular的所有包文件，你可以打开看一下，其中包含许多除了Angular包以外的依赖包。

如果你想了解这些文件都是干嘛的，作用是什么，请参考Angular官网

之后我们需要把src文件夹重命名一下，当然也可以不重命名，为了看着方便，我把他重命名为ClientApp。

5. 启用Angular的HTTP模式和表单绑定模式

打开ClientApp/app/app.module.ts文件，加入FormsModule和HttpModule并且在NgMudule导入

这里插一句，由于我们在安装Angular时使用了--skip-install，所以这里会提示我们@angular组件找不到，不过没关系，我们会在之后还原Angular的相关包

import { BrowserModule } ; import { NgModule } ; import { FormsModule } ; import { HttpModule } ; import { AppComponent } ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export ; import { Http } @Component({ selector: , templateUrl: , styleUrls: [] }) export class AppComponent implements OnInit { constructor(private _httpService: Http) { } apiValues: string[] = []; ngOnInit() { ).subscribe(values => { this.apiValues = values.json() as string[]; }); } }