angular中创建服务和请求http数据的一个流程

,1，创建一个服务

//创建一个服务文件http.service.ts

里面的代码

import {Injectable } from '@angular/core';import {Http, Response } from '@angular/http';import 'rxjs/add/operator/map';import 'rxjs/add/operator/catch';@Injectable()export class myHttpService {constructor(private http: Http) {}//向myUrl所对应的服务器发起请求sendRequest(myUrl:string){//创建get请求路径通过参数来传return this.http.get(myUrl).map((response: Response) => response.json());}}

2，html界面

//列表接收数据<ul><li *ngFor="let item of dataList">标题：{{item.title}}——价格：{{item.price}}</li></ul>//通过点击button来获取数据<button (click)='getData()'>获取数据</button>

3，component中

//引入服务import {myHttpService} from './http.service';//创建接收数据的数组dataList:Array<any>=[];//click事件中的方法getData(){//因为服务器端口不一样，涉及到跨域访问所有需要在PHP头部加入头部//header("Access-Control-Allow-Origin:*");this.myHttp.sendRequest("http://127.0.0.1/111/emp.php").subscribe((result:any)=>{this.dataList=result});}

4，要使用http请求，需要在app.module.中引入

import {HttpModule} from '@angular/http';import {myHttpService} from './demo14/http.service';providers:[myHttpService],imports: [HttpModule]