AngularJS: A Walk-Through - Week 2

Sample web application from week 2 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">
<header>
    <h1 class="text-center">Flatlander Crafted Gems</h1>
    <h2 class="text-center">– an Angular store –</h2>
</header>
<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 class='gallery' ng-show="product.images.length" ng-controller="GalleryController as gallery">
        <img ng-src="{{product.images[gallery.current]}}" />
        <ul class="list-inline thumbs">
            <li class="thumbnail" ng-repeat="image in product.images">
                <img ng-src="{{image}}" />
            </li>
        </ul>
    </div>
    <section class="tab" ng-controller="TabController as tab">
        <ul class="nav nav-pills">
            <li ng-class="{active: tab.isSet(1)}">
                <a href ng-click="tab.setTab(1)">Description</a></li>
            <li ng-class="{active: tab.isSet(2)}">
                <a href ng-click="tab.setTab(2)">Specs</a></li>
            <li ng-class="{active: tab.isSet(3)}">
                <a href ng-click="tab.setTab(3)">Reviews</a></li>
        </ul>
        <div ng-show="tab.isSet(1)">
            <h4>Description</h4>
            <blockquote>{{product.description}}</blockquote>
        </div>
        <div ng-show="tab.isSet(2)">
            <h4>Specs</h4>
            <blockquote>Shine: {{product.shine}}</blockquote>
        </div>
        <div ng-show="tab.isSet(3)">
            <h4>Reviews</h4>
            <blockquote></blockquote>
        </div>
    </section>
</div>

JavaScript

(function() {
    var app = angular.module('gemStore', []);
    
    app.controller('StoreController', function(){
        this.products = gems; 
    });
    
    app.controller('TabController', function() {
        this.tab = 1;
        this.setTab = function(tab) {
            this.tab = tab;
        };
        this.isSet = function(tab) {
            return this.tab === tab;
        };
    });
    
    app.controller('GalleryController', function() {
        this.current = 0;
        this.setCurrent = function(current) {
            if (current) {
                this.current = current;
            } else {
                this.current = 0;
            }
        };
    });

    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: [{
          stars: 5,
          body: "I love this gem!",
          author: "[email protected]",
          createdOn: 1397490980837
        }, {
          stars: 1,
          body: "This gem sucks.",
          author: "[email protected]",
          createdOn: 1397490980837
        }]
      },
      {
        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: [
         ...