Yelp API和AngularJS
我正在尝试使用AngularJS调用Yelp API，但遇到了麻烦。我不断收到400个错误的请求，我也不知道为什么。
Yelp API文档：
http://www.yelp.com/developers/documentation/v2/验证
http://www.yelp.com/developers/documentation/v2/search_api
包含Yelp API生成的键的页面：
http://gyazo.com/fa918329eb0cde18a5db242d1d0b0b0e
这是我的代码的摘录：
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
app.factory("MyYelpAPI", function($http) {
return {
"retrieveYelp": function(name, callback) {
$http.jsonp("http://api.yelp.com/v2/search?term=food&location=San+Francisco&callback=JSON_CALLBACK",
{
params: {
oauth_consumer_key: /* Consumer Key */,
oauth_token: /* Token */,
oauth_signature_method: "hmac-sha1",
oauth_signature: /* Token Secret */,
oauth_timestamp: new Date().getTime(),
oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')
}
}
).success(callback);
}
}
});
问题答案：
Yelp API返回非常有用的错误消息，您可以在响应正文中找到。我已通过3个步骤使请求生效：
-
将“ hmac-sha1”更改为“ HMAC-SHA1”。文档说hmac-sha1，但这是错误的。
-
oauth_signature与令牌密钥不同。您需要分别为每个请求生成oauth_signature。我使用了这个库https://github.com/bettiolo/oauth-signature-js
-
AngularJS将硬编码的回调参数发送到服务器，因此我们也需要在参数列表中对其进行硬编码。否则我们的签名不正确。
我的代码：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://raw.githubusercontent.com/bettiolo/oauth-signature-js/master/dist/oauth-signature.min.js"></script>
</head>
<body ng-app="plunker">
<div ng-controller="MainCtrl">
<p><date-input name="info.name" message="info.message"></date-input></p>
<ul>
<li data-ng-repeat="business in businesses">
{{business.name}}
</li>
</ul>
</div>
<script>
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope', 'MyYelpAPI', function($scope, MyYelpAPI) {
$scope.businesses = [];
MyYelpAPI.retrieveYelp('', function(data) {
$scope.businesses = data.businesses;
});
}]).factory("MyYelpAPI", function($http) {
return {
"retrieveYelp": function(name, callback) {
var method = 'GET';
var url = 'http://api.yelp.com/v2/search';
var params = {
callback: 'angular.callbacks._0',
location: 'San+Francisc',
oauth_consumer_key: '', //Consumer Key
oauth_token: '', //Token
oauth_signature_method: "HMAC-SHA1",
oauth_timestamp: new Date().getTime(),
oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
term: 'food'
};
var consumerSecret = ''; //Consumer Secret
var tokenSecret = ''; //Token Secret
var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
params['oauth_signature'] = signature;
$http.jsonp(url, {params: params}).success(callback);
}
}
});
</script>
</body>
</html>
-
问题内容： 我正在使用带有Express的nodeJS服务器来服务我的AngularJS应用程序。当我使用angularJS默认路由（hashbangs）时，所有这些都工作正常，但是现在我尝试激活html5模式。 我正在像这样激活html5mode： 这是我的nodeJS 文件的样子： 但是，这现在将所有请求用作我的文件，因此我从requireJS收到以下错误： 我尝试将以下内容添加到我的node
-
问题内容： 我正在尝试使用angularjs和webpack运行简单的应用程序，这是我的代码： index.html app.js Webpackconfig.js main.js bundle.js 我也看到了这个：https : //github.com/jeffling/angular-webpack- example 问题是我如何正确运行？ 问题答案： bundle.js 由webpack
-
问题内容： 我可以手动为某些应用程序设置$ locale吗？ 支持本地人的唯一方法是否可能是将来自角度库的本地化文件包括在当前地区中。如果有多种文化怎么办？在那种情况下，我必须动态加载本地化文件吗？我想念什么？ 问题答案： 老实说，angular中的$ locale服务仍然很原始。确实不错，但是在这方面似乎缺乏灵活性。最大的问题是，即使您通过动态地重新加载适当的语言环境文件来切换语言环境，诸如日期
-
问题内容： 我正在使用Zurb的Foundation框架修改应用程序以实现响应性和AngularJS。存在一个错误，即根据Foundation的响应规则隐藏/显示具有的表中显示的数据带有的错误。不幸的是，当角度模型更新时，Foundation不会重新流送新渲染的DOM。 我尝试使用 在广泛的Google搜索中发现的方法，但是实际上并没有触发响应折叠表的重排。我还添加了一条指令来触发一个简单的指令，
-
问题内容： 我最近开始学习AngularJS，并且正在考虑使用codeigniter作为后端（作为将数据插入，更新和删除MySQL数据库的API）和AngularJS作为前端框架来创建应用程序。所以我的问题是：我将如何实现？我要在两者之间传输数据吗？ 我想通过示例了解一些细节，因为我找不到结合了两者的优秀视频教程。（找到了有关laravel和angular的一些教程，Ruby在rails和angu
-
问题内容： 我有一些要调用的Web服务。或，我应该使用哪一个？ ：https : //docs.angularjs.org/api/ngResource/service/$resource ：https : //docs.angularjs.org/api/ng/service/$http 阅读以上两个API页面后，我迷路了。 您能用简单的英语给我解释一下有什么区别，在什么情况下我应该使用它们？如
-
问题内容： 和之间有什么实际区别？这两个指令都操作DOM，但更为冗长。除非在这种情况下需要非常大的东西，否则通常使用这种情况吗？ 有一种情况，并不能直接替代品？还是它们唯一的实际区别在于语法？ 问题答案： 我相信，MicheleTilley完全正确，特别是指出/的对比。还有另外一个需要注意的区别：将 原位 分离并重新附加元素。但是具有外部包含元素，您可以在其上声明主要指令及其条件：。该外部元素中的
-
问题内容： 我在AngularJS的$ http上遇到了一个奇怪的行为，但并没有真正理解transformResponse的工作方式（文档对此有点儿淡淡）。 api返回一个对象数组： 但是，当transformResponse完成操作后，数据就变成了索引对象： 我想保留原始数据结构（对象数组）。 问题答案： 为了使角度不将数据转换为对象，您需要覆盖默认$ httpProvider.defaults