angularjs Angular.js Google教程不适合我

hsgswve4 于 2023-10-15 发布在 Angular

关注(0)|答案(2)|浏览(84)

我是Angular.js的初学者，所以我决定尝试Google教程，我只是不明白为什么这个错误总是发生。我在Stack Overflow中搜索解决方案，大多数人都说要在我的ng-app中删除“gemStore”，但我也试过了，它也不起作用：

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代码：

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

angularjs

来源：https://stackoverflow.com/questions/42226428/angular-js-google-tutorial-not-working-for-me

2条答案

按热度按时间

o7jaxewo1#

你没有正确地关闭括号，alos分配这个。gems = gems;在底部

演示

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

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

赞(0）回复(0）举报 2023-10-15

c8ib6hqw2#

括号没有问题。
你的代码刚刚工作，我刚刚在Chrome和Firefox中测试了它，但你应该避免使用单引号。双引号被认为是标准的，而单引号不是。http://www.json.org/
你能提供更多的信息，比如你使用的浏览器/版本吗？
在私人模式下打开一个没有任何Chrome扩展程序的Chrome标签页，检查它是否仍然失败。
编辑：你确定app.js文件只包含上面提到的代码吗？
如果没有，请提供app.js的完整内容

赞(0）回复(0）举报 2023-10-15

我来回答

angularjs Angular.js Google教程不适合我

2条答案

相关问题

热门标签

最新问答