2014-02-14 24 views
0

現在我只是試圖讓API調用工作,沒有什麼奇特的。最後,我只會想要一些基本的信息,比如名字,運行時間,評分和描述等等,但是這一切都晚了。我甚至無法讓API調用工作。調用angularJS和Rotten Tomato的API調用

我已經做了幾個教程,我似乎失去了一些東西。

HTML

<head> 
<title>Watch a movie!</title> 

<meta charset = "UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
<meta name="description" content=""> 
<meta name="keywords" content=""> 

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
<link href="css/style.css" rel="stylesheet" type="text/css"> 
<script src="js/angular.min.js"></script> 
<script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script> 
<script src="controllers/movies.js"></script> 

</head> 
<body> 
<div id="wrapper"> 
<button type="button" class="btn btn-primary btn-lg btn-block">NOW PLAYING</button> 
<button type="button" class="btn btn-default btn-lg btn-block">COMING FRIDAY</button> 

<!-- PLACEHOLDER --> 
<div id="movieInfoBox"> 
<div ng-controller = "movieController">{{movies}}</div> 
</div> 

</div> <!-- END WRAPPER --> 

JS

var movies = angular.module("movies", []); //quotes are name of this file 
movies.controller("movieController", function ($scope, $http){ //quotes are name of function called in index 

    $http.jsonp("http://api.rottentomatoes.com/api/public/v1.0/movies/155655062.json?apikey=wq98h8vn4nfnuc3rt2293vru") 

    .sucess(function(data) 
      {$scope.movies = data;}) 
    .error(function(data){}); 
}); 

回答

4

您必須包括JSON_CALLBACK在URL中。否則,API將返回JSON而不是JSONP。在下面的代碼中,我使用配置對象而不是查詢字符串中的參數。這只是因爲它更易於閱讀,您還可以使用您的版本,並將URL回撥爲= JSON_CALLBACK加入&。見 'JSONP' in the docs

工作小提琴:在控制器http://jsfiddle.net/pascalockert/fM7jb/

代碼:

$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/155655062.json', { 
    params: { 
     apikey: 'wq98h8vn4nfnuc3rt2293vru', 
     callback: 'JSON_CALLBACK' 
    } 
}) 
.success(function (data) { 
    $scope.movies = data; 
}); 
+0

曾爲完美,謝謝。我一直在嘗試回調,但它始終在url的末尾。我喜歡你如何把它放在參數中。它不僅起作用,而且更容易閱讀。 – Ryan