Maison > Article > interface Web > 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 3f148f16a92f71b127090237c998858c2cacc6d41bbb37262a98f745aa00fbf0
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]);
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()`
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 Manualpublic class ChanelController : ApiController { // GET api/42820a3cc9b8dae7922d3e053756785d public IEnumerableb79328fbba81c10bf446ccf392e511f9 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/indexpour 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!