How to debug AngularJS code?

Question

I'm learning AngularJS.

I created a page index.html (code see below), which is supposed to display data of the product variable defined in the store module (file app.js below). It worked fine, until I added the Reviews section. Thereafter, placeholder substitution stopped to work (instead of {{product.name}}, the actual product name should be displayed).

Screenshot

But I can't figure out, what exactly is wrong now.

How can I debug this code (find out the reason, why all of a sudden no data are displayed) ?

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>

@DmitriPisarenko I always get error messages from Angular. They are not always ease to read, but still... better this than nothing. — Liglo App
– Liglo App, Commented Dec 7, 2014 at 18:46
If you don't get ANY kind of error at all, it means the library is not included correctly, otherwise you should get something in the console. — pasine
– pasine, Commented Dec 7, 2014 at 18:49

New Dev · Accepted Answer · 2014-12-07 23:30:20Z

2

Most of errors go to browser console. Also there are several techniques for custom errors handing, here is a good article. There is also other one, which describes several other code guards for common Angular pitfalls.

In your particular case definition of reviews = [ is not correct.

edited Dec 7, 2014 at 23:30

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

answered Dec 7, 2014 at 18:46

udalmik

8,02829 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dennis Weidmann · Accepted Answer · 2014-12-07 18:55:26Z

Sometimes I have this "problem" too with my AngularJS Apps, even when I have written much stuff, then suddenly it looks like your current result... :-)

Since now it was almost every time a missing ";" on end of a line, or a missing "{" or "}" brackets somewhere.... In your case I would take a look on something like this, before I change anything else...

Edit Found the Bug

Its like I said... Your Bug is inside your gems JSONArray.... I have replaced all ' with " and all = with :.... after that your app was back to live for me

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"
                },
            ]           
        }
    ]

This time it was the "reviews = [" equal sign that created the bug... just replace it with an "reviews : [" and your app will run

Collectives™ on Stack Overflow

How to debug AngularJS code?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related