Question

我尝试学习AngularJs并做一些代码但是当我在浏览器（Chrome / IE）上运行它时，javavscript代码不起作用。＆＃34; {{product.like}}＆＃34;代码的东西不起作用。我必须安装什么或依赖项或什么？我感谢所有的帮助和答案。抱歉我的ENG。：）

HTML CODE：

(array([ **247, 248**, 249,  250,  251,  252,  253,  254, **255, 256**, **802, 803**, 804,  805,  806,  807,  808, 809, **810, 811** etc....]),)

ANGULARJS / JAVASCRIPT CODES：

- App.js

<!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>

-mainController.js

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

Answer 1

您的应用程序中未包含AngularJS。您可以，正如您所说，安装它，我会建议，但您仍然需要参考它。以下是您在堆栈片段中运行的原始代码，其中包含顶部的AngularJS。

＆＃13;

(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;
    };
  }]);
}());

＆＃13;

<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>

＆＃13;

注意为了上述演示的目的，我将脚本模块和控制器脚本合并为一个，但重点是您需要在使用之前加载AngularJS或您依赖的任何其他脚本。

Answer 2

尝试在标记中添加此行。

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

来源：https://docs.angularjs.org/misc/downloading

Answer 3

选择版本并从https://app.snapp.ir/?utm_source=Website&utm_medium=homepage下载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="angular.js@1.4.x" 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>

为什么我的angularJS不能在我的示例网上工作？

3 个答案: