Вызовите веб-контроллер API, используя Angular 2

Я новичок в Angular2. Я хочу вызвать API, используя Angular2 в моем проекте MVC6. Я перепробовал много вещей (в том числеAngular2 вызывает ASP.NET Web API) безуспешно.

Я не знаю, с чего мне начать, или какие файлы нужны.

 TRiG10 авг. 2016 г., 17:25
Что значитбезуспешно значит здесь? Что пошло не так?
 Pardeep Jain09 авг. 2016 г., 20:13

Ответы на вопрос(2)

Вот как я сделал это мое приложение (angular2 в качестве интерфейса с ядром Web API) -

Создайте контроллер, используя сущностную структуру, которая обеспечивает все действия - GET, POST, PUT и DELETE. Перейдите по этой ссылке, если вы новичок в веб-API и структуры лицаhttps://docs.efproject.net/en/latest/platforms/aspnetcore/existing-db.html

Включен CORS в веб-API

[Это делается для обработки перекрестного общения с localhost: 3000 (angular2) на localhost: 59024 (webapi)]

Сначала добавьте зависимость в project.json -"Microsoft.AspNetCore.Cors": "1.0.0",

затем включите CORS в startup.cs, как это

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

}

Посмотрите, поможет ли это.

Я бы посмотрел некоторые примеры на 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. Это означает, что вам нужно передать index.html клиенту в случае ошибки 404. Приложение. Использование лямбда выполняет это. Обратите внимание, что это перед вызовами 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?}");
        });
    }

После того, как вы установили эту настройку, вы должны проверить свой API сПочтальон чтобы убедиться, что маршрутизация работает так, как вы хотите. Если это не сработает, это не сработает в Angular. я имеюHTTP: // локальный: 5001 / установить как мойURL приложения в моем проекте Visual Studio Настройки отладки.

Если это работает правильно, перейдите к загрузке его с Angular 2. Вам нужно будет использовать базовый элемент сразу после тега head в вашем html-файле. Это сообщает Angular router, что такое статическая часть 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));
}

Оператор .do в RxJS очень удобен. Это позволит вам отладить, что вы правильно получаете значения из вашего API. УвидетьБлог Андре Штальца для более подробной информации.

Наконец, создайте компонент для использования сервиса: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'));
  }
}
 RyeGuy07 апр. 2017 г., 22:41
Блестящий ответ! Однако я получаю сообщение об ошибке в службе данных для app.constants. Как должен выглядеть этот файл app.constant?
 user91717003 мая 2017 г., 08:25
Мне нужно было добавить импорт 'rxjs / add / operator / do'; чтобы войти в систему .do!
 RyeGuy07 апр. 2017 г., 23:16
Отлично. Спасибо!
 mm_05 июн. 2017 г., 17:55
Привет, спасибо за ответ. Вопрос: почему ответы передаются как массивы? публичные ценности: любые [];
 David Rinck07 апр. 2017 г., 23:06
Спасибо! Это просто файл с константами в нем. Я не должен был включать с фрагментом. Вы должны быть в состоянии удалить эту строку без проблем.

Ваш ответ на вопрос