私のangularJSがサンプルウェブで動作しないのはなぜですか？

私はAngularJsを学び、いくつかのコードを実行しようとしますが、ブラウザ（Chrome/IE）でjavavスクリプトコードを実行しても動作しません。 "{{product.like}}"のコードは機能していません。何かをインストールしなければならないことや依存関係がありますか？私はすべての助けと答えに感謝します。私のENGに申し訳ありません。 :)私のangularJSがサンプルウェブで動作しないのはなぜですか？

HTMLコード：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel = "stylesheet" href = "css/style.css"> 
    <title>InstantGram | Posts</title> 
    <link rel="icon" type="image/gif/png" href="icon.png"> 
</head> 
<header> 
    <h1 class = "mainHead"><span id = "insColor">Instant</span>Gram</h1> 
</header> 
<body ng-app = "myApp"> 
    <div class ="main" ng-controller = "mainController"> 
     <div> 
    <h2 class = "sunset">The Unusual Sunset</h2> 
    <img src = "The_sunset.jpg" alt="Unloaded Image" width="477px"      
height="268px"/> 
    <div class="rating"> 
      <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}  </p> 
     </div> 
     </div> 
     <hr> 
     <div> 
    <h2>The Metropolis Before 1927</h2> 
    <img src = "metropolis_before.jpg" alt = "Unloaded Image"/> 
    <div class="rating"> 
      <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}  </p> 
     </div> 
     </div> 
     <hr> 
     <div> 
    <h2>The Paradise</h2> 
    <img src = "lake.jpg" alt = "unloaded image" width="477px" height="268px"> 
    <div class="rating"> 
      <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}  </p> 
     </div> 
     </div> 
     <hr> 
     <div class="footer"> 
      <div class="container"> 
       <h2>Available for iPhone and Android.</h2> 
       <img src="http://s3.amazonaws.com/codecade-content/projects/shutterbugg/app-store.png" width="120px" /> 
       <img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" /> 
      </div> 
      </div>  
      <!-- Modules --> 
    <script src="js/app.js"></script> 

     <!-- Controllers --> 
     <script src="js/controllers/mainController.js"></script> 

</body> 
</html>

ANGULARJS/JAVASCRIPTコード：

- App.js

var app = angular.module("myApp", []);

-mainController.js

app.controller('mainController', ['$scope', function($scope) { 
    $scope.like = 0; 
    $scope.plusOne = function(index) { 
     $scope.like[index].likes += 1; 
    }; 
    }]);

出典

2017-10-01 Nikko Tongoy

コンソールにエラーが発生していますか？ – Baruch

私は

アプリケーションでAngularJSを含めていません。あなたはそれをインストールすると言うことができますが、私はそれをお勧めしますが、まだそれを参照する必要があります。ここに元のコードは、上部にAngularJSを含むスタックスニペットで実行されます。

(function() { 
 
    "use strict"; 
 
    window.app = angular.module("myApp", []); 
 
}()); 
 

 
(function() { 
 
    "use strict"; 
 
    
 
    app.controller('mainController', ['$scope', function($scope) { 
 
    $scope.like = 0; 
 
    $scope.plusOne = function(index) { 
 
     $scope.like[index].likes += 1; 
 
    }; 
 
    }]); 
 
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <header> 
 
    <h1 class="mainHead"><span id="insColor">Instant</span>Gram</h1> 
 
    </header> 
 

 
    <div class="main" ng-controller="mainController"> 
 
    <div> 
 
     <h2 class="sunset">The Unusual Sunset</h2> 
 
     <img src="The_sunset.jpg" alt="Unloaded Image" width="477px" height="268px" /> 
 
     <div class="rating"> 
 
     <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }} </p> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
     <h2>The Metropolis Before 1927</h2> 
 
     <img src="metropolis_before.jpg" alt="Unloaded Image" /> 
 
     <div class="rating"> 
 
     <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }} </p> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
     <h2>The Paradise</h2> 
 
     <img src="lake.jpg" alt="unloaded image" width="477px" height="268px"> 
 
     <div class="rating"> 
 
     <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }} </p> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div class="footer"> 
 
     <div class="container"> 
 
     <h2>Available for iPhone and Android.</h2> 
 
     <img src="http://s3.amazonaws.com/codecade-content/projects/shutterbugg/app-store.png" width="120px" /> 
 
     <img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" /> 
 
     </div> 
 
    </div> 
 

 
    <!-- Modules --> 
 
    <script src="js/app.js"></script>

注私は上記のデモの目的のために一つにスクリプトモジュールとコントローラスクリプトを崩壊が、ポイントは、あなたがAngularJSをロードする必要があるということですか、あなたが依存する他のスクリプト、それを使用する前に。

出典

2017-10-01 14:05:28

バージョンを選択し、https://angularjs.orgからjsファイルをダウンロードして、headタグの下に追加します。ここでの主な問題は、スクリプトを

の下に置く必要があります。

<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<link rel = "stylesheet" href = "css/style.css"> 
<title>InstantGram | Posts</title> 
<link rel="icon" type="image/gif/png" href="icon.png"> 
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers/mainController.js"></script> 
</head>

出典

2017-10-01 14:10:54

私のangularJSがサンプルウェブで動作しないのはなぜですか？

関連する問題