将四方 API 与 Angular 结合使用
Using foursquare API with Angular
我在弄清楚如何在我的 Angular 应用程序中使用 Foursquare API (search capability) 时遇到问题。
我的项目结构是这样的
app
components
app.ts
search.ts
services
foursquare.ts
typings
boot.ts
index.html
foursquare.ts 看起来像这样
import {Injectable, Inject} from 'angular2/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
import 'rxjs/add/operator/map';
const CLIENT_ID = 'My client id';
const SECRET = 'My secret';
const URL : string = 'https://api.foursquare.com/v2/venues/search?client_id='+CLIENT_ID+'&client_secret='+SECRET+'&v=20130815';
@Injectable()
export class FoursquareService {
constructor(public http:Http) {
this.http = http;
}
foursquareGet(data) {
return this.http.get(URL+data).map(res => res.json());
}
}
我正尝试以下列方式在 search.ts 中使用它
import {Component} from 'angular2/core';
import {FoursquareService} from '../../services/foursquare'
@Component({
templateUrl : 'app/components/new-listing/new-listing.html',
providers : [FoursquareService]
})
export class NewListingComponent {
constructor(service : FoursquareService) {
console.log(service.foursquareGet('&ll=40.7,-74&query=sushi'));
}
}
这个 return 是一个我不知道如何使用的 Observable inside console,我更希望它成为 return 一个满足条件的 JSON 对象数组。我正在尝试按照相关文档进行操作,但不知道下一步该做什么。
使用订阅:
service.foursquareGet('&ll=40.7,-74&query=sushi').subscribe(data=> this.data=data);
是的,Http
class returns 的 get
方法是可观察的。您可以明确订阅它并在您的模板中使用结果:
export class NewListingComponent {
constructor(service : FoursquareService) {
service.foursquareGet('&ll=40.7,-74&query=sushi')
.subscribe(data => {
this.result = data;
});
}
}
您还可以进一步利用 async
管道让它处理可观察对象。在这种情况下,您可以将可观察对象设置为组件的属性:
@Component({
template: `
<ul>
<li *ngFor="#elt of result | async">{{elt.something}}</li>
</ul>
`
})
export class NewListingComponent {
constructor(service : FoursquareService) {
this.result = service.foursquareGet('&ll=40.7,-74&query=sushi');
}
}
这个答案可以给你更多的提示:。
希望对你有帮助,
蒂埃里
我在弄清楚如何在我的 Angular 应用程序中使用 Foursquare API (search capability) 时遇到问题。
我的项目结构是这样的
app
components
app.ts
search.ts
services
foursquare.ts
typings
boot.ts
index.html
foursquare.ts 看起来像这样
import {Injectable, Inject} from 'angular2/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
import 'rxjs/add/operator/map';
const CLIENT_ID = 'My client id';
const SECRET = 'My secret';
const URL : string = 'https://api.foursquare.com/v2/venues/search?client_id='+CLIENT_ID+'&client_secret='+SECRET+'&v=20130815';
@Injectable()
export class FoursquareService {
constructor(public http:Http) {
this.http = http;
}
foursquareGet(data) {
return this.http.get(URL+data).map(res => res.json());
}
}
我正尝试以下列方式在 search.ts 中使用它
import {Component} from 'angular2/core';
import {FoursquareService} from '../../services/foursquare'
@Component({
templateUrl : 'app/components/new-listing/new-listing.html',
providers : [FoursquareService]
})
export class NewListingComponent {
constructor(service : FoursquareService) {
console.log(service.foursquareGet('&ll=40.7,-74&query=sushi'));
}
}
这个 return 是一个我不知道如何使用的 Observable inside console,我更希望它成为 return 一个满足条件的 JSON 对象数组。我正在尝试按照相关文档进行操作,但不知道下一步该做什么。
使用订阅:
service.foursquareGet('&ll=40.7,-74&query=sushi').subscribe(data=> this.data=data);
是的,Http
class returns 的 get
方法是可观察的。您可以明确订阅它并在您的模板中使用结果:
export class NewListingComponent {
constructor(service : FoursquareService) {
service.foursquareGet('&ll=40.7,-74&query=sushi')
.subscribe(data => {
this.result = data;
});
}
}
您还可以进一步利用 async
管道让它处理可观察对象。在这种情况下,您可以将可观察对象设置为组件的属性:
@Component({
template: `
<ul>
<li *ngFor="#elt of result | async">{{elt.something}}</li>
</ul>
`
})
export class NewListingComponent {
constructor(service : FoursquareService) {
this.result = service.foursquareGet('&ll=40.7,-74&query=sushi');
}
}
这个答案可以给你更多的提示:
希望对你有帮助, 蒂埃里