दिलचस्प पोस्ट
चेतावनी: बूटस्ट्रैप वर्ग पथ -सोर्स 1.5 के साथ संयोजन के रूप में सेट नहीं है JQuery के साथ तत्व पर मँडरा अगर पता लगाएँ सी कोड में द्विआधारी संख्या प्रणाली लेखन जावा में गणित अभिव्यक्ति के मूल्यांकन के लिए विधि मैं आर का उपयोग करके फाइलों का नाम कैसे बदलूं? पीएचपी टर्नेरी ऑपरेटर बनाम स्विच स्टेटमेंट बनाम आईएफएफएफ़ … जो मुझे इस्तेमाल करना चाहिए? ऐप के लिए पुश नोटिफिकेशन सेटिंग रीसेट करें "सहकर्मी द्वारा कनेक्शन रीसेट" मतलब क्या है? Keystore फ़ाइलों में प्रमाणपत्र का नाम और उपनाम कैसे जांचें? सादा पाठ के रूप में HTML टैग कैसे प्रदर्शित करें एंड्रॉइड में मार्की टेक्स्ट एक निर्माता के रूप में __init__? पायथन में sscanf स्पाइडर (पायथन आईडीई) के लिए एक मॉड्यूल (विशेष रूप से पीमॉर्फ) जोड़ना मैं अधिकतम (कॉलम मान) के साथ पंक्तियों का चयन कैसे कर सकता हूं, SQL में दूसरे कॉलम से अलग?

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

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

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

वेब के समाधान से एकत्रित समाधान "कोणीय 2: कैसे उपयोग करें / http मॉड्यूल आयात करें?"

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

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

और इस tsd कमांड को चलाएँ:

 tsd install angular2/http 

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

बहुत अल्फा 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<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 एमएस – 30

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

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

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

नीचे दिए गए सभी उत्तरों के अतिरिक्त अगर मैं कुछ अतिरिक्त बिंदुओं के साथ कवर करता हूं तो यहां Http कैसे उपयोग की जाती है / सब कुछ आयात करता है …

ANGULAR2 HTTP (बीटा को अपडेट किया गया !!)

सबसे पहले नाम से स्पष्ट रूप से हमें इस तरह से index.html में http फ़ाइल को आयात करना होगा

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

या आप इसे यहां से सीडीएन के द्वारा अपडेट कर सकते हैं

तो अगले चरण में हमें कोणीय द्वारा प्रदान किए गए बंडलों से HTTP_PROVIDERS और HTTP_PROVIDERS आयात करना होगा।

लेकिन हां, यह बूटस्ट्रैप फ़ाइल में HTTP_PROVIDERS प्रदान करने के लिए एक अच्छा अभ्यास है क्योंकि इस तरह से इसे वैश्विक स्तर पर प्रदान किया गया है और पूरी परियोजना जैसे निम्नलिखित के लिए उपलब्ध है।

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

और आयात से हैं ….

 import {http} from 'angular2/http'; 

एचटीपीपी का उपयोग करते हुए उपभोग के बाकी एपीआई या जेसन

अब http के साथ हमारे पास कुछ और विकल्प हैं, जो angular2 / http के साथ प्रदान किए गए हैं, जैसे कि हेडर, अनुरोध, अनुरोध विकल्प आदि। जो कि बाकी का उपयोग करते समय शेष एपीआई या अस्थायी जेएसन डेटा सबसे पहले हमें यह सब निम्नलिखित की तरह आयात करना है:

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

अब अनुरोध के तरीकों के लिए आते हैं: मूल रूप से हम जीईटी, पोस्ट का इस्तेमाल करते हैं लेकिन हमारे पास कुछ और विकल्प हैं जिनका आप यहां संदर्भ दे सकते हैं …

हम RequestMethod.method_name का उपयोग कर RequestMethod.method_name का उपयोग कर सकते हैं

एपीआई के लिए कुछ और विकल्प हैं, अब मैंने कुछ महत्वपूर्ण विधियों का उपयोग करके पोस्ट अनुरोध के लिए एक उदाहरण पोस्ट किया है:

 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

  <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 में है, इसलिए आपको पैकेज में कुछ भी डालनी पड़ती है। जेसन

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

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

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

आप यहां पूरा काम कर सकते हैं: https://github.com/kalpurush/ng2-http