Question

我正在尝试使用flick搜索应用程序搜索flickr照片，但是搜索时却挂断了

我尝试通过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;
        });
        };
        }
        ]);
        })();

Flickr搜索应用程序找不到任何轻弹图片

0 个答案: