如何调试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代码？

回答

相关问题