尝试使用 AngularJS + $http.get 访问 Instagram API答案

【问题标题】：Trying to use AngularJS + $http.get to access the Instagram API尝试使用 AngularJS + $http.get 访问 Instagram API
【发布时间】：2013-07-08 23:03:24
【问题描述】：

谁能指出任何错误？我基本上对所有这些都是新手，我一直在使用 angularJS 教程、API 和其他一些资源来尝试将它们拼凑在一起，但运气并不好。忽略关于标签的部分，它还没有做任何事情。代码应该做的是响应第一个输入标签中的输入。在那里输入的任何内容 (nameQuery) 都连接到用于访问 API 的字符串中，然后我获取该信息并将其存储在 $scope.userID 中，然后我使用 userID 获取 userData 和图像列表，以便我可以打印它们。但它不起作用，我已经研究了一段时间，并没有任何线索。希望有经验的程序员能帮帮我！

HTML 文件：

<!doctype html>
<html ng-app>

    <head>
        <meta charset="utf-8" />
        <title>Insta-Visualizer</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
         <script src="script.js"></script>

    </head>

    <body ng-controller="ImageCtrl">

        <div id="wrapper">

            <div id="header">
            <span class="title">Instagram Visualizer</span>
            </div>

            <div id="body">

                <div class="border">

                    <div id="search1">
                        Username <input ng-model="nameQuery">
                    </div>

                    <div id="search2">
                        Hashtag <input ng-model="hashtagQuery">
                    </div>

                </div>

                <div class="border">
                    <ul class="images">
                        <li ng-repeat="picData in imageList">
                            <img ng-src="{{picData.images.low_resolution}}"/>
                        </li>
                    </ul>
                </div>

            </div>

        </div>
    </body>
</html>

脚本：

var token = '1502600.bcf60cd.2ddf423a61534720beafdae05c4cf26f';

function ImageCtrl($scope, $http){

    var searchURL = 'https://api.instagram.com/v1/users/search?q=' + nameQuery
               + '&access_token=' + token;

    $http.get(searchURL).success(function(data) {
        $scope.userID = data.data.id;
    });

    var userDataURL = 'https://api.instagram.com/v1/users/' + $scope.userID
                      + '/media/recent/?access_token=' + token;

    $http.get(userDataURL).success(function(data) {
        $scope.userData = data;
        $scope.imageList = $scope.userData.data;
    });            

};

【问题讨论】：

我也在为此苦苦挣扎，Angular 要求在 http 请求结束时使用 '&callback=JSON_CALLBACK' 以遵循跨源协议。尝试添加它，看看是否有帮助。
还有什么错误呢？控制台错误？

标签： javascript http angularjs instagram

【解决方案1】：

值得注意的错误：

nameQuery 未绑定到 $scope。
您提出了两个请求，但没有获得所需的所有信息。
你正在做一个跨域请求，没有使用jsonp方法。

您是否阅读过有关consuming REST services in AngularJS 的教程？

【讨论】：

【解决方案2】：

我建议从更简单的东西开始，例如 iTunes API。这是我在 Hacker News 上看到的关于 how to make asynchronous http requests with Angular JS 的一个很棒的简单示例/文章。

【讨论】：

这根本没有解决问题。