AngularJS: A Walk-Through - Week 5

Sample web application from week 5 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">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.js"></script>
<div ng-view></div>

<script type="text/ng-template" id="about.html">
    <h2>About this store</h2>
    <p><a href="#/">Back</a></p>
</script>

<script type="text/ng-template" id="store.html">
    <!--  Store Header  -->
    <header>
        <h1 class="text-center">Flatlander Crafted Gems</h1>
        <h2 class="text-center">– an Angular store –</h2>
        <p class="text-center"><a href="#/about">About</a></p>
    </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>

<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">
    <!-- ...

CSS

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

JavaScript

// app.js
(function() {
    var app = angular.module('gemStore', ['ngRoute', 'store-directives', 'store-services']);
    app.controller('StoreController', ['gems', function(gems){
        this.products = gems;
    }]);
    app.controller('AboutController', function(){
    });
    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'store.html',
            controller: 'StoreController'
        }).
        when('/about', {
            templateUrl: 'about.html',
            controller: 'AboutController'
        }).
        otherwise({
            redirectTo: '/'
        });
    }]);  
})();
    
// products.js
(function() {
var app = angular.module('store-directives', []);
    app.directive("productDescription", function() {
        return {
            restrict: 'E',
            templateUrl: "product-description.html"
        };
    });
    
    app.directive("productReviews", function() {
        return {
            restrict: 'E',
            templateUrl: "product-reviews.html",
            controller: function() {
                this.review = {};
                this.addReview = function(product) {
                    product.reviews.push(this.review);
                    this.review = {};
                }
            },
            controllerAs: "reviewCtrl"
        };
    });
    
    app.directive("productSpecs", function() {
        return {
            restrict:"A",
            templateUrl: "product-specs.html"
        };
    });
    
    app.directive("productTabs", function() {
        return {
            restrict: "E",
            templateUrl: "product-tabs.html",
            controller: function() {
                this.tab = 1;
                
                this.isSet = function(checkTab) {
                    return this.tab === checkTab;
                };
                
                this.setTab = function(activeTab) {
                    this.tab = activeTab;
     ...