使用 Angular 2 调用 Web API 控制器

Question

我是 Angular2 的新手。我想在我的 MVC6 项目中使用 Angular2 调用 API。我尝试了很多事情（包括Angular2 calling ASP.NET Web API 的指南），但都没有成功。

我不知道我应该从哪里开始，或者需要哪些文件。

Answer 1

我会查看 Github 上的一些示例，看看其他人是如何做到的。有许多事情必须恰到好处才能使其正常工作，并且在您启动并运行之前，错误可能是模糊的。

为您的项目添加一个 Web API 控制器类。为了确保一开始一切正常，我建议将您的 HttpGet 属性硬编码为“api/values”。

ValuesController.cs.：

    public class ValuesController : Controller
    {
      [HttpGet("api/values")]
      public IActionResult Get()
      {
          return new JsonResult(new string[] { "value1", "value2" });
      }

Startup.Cs. 您需要 angular2 路由不干扰 ASP.NET 的路由。这意味着如果出现 404 错误，您需要将 index.html 提供给客户端。 app.Use lambda 实现了这一点。请注意，它在调用 app.UseDefaultFiles() 和 app.UseStaticFiles() 之前

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        ...
        var angularRoutes = new[] {
             "/home"
         };

        app.Use(async (context, next) =>
        {
            if (context.Request.Path.HasValue && null != angularRoutes.FirstOrDefault(
                (ar) => context.Request.Path.Value.StartsWith(ar, StringComparison.OrdinalIgnoreCase)))
            {
                context.Request.Path = new PathString("/");
            }
            await next();
        });

        app.UseDefaultFiles();
        app.UseStaticFiles();
        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }

完成此设置后，您应该使用 Postman 测试您的 API，以确保路由按您希望的方式工作。如果这不起作用，它将在 Angular 中不起作用。我在我的 Visual Studio 项目调试设置中将 http://localhost:5001/ 设置为我的 App URL。

如果工作正常，继续使用 Angular 2 加载它。您需要在 html 文件中的 head 标记之后使用基本元素。这告诉 Angular 路由器 URL 的静态部分是什么：

Index.html

    <base href="/">

接下来，您需要在 Angular2 中创建一个服务以从您的 API 中获取值： dataService.ts

import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Configuration } from '../app.constants';

@Injectable()
export class DataService { 
  private actionUrl: string;
  constructor(private _http: Http, private _configuration: Configuration) {
    this.actionUrl = 'http://localhost:5001/api/values/';
}

public GetAll = (): Observable<any> => {
    return this._http.get(this.actionUrl)
        .map((response: Response) => <any>response.json())
        .do(x => console.log(x));
}

RxJS 中的 .do 操作符非常方便。它将允许您调试您是否正确地从您的 API 获取值。见Andre Staltz's blog for more details。

最后，创建一个组件来使用该服务： app.component.ts

import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { DataService } from '../services/DataService';

@Component({
    selector: 'app',
    template: `My Values: <ul><li *ngFor="let value of values">
        <span>{{value.id}} </span>
      </li></ul>`,
    providers: [DataService]
})

export class AppComponent implements OnInit {
  public values: any[];
  constructor(private _dataService: DataService) {}
  ngOnInit() {
    this._dataService
        .GetAll()
        .subscribe(data => this.values = data,
        error => console.log(error),
        () => console.log('Get all complete'));
  }
}

Answer 2

这就是我的应用程序（angular2 作为前端，带有 Web API 核心）-

1. 使用实体框架创建一个控制器，该框架提供所有操作 - GET、POST、PUT 和 DELETE。如果您不熟悉 Web api 和实体框架，请参考此链接 - https://docs.efproject.net/en/latest/platforms/aspnetcore/existing-db.html

2. 在 Web API 中启用 CORS

[这样做是为了处理从 localhost:3000 (angular2) 到 localhost:59024 (webapi) 的交叉通信]

首先，在project.json中添加依赖-"Microsoft.AspNetCore.Cors": "1.0.0",

然后像这样在 startup.cs 中启用 CORS-

app.UseCors(builder => {
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});

您可以在此处找到有关 CORS 的更多信息 - https://docs.asp.net/en/latest/security/cors.html

3.在Angular2前端，你可以这样写你的服务组件-

@Injectable()
export class WebApiService {

    private _webApiUrl = 'http://localhost:59024/api/EmployeeMastersAPI'; 

        constructor(private _http: Http) { 

        }

    getEmployees(): Observable<{}> {
        return this._http.get(this._webApiUrl)
            .map((response: Response) => <any[]> response.json())
             .do(data => console.log('All: ' +  JSON.stringify(data)))
             .catch(this.handleError)
            ;
    }

    getEmployee(id: number): Observable<IEmployee> {
        return this.getEmployees()
            .map((emp: IEmployee[]) => emp.find(p => p.EMPID === id));
    }

    addEmployeesDetails(emp) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        console.log('add emp : ' +  JSON.stringify(emp));
        this._http.post(this._webApiUrl, JSON.stringify(emp), { headers: headers }).subscribe();

    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

}

看看这是否有帮助。