Я знаю, что подобный вопрос уже задавался ранее, но я не смог найти решение, которое сработало бы для моей ситуации, и, возможно, это сводится к моему отсутствию опыта в Angular, поэтому, если это так, я прошу прощения заранее.
Я создаю красивое базовое c Angular приложение, оно просто должно получить доступ к iTunes API и найти песни / фильм / et c ... и вернуть несколько результаты ниже. Однако всякий раз, когда я вводю символ во ввод, я не получаю результатов, и в консоли появляется ошибка (я использую Firefox)
app. js
var app = angular.module('itunes-search', ['ngResource']).config(function($sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://itunes.apple.com/**'
]);
});
app.factory('Media', function($resource){
return $resource('https://itunes.apple.com/search?term=:query'),{query: '@query'}, {
search: {
method: 'JSONP',
params: {
limit: 3,
callback: 'JSON_CALLBACK'}
}
}
});
app.controller('MediaCtrl',
function($scope, Media){
$scope.query = '';
$scope.$watchCollection('query', function(){
if ($scope.query.length > 0){
Media.search({ query: $scope.query}, function(data){
$scope.results = data.results;
});
} else {
$scope.results=[];
}
});
});
index. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iTunes Search</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="itunes-search" ng-controller="MediaCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>iTunes Search</h1>
</div>
<input type="search" ng-model="query" ng-keyup="onKeyupSearch()"
placeholder="Search for Movies, Music, etc." style="width: 100%;"/>
<ul ng-repeat="result in results">
<span style="font-size:20px; margin-left:10px;">
<li>
<h2>{{result.trackName}}</h2>
<h3>{{result.artistName}}</h3>
<img ng-src="{{result.artworkUrl100}}"/>
</li>
</span>
</span>
</ul>
</div>
</div>
</body>
</html>
Я надеюсь, что предоставил достаточно подробностей, и если у вас есть какие-либо дополнительные ресурсы, которые помогут мне узнать больше Angular Я очень ценю предложения. Я могу добавить любую дополнительную информацию, если мне нужно.
Еще раз спасибо!