Angular2 http 서비스에 대한 자세한 소개입니다. 2018년 최신 Anglejs2 서비스 소개 내용

angular2의 http 서비스는 백그라운드 프로그램에서 데이터를 얻거나 업데이트하는 데 사용되는 메커니즘입니다. 일반적으로 백그라운드와 데이터를 교환하는 모듈을 각도 서비스로 만들고 http를 사용하여 백그라운드 데이터를 얻고 업데이트해야 합니다. Angular는 http의 get Or put을 사용하여 ajax를 사용하여 백그라운드 호출을 수행하며 도메인 간 문제는 별도로 처리해야 합니다. 백그라운드 웹 API에서 데이터를 가져오고 페이지를 로드하는 방법을 보여주는 예를 살펴보겠습니다.

1. http 서비스를 사용해야 하기 때문에 웹 페이지에 <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()`

4. 이 예에서는 주의해야 할 사항이 있습니다. 가장 중요한 것은 우리의 프론트엔드 모델과 백엔드 모델이 일치하지 않을 수 있으므로 데이터를 얻은 후 변환해야 한다는 것입니다. 유형 필드가 일치하면 json 형식이므로 직접 사용할 수 있습니다. 시스템은 백엔드 모델을 프런트엔드 모델에서 사용하는 모델로 자동으로 변환합니다.

웹 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 중국어 홈페이지

angularjs 학습 매뉴얼

에서 배워보세요.) 궁금한 점이 있으시면 아래로 질문해주세요.

위 내용은 Angular2 http 서비스에 대한 자세한 소개입니다. 2018년 최신 Anglejs2 서비스 소개 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!