要在Angular 8中使用C#控制器,你需要进行以下步骤:
创建一个新的Angular 8项目:
ng new my-angular-app
切换到项目目录:
cd my-angular-app
创建一个新的C#控制器:
dotnet new webapi -n MyApi
进入控制器目录:
cd MyApi
在控制器目录中,打开Controllers
文件夹并编辑ValuesController.cs
文件:
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace MyApi.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
// GET: api/values
[HttpGet]
public ActionResult> Get()
{
return new string[] { "value1", "value2" };
}
}
}
返回到项目根目录并启动项目:
cd ..
dotnet run
打开另一个终端窗口,导航到Angular项目目录:
cd my-angular-app
在src/app
文件夹中创建一个新的服务:
ng generate service data
打开src/app/data.service.ts
文件并编辑:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getValues(): Observable {
return this.http.get('/api/values');
}
}
打开src/app/app.component.ts
文件并编辑:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
Values:
- {{ value }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
values: string[];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getValues().subscribe(values => {
this.values = values;
});
}
}
运行Angular应用程序:
ng serve
现在,你可以在浏览器中访问http://localhost:4200
,应该可以看到从C#控制器返回的值列表。