Использование http rest apis с angular 2

Итак, я следую angular 2 руководствам на своем сайте через typescript и застрял в интеграции http api. Я пытаюсь сделать простое приложение, которое может искать через soundcloud api для песни, однако у меня возникают трудности с реализацией и пониманием того, как поступать, а онлайн-ресурсы делают это по-разному (я считаю, что это быстро angular 2 синтаксис изменяется в тот же день).

Итак, в настоящий момент мой проект выглядит следующим образом

app
  components
    home
      home.component.ts
      ...
    search
      search.component.ts
      ...
    app.ts
    ...
  services
    soundcloud.ts
  bootstrap.ts
index.html

Ничего интересного в этом примере, основные файлы были бы

app.ts

import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {HomeComponent} from './home/home.component';
import {SearchComponent} from './search/search.component';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
  {path: '/search', name: 'Search', component: SearchComponent}
])

export class App { }

bootstrap.ts

    import {App}     from './components/app';
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(App, [
  ROUTER_PROVIDERS
]);

И я пытался выяснить soundcloud.ts, но не могу и есть ошибки в следующем подходе, т.е. @Inject не найден (я предполагаю, что я использую устаревший синтаксис здесь). По сути, я хотел бы использовать службу soundcloud для вызовов api в моем компоненте поиска формы приложения.

import {Injectable} from 'angular2/core'
import {Http} from 'angular2/http'

@Injectable()
export class SoundcloudService {
 http : Http

 constructor(@Inject(Http) http) {
   this.http = http;
 }
}

soundcloud api не включен здесь, так как я не могу сначала обнулить основы.

Ответы

Ответ 1

Хороший ответ, предоставленный @langley, но я хотел бы добавить еще несколько пунктов, чтобы опубликовать их как ответ.

Прежде всего, для использования API-интерфейса Restover нам нужны модули Http и HTTP_PROVIDERS, которые необходимо импортировать. Поскольку мы говорим о Http, первый шаг явно.

<script src="node_modules/angular2/bundles/http.dev.js"></script>

Но да, это хорошая практика, чтобы обеспечить HTTP_PROVIDERS в файле начальной загрузки, поскольку, используя этот способ, он предоставляется на глобальном уровне и доступен для всего проекта вроде этого.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

а импорт, который будет включен, будет...

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

Иногда нам нужно предоставить Headers, потребляя API для отправки access_token и многое другое, что делается следующим образом:

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

Теперь для RequestMethods: в основном мы используем GET, POST, но есть еще несколько параметров, которые вы можете здесь...

Мы можем использовать requestmethods как RequestMethod.method_name

Есть еще несколько вариантов API, но на данный момент я опубликовал один пример запроса POST, который поможет вам с помощью некоторых важных методов:

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

вы можете отсылать сюда для получения дополнительной информации.

см. также -

Update

импорт был изменен с

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

to

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';

Ответ 2

Вам нужно добавить эту строку:

<script src="node_modules/angular2/bundles/http.dev.js"></script>

в файле index.html.

Вам нужно добавить HTTP_PROVIDERS:

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

в файле boot.ts/bootstrap.ts и, конечно же, импортируйте их.

Вам нужно импортировать @Inject в файл класса DojoService:

import {Injectable, Inject} from 'angular2/core'

Так же, как вы импортировали @Injectable.