angularjs谷歌教程不为我工作

-1

我是一个初学者在angularjs，所以我决定做去与谷歌教程，我只是不明白为什么这个错误继续发生;我搜索了在计算器的解决方案，而大部分的人说要起飞了“gemStore”在我的NG-的应用程序，但我想这也和它没有工作，以及：angularjs谷歌教程不为我工作

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>

来源

2017-02-14 Catarina Nogueira

首先的全部内容，有一个更可读的错误信息，使用angular.js，不angular.min.js。其次，假设你的index.html文件是从'http：// localhost：8080/index.html'加载的，当你进入'http：// localhost：8080/app.js'时会发生什么？当你打开你的控制台时，你是否有任何错误？当进入开发工具的网络选项卡时，您是否看到任何带有错误代码（如404）的HTTP请求？ –

没有与括号没有问题。

您的代码正常工作，我刚才在Chrome和Firefox中测试过，但您应该避免使用单引号。双引号被认为是标准的，而单引号不是。 http://www.json.org/

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

在没有任何铬扩展名的私人模式下打开Chrome标签，并检查它是否仍然失败。

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

如果没有，请提供app.js

来源

2017-02-14 13:04:48

omg，在私人模式下工作！对不起虚假的问题，但为什么在私人作品？并且非常感谢！ –

也许一个扩展阻止了脚本。一个接一个地关闭他们，你会发现有罪的人;） –

我永远不会自己弄明白哈哈哈。再次感谢！ –

您还没有关闭paranthesis正确，阿洛斯分配this.gems =宝石;在底部。

DEMO

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

来源

2017-02-14 12:43:45 Sajeetharan

我已经复制了所有的代码，但仍然是相同的错误：/ –

@CatarinaNogueira whats not working？https：//plnkr.co/edit/fHW7ojki3srt1xQtLeYc？p =预览下载此并运行 – Sajeetharan

angularjs谷歌教程不为我工作

回答

相关问题