Instagram API에 액세스 할 때 AngularJS + $ http.get을 사용하려고 시도합니다

오류를 지적 할 수 있습니까? 저는 기본적으로이 모든 것에 익숙하지 않고 방금 angleJS 튜토리얼과 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; 
    });    

};

출처

2013-07-08 user2562496

Angular는 크로스 원점 프로토콜을 따르는 HTTP 요청의 끝에 '& callback = JSON_CALLBACK'을 요구합니다. 그것을 추가하고 도움이되는지 확인하십시오. –

또한 정확히 어떤 오류가 발생합니까? 콘솔 오류? –

눈에 띄는 오류 :

nameQuery는 $scope에 바인딩되지 않습니다.
필요한 모든 정보가 없어도 두 가지 요청을하고 있습니다.
jsonp 방법을 사용하지 않고 도메인 간 요청을하고 있습니다.

consuming REST services in AngularJS에 대한 자습서를 읽었습니까?

출처

2013-07-09 00:35:22 pasine

iTunes API와 같은 간단한 것으로 시작하는 것이 좋습니다. 여기에 내가 해커 뉴스에 출연 한 how to make asynchronous http requests with Angular JS의 위대한 간단한 예제/기사가 있습니다.

출처

2013-10-22 00:08:20

이 질문에 전혀 대답하지 않습니다. –

Instagram API에 액세스 할 때 AngularJS + $ http.get을 사용하려고 시도합니다

답변

관련 문제