web-dev-qa-db-ja.com

httpモジュールの使用/インポート方法

Angular 2 Quickstart で遊んでいます。

Angular 2でhttpモジュールを使用/インポートするにはどうすればよいですか？

Angular 2 Todo's.js を見ましたが、httpモジュールは使用しません。

Angular 2は多少モジュール化されていると聞いたので、"ngHttp": "angular/http",のdependenciesにpackage.jsonを追加しました。

angularangular2-http
41
rilut

バージョン37では、これを行う必要があります。

///<reference path="typings/angular2/http.d.ts"/>    
import {Http} from "angular2/http";

そして、次のtsdコマンドを実行します。

tsd install angular2/http
19
Andreas

最終更新：2016年5月11日
角度バージョン：2.0.0-rc.2
TypeScriptバージョン：1.8.10

実際の動作例 。

ObservableでHttpモジュールを使用する方法の簡単な例：

import {bootstrap} from '@angular2/platform-browser-dynamic';
import {Component, enableProdMode, Injectable, OnInit} from '@angular/core';
import {Http, Headers, HTTP_PROVIDERS, URLSearchParams} from '@angular/http';
import 'rxjs/add/operator/map';

const API_KEY = '6c759d320ea37acf99ec363f678f73c0:14:74192489';

@Injectable()
class ArticleApi {
  constructor(private http: Http) {}
  
  seachArticle(query) {
    const endpoint = 'http://api.nytimes.com/svc/search/v2/articlesearch.json';
    const searchParams = new URLSearchParams()
    searchParams.set('api-key', API_KEY);
    searchParams.set('q', query);
    
    return this.http
      .get(endpoint, {search: searchParams})
      .map(res => res.json().response.docs);
  }
  
  postExample(someData) {
    const endpoint = 'https://your-endpoint';
    const headers = new Headers({'Content-Type': 'application/json'});
    
    return this.http
      .post(endpoint, JSON.stringify(someData), { headers: headers })
      .map(res => res.json());
  }
}

@Component({
  selector: 'app',
  template: `<ul>
                <li *ngFor="let article of articles | async"> {{article.headline.main}} </li>
             </ul>`, 
  providers: [HTTP_PROVIDERS, ArticleApi],
})
class App implements OnInit {
  constructor(private articleApi: ArticleApi) { }
  
  ngOnInit() {
    this.articles = this.articleApi.seachArticle('obama');
  }
}

enableProdMode();
bootstrap(App)
  .catch(err => console.error(err));
50
Itay Radotzki
  1. HTTPをカバーする別のデータ永続化レイヤーに取り組んでいます。これはまだ終わっていません。
  2. Angular 2のZoneにより、既存のメカニズムを使用してデータを取得できます。これには、XMLHttpRequest、fetch()、およびその他のサードパーティライブラリが含まれます。
  3. XHRのcompilerはプライベートであり、いつでもAPIを変更できるため、使用しないでください。
25
Misko Hevery

Alpha 42でもほぼ同じですが、HeadersとHTTP_PROVIDERSもangular2/httpから派生していることがわかります。

import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

export class App {

  constructor(public http: Http) { }

  getThing() {
    this.http.get('http://example.com')
      .map(res => res.text())
      .subscribe(
        data => this.thing = data,
        err => this.logError(err),
        () => console.log('Complete')
      );
  }

}

これと、ここで返されるオブザーバブルの使用方法の詳細： https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/ =

:)

8
cienki

以下に示すすべての回答とは別に、いくつかの追加ポイントでカバーする場合、ここにHttpすべてを使用/インポートする方法があります...

ANGULAR2 HTTP（ベータ版に更新!!）

まず名前から明らかなように、index.htmlにあるhttpファイルをこのようにインポートする必要があります

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

または、CDNでこれを更新できます ここから

次に、angularが提供するバンドルからHttpとHTTP_PROVIDERSをインポートする必要があります。

ただし、この方法を使用すると、グローバルレベルで提供され、次のようにプロジェクト全体で使用できるため、bootstrapファイルにHTTP_PROVIDERSを指定することをお勧めします。

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependency's
]);

そしてインポートは...からです.

import {http} from 'angular2/http';

Httpを使用してREST APIまたはJSONを使用する

Httpと共に、angular2/httpで提供されるいくつかのオプションがあります。たとえば、ヘッダー、リクエスト、リクエストオプションなど、Rest APIまたは一時的なJsonデータを消費するときに主に使用されます。まず、次のようにこれらすべてをインポートする必要があります。

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

access_tokenを送信するためのAPIを使用しながら、ヘッダーを提供する必要がある場合があります。

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

requestMethodsにアクセスします。基本的にはGET、POSTを使用しますが、さらにいくつかのオプションがあります こちらを参照してください...

RequestMethod.method_nameを使用してrequestmethodsを使用できます

現在、APIにはいくつかのオプションがあります。POSTの1つの例を投稿しました。いくつかの重要なメソッドを使用してヘルプをリクエストしてください。

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() }]
                }
            });
    }

詳細については、2つの最適なリファレンスを見つけました here .. および here ...

6
Pardeep Jain
import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Injectable()
export class GroupSelfService {
    items:Array<any>;

    constructor(http:Http){
        http.get('http://127.0.0.1:8080/src/data/names.json')
        .subscribe(res => {
            this.items = res;
            console.log('results found');
        })
    }
}

404の結果：
ファイルの変更が検出されました
ファイルの変更が検出されました
GET/src/angular2/http 404 0.124 ms-30

2つの奇妙なこと：
1。/src/angular2/http-httpが見つかるパスではなく、コードで指定したパスでもありません。
2。 core.jsは、node_modules/angular2フォルダーのhttp.jsのすぐ横にあり、見つかりました。

それはどれほど奇妙ですか？

更新 Mea culpa：あなたのhtmlでhttp.jsを参照する必要があると言及されている例はありません
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
...そしてそれはうまくいきました。
しかし、エラーメッセージのパスについては、まだ説明がありません。

6
Thomas Bücklers

今（alpha.35と36）は次のことが必要だと思います：

import {Http} from 'http/http';

Htmlに参照を追加することを忘れないでください（現在は別のファイルになっているため）： https://code.angularjs.org/2.0.0-alpha.36/http.dev.js

4
tomascharad

いくつかの答えをフォローアップすると、httpモジュールを使用した完全な実例があります。

index.html

 <html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="../node_modules/angular2/bundles/http.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <app>loading...</app>
  </body>
</html>

app/app.ts

import {bootstrap, Component} from 'angular2/angular2';
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

@Component({
  selector: 'app',
  viewProviders: [HTTP_PROVIDERS],
  template: `<button (click)="ajaxMe()">Make ajax</button>`
})

class AppComponent {
  constructor(public http: Http) { }

  ajaxMe() {
    this.http.get('https://some-domain.com/api/json')
      .map(res => res.json())
      .subscribe(
        data => this.testOutput = data,
        err => console.log('foo'),
        () => console.log('Got response from API', this.testOutput)
      );
  }

}

bootstrap(AppComponent, []);
2
jczaplew
import {Http, Response} from '@angular/http';
1
previousdeveloper

ただ走れ：

npm install --save  @angular/http

その後、経由でインポート

import {HttpModule} from '@angular/http'
1
Ratnabh kumar rai

すでにangle2にあるので、package.jsonに何かを入れる必要はありません

このようにインポートして挿入するだけです。 （これは、応答を記録するmethodThatUsesHttp（）を持つStuffサービスです）

import {XHR} from 'angular2/src/core/compiler/xhr/xhr';

export class Stuff {
    $http;
    constructor($http: XHR) {
        this.$http = $http;
    }

    methodThatUsesHttp() {
        var url = 'http://www.json-generator.com/api/json/get/cfgqzSXcVu?indent=2';

        this.$http.get(url).then(function(res) {
            console.log(res);
        }, function(err) {
            console.log(err);
        });
    }
}
1
Filip Bech-Larsen

Angular4.3 +、5。+

// app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

// Import HttpClientModule from @angular/common/http
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})
export class MyAppModule {}

そして、あなたのサービスクラスの中

import { HttpClient } from '@angular/common/http';

あなたが必要とするかもしれない他のパッケージ

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';

package.json

"@angular/http": "^5.1.2",

参照は ここ です

0
Frank Nguyen