打印 Flickr API 对控制台的响应 AngularJS
Printing Flickr API Response to Console AngularJS
我目前正在尝试使 API 调用正常工作,想看看它是否已成功 return 来自外部源的 API 数据。
如何从 app.js 文件向控制台打印输出,以便在这种情况下我可以查看 API 调用是否已经 returned?/是否有我缺少的更好的方法?
我应该使用 $http 还是 $resource?
当前代码:
js/app.js
var app = angular.module('imageViewer', ['ng', 'ngResource']);
function AppGallery($scope, $http) {
$http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?').success(function (data) {
$scope.data = data;
log(data);
});
};
<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
<title>Photo Viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppGallery">
{{data}}
</body>
</html>
这实际上有点不同。您将必须定义回调函数 jsonFlickrFeed。检查下面的代码。
你会注意到两件事:-
- 我们正在请求参数为 ?format=json 的数据。 Check the response here.
- 您会注意到出现的响应正在寻找回调函数 jsonFlickrFeed。只需将数据处理程序定义到此函数中即可。
var app = angular.module('imageViewer', ['ng', 'ngResource']);
app.controller('AppGallery',[ '$scope','$http', function AppGallery($scope, $http) {
$http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json').success(function (data) {
});
jsonFlickrFeed = function(data){
$scope.data = data;
console.log(data);
}
}]);
<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
<title>Photo Viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppGallery">
{{data}}
</body>
</html>
检查 here 并了解更多信息。
如果您使用 jQuery,您可以 use jQuery.getJSON instead. More details 关于 jQuery.getJSON .
希望对您有所帮助!如果是,请标记为答案!谢谢!
要避免使用 jsonp,请添加以下查询参数:
&nojsoncallback=1
我目前正在尝试使 API 调用正常工作,想看看它是否已成功 return 来自外部源的 API 数据。
如何从 app.js 文件向控制台打印输出,以便在这种情况下我可以查看 API 调用是否已经 returned?/是否有我缺少的更好的方法?
我应该使用 $http 还是 $resource?
当前代码: js/app.js
var app = angular.module('imageViewer', ['ng', 'ngResource']);
function AppGallery($scope, $http) {
$http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?').success(function (data) {
$scope.data = data;
log(data);
});
};
<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
<title>Photo Viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppGallery">
{{data}}
</body>
</html>
这实际上有点不同。您将必须定义回调函数 jsonFlickrFeed。检查下面的代码。
你会注意到两件事:-
- 我们正在请求参数为 ?format=json 的数据。 Check the response here.
- 您会注意到出现的响应正在寻找回调函数 jsonFlickrFeed。只需将数据处理程序定义到此函数中即可。
var app = angular.module('imageViewer', ['ng', 'ngResource']);
app.controller('AppGallery',[ '$scope','$http', function AppGallery($scope, $http) {
$http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json').success(function (data) {
});
jsonFlickrFeed = function(data){
$scope.data = data;
console.log(data);
}
}]);
<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
<title>Photo Viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppGallery">
{{data}}
</body>
</html>
检查 here 并了解更多信息。
如果您使用 jQuery,您可以 use jQuery.getJSON instead. More details 关于 jQuery.getJSON .
希望对您有所帮助!如果是,请标记为答案!谢谢!
要避免使用 jsonp,请添加以下查询参数:
&nojsoncallback=1