Angular2 http サービスの詳細な紹介。 2018年最新angularjs2サービス導入詳細

angular2のhttpサービスはバックグラウンドプログラムからデータを取得したり更新したりするための仕組みで、通常はバックグラウンドとデータをやりとりするモジュールをAngularサービス化し、バックグラウンドデータの取得や更新にはhttpを利用する必要があります。 Angular は http の get または put を使用してバックグラウンド呼び出しを行うため、クロスドメインの問題は個別に処理する必要があります。バックエンド Web API からデータを取得し、ページをロードする例を見てみましょう。

1. http サービスを使用する必要があるため、Web ページに <script src="node_modules/angular2/bundles/http.dev.js"></script>，这步很关键，我之前发生的找不到http服务的原因就在此，浪费了很多时间在此。
2、在angular入口还需引入HTTP_PROVIDERS，并注入，同时由于要使用map，subscribe等所以需要使用rxjs库，那么就需要提前在入口程序中引入import 'rxjs/Rx' を導入する必要があります

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. サービスを作成します

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()`

この例では注意が必要な点があります。最も重要なことは、フロントエンド モデルとバックエンド モデルが一致していない可能性があるため、型フィールドが一致していれば、データを直接使用できることです。システムはバックエンド モデルをフロントエンド モデルで使用されるモデルに自動的に変換します

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中申明，然后在构造函数中注入就行了。

この記事はここで終わります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

angularjs 学習マニュアル

にアクセスして学習してください) ご質問がある場合は、以下よりお問い合わせください。

以上がAngular2 http サービスの詳細な紹介。 2018年最新angularjs2サービス導入詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。