# 基于jsonp做數據源的示例
在TP5的控制器中新建data方法（在上一個示例的基礎上）
~~~php
public function data()
{
$data = [
[
'title'=>'ThinkPHP框架',
'url'=>'http://www.thinkphp.cn/'
],
[
'title'=>'看云',
'url'=>'http://www.hmoore.net/'
],
[
'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的。
