Introduction détaillée au service http Angular2. Détails de l'introduction du dernier service AngularJS2 2018

Le service http de

angular2 est un mécanisme utilisé pour obtenir ou mettre à jour des données à partir du programme d'arrière-plan. Habituellement, nous devons transformer le module qui échange des données avec l'arrière-plan en un service angulaire et utiliser http pour obtenir. et mettez à jour les données d'arrière-plan, angulaire utilise get ou put de http pour effectuer des appels en arrière-plan dans la méthode ajax, et les problèmes inter-domaines doivent être traités séparément. Examinons un exemple qui montre l'obtention de données à partir de l'API Web backend et le chargement de la page.

1. Puisque nous devons utiliser le service http, nous devons introduire <script src="node_modules/angular2/bundles/http.dev.js"></script> dans notre page Web. C'est la raison pour laquelle je n'ai pas pu trouver le service http avant. , j'ai perdu beaucoup de temps là-dessus.
2. Vous devez introduire angular à l'entrée HTTP_PROVIDERS et l'injecter en même temps, car vous devez utiliser la carte, vous abonner, etc., vous devez utiliser la bibliothèque rxjs. vous devez introduire import 'rxjs/Rx' dans le programme d'entrée à l'avance. Leçons

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. Créer un service

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. Une chose à noter dans cet exemple est que notre modèle front-end et notre modèle back-end peuvent être incohérents, vous devez donc le convertir après avoir obtenu les données. Si les champs de type sont cohérents, vous pouvez l'utiliser directement depuis. est au format json, le système convertira automatiquement le modèle back-end en modèle utilisé par notre front-end

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

APIWeb :

Cet article se termine ici. (Si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois

angularjs Learning Manual

public class ChanelController : ApiController
 {
 // GET api/<controller>
public IEnumerable<Chanel> Get()
{
 return new Chanel[] { new Chanel{ ID="1", ChanelName="组织机构"},new Chanel{ ID="2",ChanelName="通知公告"} };
}
}
注：web api 可以使用Swashbuckle 进行测试，安装 PM>Install-Package Swashbuckle，使用时只需在路径后加入swagger，如http://localhost:6611/swagger/ui/index

pour apprendre) Si vous avez des questions, vous pouvez les poser ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!