angular कोणीय 2: http मॉड्यूल का उपयोग/आयात कैसे करें?




angular2-http (10)

मैं कोणीय 2 क्विकस्टार्ट के साथ खेल रहा हूं। मैं कोणीय 2 में http मॉड्यूल का उपयोग / आयात कैसे कर सकता हूं?
मैंने एंगुलर 2 टोडो के .js को देखा है , लेकिन यह http मॉड्यूल का उपयोग नहीं करता है।

मैंने "ngHttp": "angular/http", में dependencies लिए "ngHttp": "angular/http", जोड़ा है क्योंकि मैंने सुना है कि कोणीय 2 कुछ हद तक मॉड्यूलर है


अंतिम अद्यतन: 11 मई, 2016
कोणीय संस्करण: 2.0.0-आरसी.2
टाइपस्क्रिप्ट संस्करण: 1.8.10

लाइव कामकाजी उदाहरण

पर्यवेक्षण के साथ एचटीपी मॉड्यूल का उपयोग करने का एक सरल उदाहरण:

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


कोणीय 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 {}

और आपकी सेवा कक्षा के अंदर

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

अन्य पैकेज जिन्हें आपको भी आवश्यकता हो सकती है

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

package.json

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

संदर्भ here


import {Http, Response} from '@angular/http';

यह पहले से कोणीय 2 में है, इसलिए आपको पैकेज.जेसन में कुछ भी डालने की ज़रूरत नहीं है

आपको बस इसे आयात करना और इंजेक्ट करना होगा। (यह एक विधि है जो एक विधि के साथ एक सामग्री है ThhatUsesHttp () जो प्रतिक्रिया को लॉग करता है)

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 {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 में परिणाम:
फ़ाइल परिवर्तन का पता चला
फ़ाइल परिवर्तन का पता चला
प्राप्त करें / src / कोणीय 2 / http 404 0.124 एमएस - 30

दो अजीब चीजें:
1. / src / angular2 / http - वह पथ नहीं है जहां http पाया जा सकता है और न कि कोड में मैंने जो पथ प्रदान किया है।
2. core.js node_modules / angular2 फ़ोल्डर में http.js के बगल में स्थित है और पाया जाता है।

वह कितना अजीब है?

अद्यतन mea culpa: उदाहरणों में से कोई भी उल्लेख नहीं किया गया है कि आपको अपने एचटीएमएल में http.js को संदर्भित करने की आवश्यकता है
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
... और फिर यह काम किया।
लेकिन त्रुटि संदेश में पथ के लिए मुझे अभी भी कोई स्पष्टीकरण नहीं है।


संस्करण 37 में आपको यह करने की आवश्यकता है:

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

और यह tsd कमांड चलाएं:

tsd install angular2/http

मुझे विश्वास है कि अब (अल्फा 3 और 36) होने की आवश्यकता है:

import {Http} from 'http/http';

अपने एचटीएमएल में संदर्भ जोड़ने के लिए याद रखें (अब से एक अलग फ़ाइल है): https://code.angularjs.org/2.0.0-alpha.36/http.dev.js


  1. हम एक अलग डेटा दृढ़ता परत पर काम कर रहे हैं, जो HTTP को कवर करेगा। यह अभी तक समाप्त नहीं हुआ है।
  2. कोणीय 2 में Zone वजह से आप डेटा लाने के लिए किसी मौजूदा तंत्र का उपयोग कर सकते हैं। इसमें XMLHttpRequest , fetch() और किसी भी अन्य तृतीय पक्ष पुस्तकालय शामिल हैं।
  3. compiler में XHR निजी होना है, और हम किसी भी समय एपीआई बदल सकते हैं और इस तरह इस्तेमाल नहीं किया जाना चाहिए।

कुछ उत्तरों के बाद, यहां 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, []);

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




angular2-http