AngularJS: A Walk-Through - Week 4

Sample web application from week 4 of the course AngularJS: A Walk-Through. <http://angularjs-walk.blogspot.com/>

by John Tucker

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<link rel="stylesheet" href="//dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/bootstrap.min.css">
<!--  Store Header  -->
<header>
    <h1 class="text-center">Flatlander Crafted Gems</h1>
    <h2 class="text-center">– an Angular store –</h2>
</header>

<!--  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  -->
        <product-gallery></product-gallery>
        
        <!-- Product Tabs  -->
        <product-tabs></product-tabs>
    </div>
</div>

<script type="text/ng-template" id="product-description.html">
    <!--  Description Tab's Content  -->
    <div ng-show="tab.isSet(1)">
        <h4>Description</h4>
        <blockquote>{{product.description}}</blockquote>
    </div>
</script>

<script type="text/ng-template" id="product-specs.html">
    <!--  Spec Tab's Content  -->
    <h4>Specs</h4>
    <ul class="list-unstyled">
      <li>
        <strong>Shine</strong>
        : {{product.shine}}</li>
      <li>
        <strong>Faces</strong>
        : {{product.faces}}</li>
      <li>
        <strong>Rarity</strong>
        : {{product.rarity}}</li>
      <li>
        <strong>Color</strong>
        : {{product.color}}</li>
    </ul>
</script>

<script type="text/ng-template" id="product-reviews.html">
    <!--  Product Reviews List -->
    <ul>
        <h4>Reviews</h4>
        <li ng-repeat="review in product.reviews">
            <blockquote>
                <strong>{{review.stars}} Stars</strong>
                {{review.body}}
                <cite class="clearfix">—{{review.author}}</cite>
            </blockquote>
        </li>
    </ul>
    
    <!--  Review Form -->
    <form name="reviewForm"...

CSS

.ng-invalid.ng-dirty {
  border-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
}

JavaScript

// app.js
(function() {
    var app = angular.module('gemStore', ['store-directives']);
    
    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: [
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-02.gif",
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-05.gif",
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-09.gif"
        ],
        reviews: []
    }, {
        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: [
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-01.gif",
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-03.gif",
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-04.gif",
        ],
            reviews: []
    }, {
        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: [
            "http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/images/gem-06.gif",
           ...