Kątowa 2: Jak używać / zaimportować moduł http?

głosy
38

Grałem z Kątowymi 2 Szybki start . Jak mogę używać / import moduł http kątowej 2?
Szukałem na js kątowej 2 todo jest , ale nie korzystać z modułu http.

Dodałem ngHttp: angular/http,do dependenciesw package.json bo słyszałem kątowy 2 jest nieco modułowa

Utwórz 07/03/2015 o 00:53
źródło użytkownik
W innych językach...                            


13 odpowiedzi

głosy
1

Jest już w angular2, więc nie trzeba umieścić coś w package.json

Po prostu trzeba importować i wstrzyknąć go w takim stanie. (Jest to usługa Rzeczy z methodThatUsesHttp (), które po prostu loguje odpowiedzi)

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);
        });
    }
}
Odpowiedział 20/03/2015 o 06:54
źródło użytkownik

głosy
25
  1. Pracujemy na oddzielnej warstwy trwałości danych, które obejmie HTTP. To nie jest jeszcze zakończona.
  2. Ze względu Zonena kanciasty 2 można użyć dowolnego istniejącego mechanizmu pobierania danych. Obejmuje to XMLHttpRequest, fetch()oraz wszelkie inne biblioteki strony trzeciej.
  3. XHRw compilerma być prywatny, i możemy zmienić API w dowolnym czasie i jako takie nie powinny być stosowane.
Odpowiedział 13/04/2015 o 21:06
źródło użytkownik

głosy
48

Ostatnia zmiana: Maj 11, 2016
wersja kątowa: 2.0.0-rc.2
wersja Typescript: 01.08.10

Żyć przykład pracy .

Prosty przykład, w jaki sposób korzystać z modułu HTTP Obserwowalne:

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

Odpowiedział 21/06/2015 o 11:34
źródło użytkownik

głosy
4

Wierzę, że jest teraz (alpha.35 i 36) musiała być:

import {Http} from 'http/http';

Pamiętaj, aby dodać (od teraz jest oddzielnym pliku) odniesienie w kodzie HTML: https://code.angularjs.org/2.0.0-alpha.36/http.dev.js

Odpowiedział 03/09/2015 o 13:06
źródło użytkownik

głosy
17

W wersji 37 trzeba to zrobić:

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

I uruchomić to polecenie TSD:

tsd install angular2/http
Odpowiedział 12/09/2015 o 13:45
źródło użytkownik

głosy
-1

Prosty przykład z wykorzystaniem modułu http:

import {Component, View, bootstrap, bind, NgFor} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http'

@Component({
   selector: 'app'
})

@View({
    templateUrl: 'devices.html',
    directives: [NgFor]
})

export class App {
    devices: any;
    constructor(http: Http) {
        this.devices = []; 
        http.get('./devices.json').toRx().subscribe(res => this.devices = res.json());
    }
}

bootstrap(App,[HTTP_BINDINGS]);
Odpowiedział 12/09/2015 o 17:36
źródło użytkownik

głosy
8

Tak samo w Alpha 42, ale można zauważyć, że Headersi HTTP_PROVIDERSrównież pochodzić z 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')
      );
  }

}

Więcej na ten temat i jak używać obserwable które się zwróconych tutaj: https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

:)

Odpowiedział 15/10/2015 o 18:13
źródło użytkownik

głosy
6
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');
        })
    }
}

Wyniki w 404:
zmiana pliku wykryty
modyfikacji pliku wykryty
GET / src / angular2 / HTTP 404 0,124 ms - 30

Dwie dziwne rzeczy:
1. / src / angular2 / HTTP - nie jest droga, gdzie można znaleźć http a nie ścieżka mam zawarte w kodzie.
2. core.js leży tuż obok http.js w node_modules / folderu angular2 i zostanie znaleziona.

Dziwne jest to, że?

Aktualizować Mea culpa: Żaden z wymienionych przykładów, że trzeba odwoływać się http.js w html jak
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
... i to działało.
Ale na ścieżce w komunikacie o błędzie nadal mam żadnego wytłumaczenia.

Odpowiedział 27/10/2015 o 12:13
źródło użytkownik

głosy
2

Nawiązując do kilku odpowiedzi, tutaj jest pełna przykładów pracy z użyciem httpmodułu

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, []);
Odpowiedział 17/11/2015 o 20:57
źródło użytkownik

głosy
6

Oprócz wszystkich odpowiedzi udzielonych poniżej gdybym zatuszować z dodatkowymi punktami Oto Httpjak używać / importować wszystko ...

ANGULAR2 HTTP (aktualizacja do wersji Beta !!)

Po pierwsze, jak wynika z nazwy musimy importować plik http w index.html jak ta

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

czy można zaktualizować go poprzez CDN stąd

Następnie następny etap mamy do importowania Httpi HTTP_PROVIDERSz wiązek dostarczonych przez kątowe.

ale tak to jest dobra praktyka, aby zapewnić HTTP_PROVIDERS w pliku bootstrap, ponieważ za pomocą dostarczonego w ten sposób, że na poziomie globalnym i dostępne dla całego projektu jak następujące.

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

i przywóz z ....

import {http} from 'angular2/http';

Spożywanie Rest API lub json używając HTTP

Teraz wraz z http mamy kilka dodatkowych opcji dostarczonych z angular2 / HTTP czyli jak nagłówki, żądanie, Requestoptions itp itd która jest najczęściej używana podczas spożywania danych JSON Rest API lub tymczasowe. Po pierwsze musimy importować wszystko jak następuje:

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

czasami musimy zapewnić nagłówków podczas spożywania API do wysyłania access_token i wiele innych rzeczy, które odbywa się za pomocą w ten sposób:

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

Przejdźmy teraz do RequestMethods: bascially używamy GET, POST, ale mamy trochę więcej opcji można odnieść tutaj ...

możemy użyć użytku requestmethods za pomocą RequestMethod.method_name

istnieje kilka opcji dla API dla teraz ja pisał jeden przykład na ofertę kupna pomoc stosując kilka ważnych metod:

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

aby uzyskać więcej informacji znalazłem dwie najlepsze odniesienie tutaj .. i tutaj ...

Odpowiedział 16/01/2016 o 03:22
źródło użytkownik

głosy
1
import {Http, Response} from '@angular/http';
Odpowiedział 07/08/2016 o 20:55
źródło użytkownik

głosy
0

Dla Kątowymi 4.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 {}

I wewnątrz klasy usługi

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

Inne pakiety mogą być konieczne

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

W package.json

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

Odniesienia jest tutaj

Odpowiedział 04/01/2018 o 00:27
źródło użytkownik

głosy
0

po prostu biegnij:

npm install --save  @angular/http

i następnie przez import

import {HttpModule} from '@angular/http'
Odpowiedział 10/12/2018 o 07:17
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more