下面是一个使用Angular 9和dotnet WebAPI的简单示例,包括路由的用法。
首先,安装Angular CLI并创建一个新的Angular项目:
npm install -g @angular/cli
ng new my-app
cd my-app
然后,创建一个名为home.component.ts
的组件,用于显示主页内容:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: `
Welcome to the Home Page
This is the home page content.
`,
})
export class HomeComponent {}
接下来,在app.module.ts
中导入并声明此组件:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
];
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的代码中,我们定义了一个空路由,将其指向HomeComponent
。
接下来,创建一个名为api.controller.cs
的控制器,用于处理WebAPI请求:
using Microsoft.AspNetCore.Mvc;
namespace MyApi.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ApiController : ControllerBase
{
[HttpGet]
public IActionResult Get()
{
return Ok("This is the API response.");
}
}
}
在上面的代码中,我们定义了一个GET请求处理程序,该处理程序返回一个简单的字符串作为API响应。
接下来,配置路由以映射到API控制器。在Startup.cs
文件中,添加以下代码片段:
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace MyApi
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}
}
在上面的代码中,我们启用了API控制器,并配置了路由以映射到控制器。
最后,使用以下命令启动Angular开发服务器和dotnet WebAPI服务器:
ng serve
dotnet run
现在,您可以通过访问http://localhost:4200
来查看Angular应用程序的主页,并通过访问http://localhost:5000/api
来访问WebAPI的路由。
这是一个简单的Angular 9和dotnet WebAPI路由示例。您可以根据自己的需求进行修改和扩展。