Rufen Sie Web-API-Controller mit Angular 2

Question

Ich bin neu in Angular2. Ich möchte eine API mit Angular2 in meinem MVC6-Projekt aufrufen. Ich habe viele Dinge (einschließlich der Anleitung bei Angular2 calling ASP.NET Web API) ohne Erfolg versucht.

Ich weiß nicht, wo ich anfangen soll, oder welche Dateien benötigt werden.

Answer 1

Ich würde einige der Beispiele auf Github betrachten, um zu sehen, wie andere Leute es getan haben. Es gibt eine Reihe von Dingen, die genau richtig sein müssen, damit alles funktioniert, und die Fehler können nebulös sein, bis Sie es in Betrieb nehmen.

Fügen Sie Ihrem Projekt eine Web-API-Controller-Klasse hinzu. Um sicherzustellen, dass am Anfang alles funktioniert, würde ich vorschlagen, Ihr HttpGet-Attribut mit "api/values" zu codieren.

WerteController.cs.:

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

Startup.Cs. Sie benötigen die angular2-Routen, um die Routen von ASP.NET nicht zu beeinträchtigen. Das bedeutet, dass Sie die index.html an den Client senden müssen, wenn ein 404-Fehler vorliegt. Die App.Use Lambda erreicht dies. Beachten Sie, dass es vor den Anrufen zu app.UseDefaultFiles() und 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?}"); 
     }); 
    } 

Sobald Sie diese Einstellung haben, sollten Sie Ihre API mit Postman testen, um sicherzustellen, dass das Routing funktioniert, wie Sie es wollen zu. Wenn dies nicht funktioniert, funktioniert es nicht in Angular. Ich habe http://localhost:5001/ als meine App URL in meinem Visual Studio-Projekt Debug-Einstellungen festgelegt.

Wenn das richtig funktioniert, auf verschiebt es darum geht, mit kantigen 2. Sie müssen verwenden, um das Basiselement unmittelbar nach dem Kopf-Tag in Ihrer HTML-Datei zu laden. Dies teilt dem Angular-Router, was die statische Teil der URL ist:

Index.HTML

<base href="/"> 

Als nächstes werden Sie einen Dienst in Angular2 erstellen müssen, um die Werte von Ihrem API Get: 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)); 
} 

Der .do Operator in RxJS ist sehr praktisch. Es ermöglicht Ihnen zu debuggen, dass Sie die Werte von Ihrer API korrekt erhalten. Siehe Andre Staltz's blog for more details.

Schließlich erstellen Sie eine Komponente den Dienst zu nutzen: 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

Dies ist, wie ich es getan habe meine Bewerbung (angular2 als Front-End mit Web-API-Kern) -

1. Erstellen Sie einen Controller mit Entity-Framework, das alle Aktionen bereitstellt - GET, POST, PUT und DELETE.Siehe diesen Link, falls Sie neu in Web-api und Entity Framework - https://docs.efproject.net/en/latest/platforms/aspnetcore/existing-db.html

2. Aktiviert CORS in Web API

[Dies geschieht Querkommunikation von localhost zu handhaben: 3000 (angular2) localhost : 59024 (WebAPI)]

Zuerst Abhängigkeit in project.json hinzufügen - "Microsoft.AspNetCore.Cors": "1.0.0",

dann

0 wie this- CORS in startup.cs ermöglichen

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

Sie können weitere Informationen über CORS hier finden - https://docs.asp.net/en/latest/security/cors.html

3.In Angular2 Front-End, können Sie Ihre Service-Komponente wie this-

schreiben

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

} 

sehen, ob das hilft.