Detaillierte Einführung in den Angular2-HTTP-Dienst. Details zur neuesten Einführung des AngularJS2-Dienstes 2018

Der http-Dienst von

angular2 ist ein Mechanismus zum Abrufen oder Aktualisieren von Daten vom Hintergrundprogramm. Normalerweise müssen wir das Modul, das Daten mit dem Hintergrund austauscht, in einen Winkeldienst umwandeln und zum Abrufen http verwenden und aktualisieren Sie die Hintergrunddaten. Angular verwendet get oder put von http, um Hintergrundaufrufe in der Ajax-Methode durchzuführen, und domänenübergreifende Probleme müssen separat behandelt werden. Schauen wir uns ein Beispiel an, das das Abrufen von Daten von der Backend-Web-API und das Laden der Seite zeigt.

1. Da wir den HTTP-Dienst verwenden müssen, müssen wir <script src="node_modules/angular2/bundles/http.dev.js"></script> in unsere Webseite einführen. Aus diesem Grund konnte ich den http-Dienst nicht finden. , habe viel Zeit damit verschwendet.
2. Sie müssen angular am HTTP_PROVIDERS-Eingang eingeben und gleichzeitig die rxjs-Bibliothek verwenden Sie müssen import 'rxjs/Rx'im Einstiegsprogramm

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {myFrame} from "./frame/component/myFrame.component";
import 'rxjs/Rx';
bootstrap(myFrame, [ HTTP_PROVIDERS]);

3. Dienst erstellen

import {Injectable} from 'angular2/core';
import {Http } from 'angular2/http';
@Injectable()
export class channelService {
private _carsUrl: string = "http://localhost:6611/api/Chanel";
constructor(private _http: Http) {
}
getChannelList() {
return this._http.get(this._carsUrl).map(responce => responce.json())
}
在这个服务中使用了`http`中的`get`来获取数据，这里get的`url（web api）`是与我目前的`anuglar`应用在一个域内。作为服务我们需要申明该服务是可注入的`@Injectable()`

Eine Sache dabei beachten Ein Beispiel ist, dass unser Front-End-Modell und unser Back-End-Modell möglicherweise inkonsistent sind. Wenn die Typfelder konsistent sind, können Sie sie direkt verwenden Das System konvertiert das Backend-Modell automatisch in das von unserem Frontend verwendete Modell

Web-API:

import {Component} from 'angular2/core';
import {appService} from './../service/appsetting.service'
import {channelService} from './../service/channel.service'
import {Channel} from './../model/channel'
@Component({
selector: 'topNav',
templateUrl: '../app/frame/template/topNav.html',
providers: [appService, channelService]
})
export class topNav {
 webTitle: string;
constructor(private _appService: appService,private _channelService:channelService) {  
this.getWebTitle();
}
getWebTitle() {
this.webTitle = this._appService.AppSetting.webTitle;
}
getChannelList() {
this._channelService.getChannelList().subscribe(res => { this.items=res});
}
} 
这里就和普通服务调用没什么区别了，需要先import再在providers中申明，然后在构造函数中注入就行了。

Dieser Artikel endet hier. (Wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website

angularjs Learning Manual

, um mehr zu erfahren.) Wenn Sie Fragen haben, können Sie diese unten stellen.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Angular2-HTTP-Dienst. Details zur neuesten Einführung des AngularJS2-Dienstes 2018. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!