Я пытаюсь найти фотографии flickr с помощью приложения поиска flick, но оно зависает при поиске
Я пробовал поиск по локальному хосту через xampp, но безуспешно.Я попытался опустить некоторый код, чтобы попытаться отладить код, но я новичок в angular, поэтому буду признателен за любую помощь.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>Flickr Search</title>
<link rel="stylesheet" href="bower_components/angular-material/angular-
material.min.css"/>
<Link rel="stylesheet" href="bower_components/angular-
material/themes/blue-theme.css"/>
<Link rel="stylesheet" href="style.css"/>
<Link rel="stylesheet" href="//fonts.googleapis.com/css?
family=RobotoDraft:400,500,700,400italic"/>
</head>
<body ng-app="flickrApp" ng-controller="ListController" layout="column"
layout-align="top center">
<md-toolbar>
<div class="md-toolbar-tools">
<span class="md-flex">Flickr Search</span>
</div>
</md-toolbar>
<md-content layout="column" layout-align="center center">
<div class="app-content">
<form ng-submit="search()" >
<div ng-show="!isSearching">
<md-input-container class="long" flex>
<label>Search for</label>
<input ng-model="searchTerm">
</md-input-container>
</div>
</form>
<div ng-if="isSearching">
<md-progress-circular md-theme="blue" md-
mode="indeterminate"></md-progress-circular>
</div>
<div id="result">
<md-card ng-repeat="picture in results.photos.photo">
<img ng-
src="https://farm{{picture.farm}}
.staticflickr.com/{{picture.server}}
/{{picture.id}}_{{picture.secret}}
_b.jpg" alt="" class="md-card-image">
<h3>{{ picture.title }}</h3>
</md-card>
</div>
</div>
</md-content>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js">
</script>
<script src="bower_components/angular-animate/angular-
animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-
material.min.js">
</script>
<script src="app.js"></script>
</body>
</html>
app.js
(function() {
"use strict";
angular
.module("flickrApp", ["ngMaterial"])
.config([
"$mdThemingProvider",
function($mdThemingProvider) {
$mdThemingProvider
.theme("blue")
.primaryPalette("pink")
.accentPalette("orange");
}
])
.controller("ListController", [
"$scope",
"$http",
function($scope, $http) {
$scope.isSearching = false;
$scope.results = [];
$scope.search = function() {
$scope.isSearching = true;
$http({
method: "GET",
url: "https://api.flickr.com/services/rest",
params: {
method: "flickr.photos.search",
api_key: "2a546acf9f7ceb4dc8e64730395b475b",
text: $scope.searchTerm,
format: "json",
nojsoncallback: 1
}
})
.success(function(data) {
$scope.results = data;
$scope.isSearching = false;
})
.error(function(error) {
console.error(error);
$scope.isSearching = false;
});
};
}
]);
})();