# 基于jsonp做数据源的示例
在TP5的控制器中新建data方法（在上一个示例的基础上）
~~~php
public function data()
{
$data = [
[
'title'=>'ThinkPHP框架',
'url'=>'http://www.thinkphp.cn/'
],
[
'title'=>'看云',
'url'=>'http://www.kancloud.cn/'
],
[
'title'=>'angularjs 2 中文网',
'url'=>'https://angular.cn/'
],
];
return jsonp($data);
}
~~~
访问地址，得到结果
在angular2的app目录下新建 website.ts 是我们的要循环的对象，由2个属性，title和url
~~~
export class Website {
constructor(public title: string, public website: string) { }
}
~~~
在 app.module.ts 文件中引入 jsonp 模块
~~~
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JsonpModule } from '@angular/http';
@NgModule({
imports: [ BrowserModule , JsonpModule],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
~~~
修改 app.component.ts 模板部分添加
~~~
<ul *ngIf="websites">
<li *ngFor="let website of websites"><a href="{{website.url}}">{{website.title}}</a></li>
</ul>
~~~
AppComponent 修改为：
~~~
export class AppComponent{
public websites: Website[];
name:string = 'angularjs2';
constructor(private jsonp: Jsonp) {
jsonp.get('http://api.imba.cn/index/index/data?callback=JSONP_CALLBACK')
.map(res => res.json())
.subscribe(v=> this.websites = v);
}
}
~~~
记得导入相应的依赖
~~~
import {Jsonp} from '@angular/http';
import 'rxjs/add/operator/map'
import {Website} from './website'
~~~
运行一下，查看效果
到这里 我们完成了一个小的演示程序，这个程序揭示了，angular2 是如何调用到tp5的api的。
