JSONは、私はこのトピックの男と同じ問題を持っているAngularJS

を使用してロードされません。私はMAMPを使用してウェブサイトを運営しているので、それは私が推測する問題ではありませんか？ここJSONは、私はこのトピックの男と同じ問題を持っているAngularJS

コードである：

index.htmlを

<!DOCTYPE HTML> 
<html ng-app="myQuiz"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Test Your Knowledge: Saturn</title> 
     <link rel="stylesheet" type="text/css" href="css/quiz.css"> 
     <script type="text/javascript" ng-src="js/angular.min.js"></script> 
     <script type="text/javascript" ng-src="js/quiz.js"></script> 
    </head> 
    <body> 
     <div id="myQuiz" ng-controller="QuizController"> 
      <h1>Test Your Knowledge: <span> Saturn</span></h1> 
      <div class="progress"> 
       {{totalQuestions}} 
      </div> 
     </div> 
    </body> 
</html>

quiz.js

(function(){ 
    var app = angular.module('myQuiz', []); 

    app.controller('QuizController', ['$scope','$http','$sce',function($scope,$http, $sce){ 

     $scope.score = 0; 
     $scope.activeQuestion = -1; 
     $scope.activeQuestionAnswered = 0; 
     $scope.percentage = 0; 

     $http.get('quiz_data.json').then(function(quizData){ 
      $scope.myQuestions = quizData.data; 
      $scope.totalQuestions = $scope.myQuestions.length; 
     }); 
    }]); 
})();

quiz_data.json

[ 
    { 
     "question" : "Saturn is the _______ planet from the Sun.", 
     "answers" : [ 
      { "id" : 0, "text" : "Fourth" }, 
      { "id" : 1, "text" : "Sixth" }, 
      { "id" : 2, "text" : "Second" }, 
      { "id" : 3, "text" : "Eighth" } 
     ], 
     "correct" : 1 
    }, 
     { 
     "question" : "Which image shows a close-up of Saturn?", 
     "answers" : [ 
      {"id" : 0, "image" : "images/close_up_01.jpg" }, 
      {"id" : 1, "image" : "images/close_up_02.jpg" }, 
      {"id" : 2, "image" : "images/close_up_03.jpg" }, 
      {"id" : 3, "image" : "images/close_up_04.jpg" } 
     ], 
     "correct" : 3 
    }, 
    { 
     "question" : "One year on Saturn is equivalent to how many years on Earth?", 
     "answers" : [ 
      {"id" : 0, "text" : "12"}, 
      {"id" : 1, "text" : "6"}, 
      {"id" : 2, "text" : "29"}, 
      {"id" : 3, "text" : "2"} 
     ], 
     "correct" : 2 
    }, 
    { 
     "question" : "What is the name of Saturn's largest moon?", 
     "answers" : [ 
      {"id" : 0, "text" : "Hercules"}, 
      {"id" : 1, "text" : "Europa"}, 
      {"id" : 2, "text" : "Goliath"}, 
      {"id" : 3, "text" : "Zeus"}, 
      {"id" : 4, "text" : "Titan"}, 
      {"id" : 5, "text" : "Triton"} 
     ], 
     "correct" : 4, 
     "feedback" : "Though the names seem similar, Triton orbits the planet Neptune." 
    }, 
    { 
     "question" : "Saturn is visible from Earth without a telescope", 
     "answers" : [ 
      {"id" : 0, "text" : "True"}, 
      {"id" : 1, "text" : "False"} 
     ], 
     "correct" : 0 
    } 
]

website jsonとの接続がうまくいかないようです。これを解決する方法を知らない。

ありがとうございます！

出典

2016-04-09 Mick

は、まったくレンダリングされていないようです。コンソールは何を言いますか？ –

は、Javaスクリプトの参照をロードする際に 'ng-src'を使用しません。代わりに ''、私はどんな問題も解決するとは思えませんが、それを見てコメントしました。コンソールにエラーはありますか？ –

これはエラーです： angular.min.js：87 XMLHttpRequestはfile：/// C：/MAMP/htdocs/S3/portfolio_v2/quiz_data.jsonをロードできません。 Cross originリクエストは、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。 – Mick

ローカルのhttpサーバーからファイルにアクセスする必要があります。

websiteイメージからは、あなたのWebサーバーではなく、ファイルシステムを通じてindex.htmlを読み込んでいるようです。

アドレスバーはhttp://localhost:8888/<path to your index.html>である必要があります。または、Webサーバーが動作しているポートである必要があります。

出典

2016-04-09 11:01:57

正しく実行したかどうかわかりませんが、cmdで 'npm install http-server -g 'という行を実行します。その後、私はhttp：// localhost：8080/index.htmlに行き、ユーザー名とパスワードを求めました。しかし、それらを知らないのですが、どこで見つけることができますか？私はどちらかをインストールするいくつかの手順を逃したかどうかわからない。 – Mick

ローカルhttpサーバの起動/インストールに関する私の回答を編集しました。私はあなたがすでにMAMPを使っていたことを知らなかった。 https://documentation.mamp.info/en/documentation/mamp/のドキュメントを見ると、サーバーを起動すると、http：// localhost：8888/S3/portfolio_v2/indexのページにアクセスできます.html' –

ありがとうございました！できます：） – Mick

JSONは、私はこのトピックの男と同じ問題を持っているAngularJS

答えて

関連する問題