angular - Http मॉड्यूल का उपयोग/आयात कैसे करें?




angular2-http (9)

मैं कोणीय 2 क्विकस्टार्ट के साथ खेल रहा हूं।

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

मैंने Angular 2 Todo.js को देखा है, लेकिन यह http मॉड्यूल का उपयोग नहीं करता है।

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


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

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

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

कोणीय 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 में package.json

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

संदर्भ here


बस दौडो:

npm install --save  @angular/http

और फिर के माध्यम से आयात करें

import {HttpModule} from '@angular/http'

मेरा मानना ​​है कि अब (अल्फा ३५ और ३६) की आवश्यकता है:

import {Http} from 'http/http';

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


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

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

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

tsd install angular2/http

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

काम का उदाहरण जीते

अवलोकन के साथ 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));


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

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

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

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







angular2-http