如何集成 ac# 和 Angular 9 - C#

Angular 是一个流行的前端开发框架，而 AC# 则是一个用于创建 RESTful 后端服务的 .NET 标准库。将它们结合起来，可以快速构建高效的全栈应用程序。下面我们将介绍如何在 Angular 9 项目中集成 AC# 后端服务。

步骤一：创建后端服务

首先，我们需要创建 AC# 项目。我们假设您已安装了 AC# 和 Visual Studio 环境，因此可以使用 Visual Studio 创建项目。在创建过程中，请确保使用 ASP.NET Core Web Application 模板。

接下来，请选择 API 项目模板并单击“Create”。

这将创建一个 ASP.NET Core Web API 项目。在这个项目中，您可以编写 Web API 控制器，它们将为 Angular 应用程序提供数据和功能。

步骤二：配置 CORS（跨域资源共享）

通过使用 Angular 开发应用程序，您可以在本地开发服务器（通常是 http://localhost:4200）上运行您的应用程序。API 项目默认监听 http://localhost:5000 并且不启用 CORS。因此，您需要配置 CORS，以便您的 Angular 应用程序可以访问 AC# 后端服务。为此，请在 Startup.cs 文件中添加以下行：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AngularDevPolicy", builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
    });
    services.AddControllers();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors("AngularDevPolicy");
    // ...
}

步骤三：创建后端控制器

在 AC# 项目中添加一个控制器。在控制器中，您可以添加与您的应用程序相关的方法。下面是一个示例：

[ApiController]
[Route("api/[controller]")]
public class MyController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        // Return some data
        return Ok(new string[] { "Hello", "world" });
    }
}

上面的代码将在 GET /api/my 路由下提供 ["Hello", "world"] 数组。

步骤四：使用 HttpClient 从 Angular 9 应用程序访问 AC# 后端服务

现在，您已经准备好在 Angular 9 中访问 AC# 后端服务了。请使用 Angular 的 HttpClient 类来发送 HTTP 请求。下面是一个示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class MyService {
    private baseUrl = 'http://localhost:5000/api/my';

    constructor(private http: HttpClient) { }

    public getData(): Observable<string[]> {
        return this.http.get<string[]>(this.baseUrl);
    }
}

在这个例子中，我们创建了一个 MyService 类，它使用 HttpClient 类来发送 GET /api/my 请求。您可以在任何组件中注入 MyService，以使用 getData 方法。

步骤五：在 Angular 9 应用程序中使用 AC# 后端服务

要使用 AC# 后端服务，请在您的 Angular 9 应用程序中注入 MyService。在您的组件中使用 MyService 获取数据。下面是一个示例：

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
    selector: 'app-root',
    template: `
        <ul>
            <li *ngFor="let item of items">{{ item }}</li>
        </ul>
    `
})
export class AppComponent {
    public items: string[];

    constructor(private myService: MyService) { }

    ngOnInit() {
        this.myService.getData().subscribe((data) => {
            this.items = data;
        });
    }
}

在这个例子中，我们注入了 MyService 并在 ngOnInit 生命周期钩子中使用 getData 方法获取数据。然后，我们将数据绑定到组件中的属性 items。

结论

在本文中，我们介绍了如何在 Angular 9 项目中集成 AC# 后端服务。我们希望这个例子有助于您快速构建全栈应用程序，同时提高了您的技能水平。