2017-02-14 13 views
-1

私はangularjsの初心者ですので、私はgoogleのチュートリアルに行くことにしました。誰でもできますangularjs Googleチュートリアルは私のために働いていません

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) 

を:私はstackoverflowの中で解決策を探し、そして人々のほとんどは私のNG-アプリで「gemStore」を脱いで言ったが、私はあまりにもことをしようと、それは同様に動作しませんでした助けて?感謝! ありがとう!

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

まず第一の完全なコンテンツを提供してください。第二に、index.htmlファイルが 'http:// localhost:8080/index.html'からロードされていると仮定すると、' http:// localhost:8080/app.js'に行くとどうなりますか?あなたがあなたのコンソールを開くと、何かエラーがありますか?開発ツールの[ネットワーク]タブに行くと、HTTPリクエストにエラーコード(404など)が表示されますか? –

答えて

1

括弧に問題はありません。

あなたのコードは正常に機能していますが、今はChromeとFirefoxでテストしましたが、一重引用符を使用しないでください。 二重引用符は標準であると見なされますが、一重引用符はそうではありません。 http://www.json.org/

使用しているブラウザ/バージョンのような詳細情報を提供できますか?

クロムの拡張子を使わずにプライベートモードでChromeタブを開き、まだ失敗するかどうかを確認します。

編集:app.jsファイルに上記のコードのみが含まれていることを確認してください。

ない場合は、より読みやすいエラーメッセージ、使用angular.js、ないangular.min.jsを持って、app.js

+0

omgをプライベートモードで動作させます!ダミーの質問を申し訳ありませんが、プライベートではなぜですか?多くの感謝!!!! –

+0

拡張機能がスクリプトをブロックしている可能性があります。それらを1つずつ無効にして、あなたは有罪な人を見つけます;) –

+0

私は自分自身でそれを理解することはありません。もう一度ありがとう! –

2

あなたは、正しくparanthesisを閉じALOS 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>

+0

あなたのコードはすべてコピーしましたが、同じエラーが表示されます:/ –

+0

@CatarinaNogueira何がうまくいかないのですか?https://plnkr.co/edit/fHW7ojki3srt1xQtLeYc?p =プレビューをダウンロードして – Sajeetharan

関連する問題