我想在ASP.NET Core上运行单页应用程序
这是为了创建一个前端使用Angular等SPA框架，后端使用ASP.NET Core的环境的提示。
实际上，即使不介绍下面要讲的事情，已经整齐划一地分发了。然而，即使仔细看里面，我还是不太明白，所以我自己试着整齐划一一下。
暂时给我那个吧
想做的事情
-
- サーバーはASP.NET Coreで使っているKestrelを使いたい
@angular/cliを使ってビルドされたものをフロントとして使いたい
AngularのRouting機能を使ってページ遷移したい
The environment.
-
- dotnet cli 1.1.0
@angular/cli 1.0.0
创建ASP.NET Core项目
我可以很容易通过Visual Studio创建它，但在这里我将尝试使用命令来创建它。
mkdir server
cd server
dotnet new webapi
dotnet restore
添加库
添加一些必要的库以运行SPA。
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp1.1</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
+ <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.0" />
+ <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" />
</ItemGroup>
</Project>
编辑 csproj 文件后，再次执行 dotnet restore 命令。
编辑Startup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
+ app.UseStaticFiles();
- app.UseMvc();
+ app.UseMvc(routes =>
+ {
+ routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
+ routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
+ });
}
请将上述内容翻译成中文。
在以前的文章《我制作了一个可以在Slack上对特定关键词做出反应并自动添加反应的机器人》中，我已经写过了，app.UseXXX的调用顺序非常重要。请暂时按照上面的顺序进行调用。
关键在于UseMvc方法的作用。在这里设置了路由。
首先，MapRoute 是用于访问 ASP.NET Core MVC 控制器的路由设置。当通过 URL 指定根路径时，将执行名为 HomeController 的控制器的 Index 方法。因此，在此之后需要创建 HomeController。
接下来，MapSpaFallbackRoute 也指定了 HomeController 的 Index。虽然看起来两者做了同样的事情，但实际上这是 SPA 中的重要设置。
地图SpaFallbackRoute的功能
首先，Angular端也有路由机制。URL也会像/page1那样进行重写。但实际上，它只是在index.html中巧妙地使用javascript，看起来好像在访问这个URL一样。(所以它被称为单页应用)
那么，如果直接访问这个URL会怎么样呢？Angular只有一个index.html文件，而没有page1/index.html之类的内容。因此，在这种情况下，会返回404错误。
防止这种情况发生的是MapSpaFallbackRoute的作用。它的设置是当指定了一个不存在的路径时，URL保持不变，只需执行HomeController的Index方法。
换句话说，通过将Angular的index.html返回给HomeController的Index方法，可以实现所有的路由设计都能顺利运行?。
增加HomeController.cs
我知道你的”Controllers”文件夹已经存在，但是我要在这个文件夹里新增一个”HomeController.cs”文件。
using Microsoft.AspNetCore.Mvc;
namespace server.Controllers
{
/// <summary>
/// Default MVC Controller
/// </summary>
public class HomeController : Controller
{
/// <summary>
/// Open the wwwroot/index.html
/// </summary>
public IActionResult Index() => File("/index.html", "text/html");
}
}
请根据您的环境调整命名空间。
这里所做的是简单地将wwwroot/index.html作为响应返回。然后，只需将Angular放在wwwroot文件夹中即可。如果没有wwwroot文件夹，请在csproj所在的文件夹中创建一个名为wwwroot的新文件夹。
ASP.NET Core方面完成了。
创建一个Angular项目
接下来，我们来创建Angular端。工作文件夹可以在任何地方。
ng new --routing client
cd client
ng generator component page1
因为客户的部分将成为应用程序的名称，所以您可以更改为您喜欢的任何内容。
我们为了路由目的，创建了一个名为page1的新组件。
编辑app-routing.module.ts
加上 –routing 选项时，会在 app 文件夹中创建该文件。在这里添加到 page1 的路由。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
+ import { Page1Component } from './page1/page1.component';
const routes: Routes = [
{
+ path: 'page1',
+ component: Page1Component
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这就是结束了。
发布
ng build --prod
在dist文件夹中，已经包含了创建的完整前端文件，现在将其复制到ASP.NET Core的wwwroot文件夹中。
执行
进入ASP.NET Core文件夹，使用cd命令。
运行 dotnet
当服务器启动后，访问http://localhost:5000/可以在浏览器中显示Angular页面。我认为即使访问http://localhost:5000/page1，页面也不会显示404错误，而是正常显示页面。
此外，访问http://localhost:5000/api/values可以获取到JSON数据，这是由ASP.NET Core的ValuesController返回的请求结果。当然，也可以从Angular访问API。
