Угловой 2: Как использовать / импортировать http-модуль?

Я играл с Angular 2 Quickstart . Как я могу использовать / импортировать http-модуль в Angular 2?
Я посмотрел на .js Angular 2 Todo , но он не использует http-модуль.

Я добавил "ngHttp": "angular/http", к dependencies в package.json, потому что я слышал, что Angular 2 несколько модульный

    В версии 37 вам нужно сделать следующее:

     /// import {Http} from "angular2/http"; 

    И запустите эту команду tsd:

     tsd install angular2/http 

    Последнее обновление: 11 мая 2016 г.
    Угловая версия: 2.0.0-rc.2
    Версия машинописного текста: 1.8.10

    Живой рабочий пример .

    Простой пример использования модуля Http с Observable:

     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: `
    • {{article.headline.main}}
    `, 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));
    1. Мы работаем над отдельным уровнем сохранения данных, который будет охватывать HTTP. Это еще не закончено.
    2. Из-за Zone in Angular 2 вы можете использовать любой существующий механизм для извлечения данных. Это включает в себя XMLHttpRequest , fetch() и любые другие сторонние библиотеки.
    3. XHR в compiler должен быть закрытым, и мы можем изменить API в любое время и как таковое не должно использоваться.

    То же самое происходит в 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/

    🙂

     import {Injectable} from 'angular2/core'; import {Http, HTTP_PROVIDERS} from 'angular2/http'; @Injectable() export class GroupSelfService { items:Array; 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

    Две странные вещи:
    1. / src / angular2 / http – не путь, по которому можно найти http, а не путь, который я предоставил в коде.
    2. core.js лежит рядом с http.js в папке node_modules / angleular2 и находится.

    Как это странно?

    Обновить Mea culpa: ни один из примеров не упоминал, что вам нужно ссылаться на http.js в вашем html как

    … и тогда это сработало.
    Но для пути в сообщении об ошибке у меня все еще нет объяснений.

    Помимо всех ответов, приведенных ниже, если я прикрою некоторые дополнительные моменты. Вот Http как использовать / импортировать все …

    ANGULAR2 HTTP (ОБНОВЛЕНО Бета !!)

    Во-первых, как ясно из имени, мы должны импортировать http-файл в index.html, как это

      

    или вы можете обновить это через CDN отсюда

    то следующим шагом мы должны импортировать Http и HTTP_PROVIDERS из пакетов, предоставляемых угловыми.

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

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

    и импорт от ….

     import {http} from 'angular2/http'; 

    Использование API или json для использования ресурсов использования Http

    Теперь вместе с http у нас есть еще несколько опций с угловым2 / http, т. Е. Как Заголовки, Запрос, Запросы и т. Д. И т. Д., Которые в основном используются при использовании Rest API или временных данных Json. во-первых, мы должны импортировать все это следующим образом:

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

    иногда нам нужно предоставлять заголовки, потребляя 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() }] } }); } 

    для получения дополнительной информации я нашел две лучшие ссылки здесь .. и здесь …

    Я считаю, что теперь (альфа 35 и 36) необходимо:

     import {Http} from 'http/http'; 

    Не забудьте добавить (поскольку теперь это отдельный файл) ссылка в вашем html: https://code.angularjs.org/2.0.0-alpha.36/http.dev.js

    Следуя нескольким ответам, вот полный рабочий пример использования http модуля

    index.html

        Angular 2 QuickStart        loading...   

    app/app.ts

     import {bootstrap, Component} from 'angular2/angular2'; import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'app', viewProviders: [HTTP_PROVIDERS], template: `` }) 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, поэтому вам не нужно ничего вкладывать в package.json

    Вам просто нужно импортировать и вводить его так. (это сервис Stuff с методомThatUsesHttp (), который просто регистрирует ответ)

     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); }); } } 
     import {Http, Response} from '@angular/http'; 

    Для углов 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 {} 

    И внутри вашего classа обслуживания

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

    Другие пакеты, которые вам также могут понадобиться

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

    В package.json

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

    Ссылка здесь

    Простой пример с использованием 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]); 
    Interesting Posts

    Маршрутизатор / шлюз на базе ПК, который поддерживает законный перехват?

    Исключенное исключение SQL для JDBC

    Самый простой способ разделить строку на новые строки в .NET?

    Уведомление об обнаружении службы доступности Android

    Почему getchar () не заставит меня нажать enter после scanf ()?

    Как передать текст из командной строки в буфер обмена

    Двойная загрузка Windows 7 на предустановленном ноутбуке Windows 8

    Умножение двух целых чисел с использованием побитовых операторов

    Почему камни установлены в каталоге с другой версией Ruby, чем я запускаю?

    ASP.Net MVC 4 Форма с двумя кнопками / действиями отправки

    C # Linq Где дата между 2 датами

    Использование M_PI со стандартом C89

    «Показать рабочий стол» иногда устанавливает окно «всегда сверху»,

    Swift 4 “Этот class не соответствует кодированию ключевого значения”

    Какую кучу скриптов ffmpeg мне нужно, чтобы получить HTML5-совместимое «Видео для всех»?

    Давайте будем гением компьютера.