Question

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

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

Answer 1

我会看一下Github上的一些例子，看看其他人是如何做到的。有许多事情必须适合所有工作，并且错误可能是模糊的，直到你启动并运行。

将Web API Controller类添加到项目中。为了确保一切正常，我建议将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中创建一个Service来获取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核心的前端） -

使用提供所有操作的实体框架创建控制器 - GET，POST，PUT和DELETE。如果您不熟悉web api和实体框架，请参阅此链接 - https://docs.efproject.net/en/latest/platforms/aspnetcore/existing-db.html
在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');
    }

}

看看这是否有帮助。

使用Angular 2调用Web API控制器

2 个答案: