web-dev-qa-db-ja.com

Angular 2を使用してWeb APIコントローラーを呼び出します

私はAngular2の初心者です。 MVC6プロジェクトでAngular2を使用してAPIを呼び出したい。私は多くのことを試しました（ Angular2呼び出しASP.NET Web API のガイドを含む）成功しませんでした。

どこから始めればいいのか、どのファイルが必要なのかわかりません。

angularasp.net-core-mvc
15
Kratika Sharma

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。ASP.NETのルートに干渉しないように、angular2ルートが必要です。つまり、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 / myApp URLとして設定しています。

postman

それが正常に機能している場合は、Angularでロードするように進みます。2. htmlファイルのheadタグの直後にベース要素を使用する必要があります。これは、URLの静的部分が何であるかをAngularルーターに伝えます。

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のブログ を参照してください。

最後に、サービスを使用するコンポーネントを作成します：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'));
  }
}
17
David Rinck

これは、私のアプリケーション（Web APIコアを備えたフロントエンドとしてのangular2）でした。

  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');
    }

}

これが役立つかどうかを確認してください。

7
Sanket