如何調試AngularJS代碼？

我正在學習AngularJS。如何調試AngularJS代碼？

我創建的頁面index.html（代碼見下文），這是爲了顯示store模塊（下面文件app.js）中定義的變量product的數據。它運行良好，直到我添加了評論部分。此後，佔位符替換停止工作（而不是{{product.name}}，應顯示實際產品名稱）。

Screenshot

但我無法弄清楚，究竟什麼是錯了。

如何調試此代碼（找出原因，爲什麼突然間沒有數據顯示）？

app.js

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

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

    app.controller('PanelController', function(){ 
     this.tab = 1; 
     this.selectTab = function(setTab) { 
      this.tab = setTab; 
     }; 
     this.isSelected = function(checkTab) { 
      return this.tab === checkTab; 
     } 
    }); 

    var gems = [ 
     { 
      name: "Dodecahedron", 
      price: 2, 
      description: 'Some description', 
      canPurchase: true, 
      images : [ 
       { 
        full: 'img01.jpg', 
        thumb: 'img01.jpg' 
       }, 
       { 
        full: 'img02.jpg', 
        thumb: 'img02.jpg' 
       }, 
       { 
        full: 'img03.jpg', 
        thumb: 'img03.jpg' 
       }, 
      ], 
      reviews = [ 
       { 
        stars: 5, 
        body: "I love this product!", 
        author: "[email protected]" 
       }, 
       { 
        stars: 1, 
        body: "I hate this product!", 
        author: "[email protected]" 
       }, 
      ] 
     }, 
     { 
      name: "Pentagonal Gem", 
      price: 5.95, 
      description: 'Some description 2', 
      canPurchase: false, 
      images : [ 
       { 
        full: 'img04.jpg', 
        thumb: 'img04.jpg' 
       }, 
       { 
        full: 'img05.jpg', 
        thumb: 'img05.jpg' 
       }, 
       { 
        full: 'img06.jpg', 
        thumb: 'img06.jpg' 
       }, 
      ]   
     } 
    ] 
})();

的index.html

<!DOCTYPE html> 
<html ng-app="store"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
    </head> 
    <body ng-controller="StoreController as store"> 
     <script type="text/javascript" src="js/angular.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script>   
     <div ng-repeat="product in store.products"> 
      <h1>{{product.name}}</h1> 
      <section ng-init="tab = 1" ng-controller="PanelController as panel"> 
       <ul class="nav nav-pills"> 
        <li ng-class="{ active:panel.isSelected(1) }"> 
         <a href ng-click="panel.selectTab(1)">Description</a> 
        </li> 
        <li ng-class="{ active:panel.isSelected(2) }"> 
         <a href ng-click="panel.selectTab(2)">Specifications</a> 
        </li> 
        <li ng-class="{ active:panel.isSelected(3) }"> 
         <a href ng-click="panel.selectTab(3)">Reviews</a> 
        </li> 
       </ul> 
       <div class="panel" ng-show="panel.isSelected(1)"> 
        <h4>Description</h4> 
        <p>{{product.description}}</p> 
       </div> 
       <div class="panel" ng-show="panel.isSelected(2)"> 
        <h4>Specifications</h4> 
        <blockquote>None yet</blockquote> 
       </div> 
       <div class="panel" ng-show="panel.isSelected(3)"> 
        <h4>Reviews</h4> 
        <blockquote ng-repeat="review in product.reviews"> 
         <b>Stars: {{review.stars}}</b> 
         {{review.body}} 
         <cite>by: {{review.author}}</cite> 
        None yet 
        </blockquote> 
       </div> 
      </section> 
      <h2>{{product.price | currency}}</h2> 
      <img ng-src="img/{{product.images[0].full}}"/> 
      <button ng-show="product.canPurchase">Add to cart</button> 
     </div> 
    </body> 
</html>

來源

2014-12-07 DP_

使用瀏覽器的js控制檯... – 2014-12-07 18:36:38

'' – 2014-12-07 18:39:57

@BarthZalewski在控制檯中沒有有用的消息。 – 2014-12-07 18:43:23

大多數錯誤的去瀏覽器控制檯。還有一些自定義錯誤移交幾種技術，here是一個很好的文章。療法e也是other之一，它描述了幾個其他代碼守衛的常見Angular陷阱。

在您的特定案例定義reviews = [是不正確的。

來源

2014-12-07 18:46:19 udalmik

有時候，我有這個「問題」也與我的AngularJS應用程序，即使我已經寫了太多的東西，然後突然它看起來像你當前的結果... :-)

從現在開始它幾乎每次都是發佈「;」在一行的末尾，或者在某處丟失「{」或「}」括號....在你的情況下，我會看看類似的東西，然後我改變其他任何東西...

修改發現Bug

它就像我說的...你的Bug是在你的寶石JSONArray ....我已經取代所有的「與」和所有=與：....之後，你的應用程序回來生活我

var gems = [ 
     { 
      name: "Dodecahedron", 
      price: 2, 
      description: "Some description", 
      canPurchase: true, 
      images : [ 
       { 
        full: "img01.jpg", 
        thumb: "img01.jpg" 
       }, 
       { 
        full: "img02.jpg", 
        thumb: "img02.jpg" 
       }, 
       { 
        full: "img03.jpg", 
        thumb: "img03.jpg" 
       }, 
      ], 
      reviews : [ 
       { 
        stars: 5, 
        body: "I love this product!", 
        author: "[email protected]" 
       }, 
       { 
        stars: 1, 
        body: "I hate this product!", 
        author: "[email protected]" 
       }, 
      ] 
     }, 
     { 
      name: "Pentagonal Gem", 
      price: 5.95, 
      description: "Some description 2", 
      canPurchase: false, 
      images : [ 
       { 
        full: "img04.jpg", 
        thumb: "img04.jpg" 
       }, 
       { 
        full: "img05.jpg", 
        thumb: "img05.jpg" 
       }, 
       { 
        full: "img06.jpg", 
        thumb: "img06.jpg" 
       }, 
      ]   
     } 
    ]

來源

2014-12-07 18:42:33

這次是「評論= [」等號那就造成了這個bug ......只需將它替換爲「reviews：[」，你的應用即可運行 – 2014-12-07 18:58:40

如何調試AngularJS代碼？

回答

相關問題