Question

我是angularjs的初学者，所以我决定使用谷歌教程，我只是不明白为什么这个错误不断发生;我在stackoverflow中搜索了解决方案，并且大多数人都说要取消＆＃34; gemStore＆＃34;在我的ng-app中，但是我也尝试了它，但它也不起作用：

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=gemStore&p1=Error%3…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)
    at angular.js:38
    at angular.js:4759
    at q (angular.js:357)
    at g (angular.js:4720)
    at eb (angular.js:4642)
    at c (angular.js:1838)
    at Mc (angular.js:1859)
    at pe (angular.js:1744)
    at angular.js:32977
    at HTMLDocument.b (angular.js:3314)

有人可以帮忙吗？谢谢！

js code：

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

  app.controller('StoreController', function() {
    this.products = gems;
  });

  var gems = [{
    name: 'Azurite',
    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
    shine: 8,
    price: 110.50,
    rarity: 7,
    color: '#CCC',
    faces: 14,
    images: [ ]
  }, {
    name: 'Bloodstone',
    description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
    shine: 9,
    price: 22.90,
    rarity: 6,
    color: '#EEE',
    faces: 12,
    images: [
      "images/gem-01.gif",
      "images/gem-03.gif",
      "images/gem-04.gif"
    ]
  }, {
    name: 'Zircon',
    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
    shine: 70,
    price: 1100,
    rarity: 2,
    color: '#000',
    faces: 6,
    images: [
      "images/gem-06.gif",
      "images/gem-07.gif",
      "images/gem-09.gif"
    ]
  }];
})();

index.html代码：

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
>
  </head>
  <body ng-controller="StoreController as store">
    <!--  Products Container  -->
    <div class="list-group">
      <!--  Product Container  -->
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>
          {{product.name}}
          <em class="pull-right">{{product.price | currency}}</em>
        </h3>

        <!-- Image Gallery  -->
        <div ng-show="product.images.length" class="gallery">
          <img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[0]}}" />
          <ul class="clearfix">
            <li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

你没有正确关闭paranthesis，alos assign this.gems = gems;在底部。

<强>样本

＆＃13;

 (function() {
   var app = angular.module('gemStore', []);

   app.controller('StoreController', function() {
     var gems = [{
       name: 'Azurite',
       description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
       shine: 8,
       price: 110.50,
       rarity: 7,
       color: '#CCC',
       faces: 14,
       images: []
     }, {
       name: 'Bloodstone',
       description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
       shine: 9,
       price: 22.90,
       rarity: 6,
       color: '#EEE',
       faces: 12,
       images: [
         "images/gem-01.gif",
         "images/gem-03.gif",
         "images/gem-04.gif"
       ]
     }, {
       name: 'Zircon',
       description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
       shine: 70,
       price: 1100,
       rarity: 2,
       color: '#000',
       faces: 6,
       images: [
         "images/gem-06.gif",
         "images/gem-07.gif",
         "images/gem-09.gif"
       ]
     }];
     
     this.products = gems;
   });
 
 })();

＆＃13;

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>  
 
  </head>
  <body ng-controller="StoreController as store">
    <!--  Products Container  -->
    <div class="list-group">
      <!--  Product Container  -->
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>
          {{product.name}}
          <em class="pull-right">{{product.price | currency}}</em>
        </h3>

        <!-- Image Gallery  -->
        <div ng-show="product.images.length" class="gallery">
          <img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[0]}}" />
          <ul class="clearfix">
            <li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 2

括号没有问题。

您的代码正常运行，我刚刚在Chrome和Firefox中对其进行了测试，但您应避免使用单引号。双引号被认为是标准，而单引号则不是。 unwrap

您能否提供更多信息，例如您正在使用的浏览器/版本？

在私人模式下打开Chrome标签页，不带任何Chrome扩展程序，并检查它是否仍然失败。

编辑：你确定app.js文件只包含上面提到的代码吗？

如果没有，请提供app.js的全部内容

angularjs谷歌教程不适合我

2 个答案: