一、app.module.ts注册HTTP JSONP服务
1.引入HttpModule 、JsonpModule 普通的 HTTP 调用并不需要用到 JsonpModule,不过稍后我们就会演示对 JSONP 的支持, 所以现在就加载它,免得再回来改浪费时间。
import { HttpModule, JsonpModule } from '@angular/http';
2.HttpModule 、JsonpModule依赖注入
@NgModule({
declarations: [
AppComponent,
HomeComponent,
NewsComponent,
NewscontentComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
AppRoutingModule
],
providers: [
StorageService,
NewsService
],
bootstrap: [AppComponent]
})
二、通过 Http、Jsonp请求数据、不用RxJs
RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程;不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控、更简单。 app.module.ts引入并且依赖注入完成以后,在需要用到的地方执行下面操作。 使用Http、Jsonp:
1、在需要请求数据的地方引入 Http
import {Http,Jsonp} from "@angular/http";
2、构造函数内申明:
constructor(private http:Http,private jsonp:Jsonp) { }
3、对应的方法内使用http请求数据
this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1") .subscribe( function(data){ console.log(data); },
function(err){ console.log('失败'); } );