AngularJS Workshop Templates - April 16th, 2016

add-item.html

<h3>Add A Product</h3>
<hr>
<form ng-submit="addProduct(product)">
  <div class="form-group">
    <input type="text" class="form-control" ng-model="product.name" placeholder="Product Name">
  </div>
  <div class="form-group">
    <input type="text" class="form-control" ng-model="product.image" placeholder="ex: images/01.jpg">
  </div>
  <div class="input-group">
    <div class="input-group-addon">$</div>
    <input type="text" class="form-control" placeholder="Price" ng-model="product.price">
    <div class="input-group-addon">.00</div>
  </div>
  <br>
  <button type="submit" class="btn btn-primary">Add Product</button>
</form>
<br>
<div class="alert alert-success" ng-show="message">{{ message }}</div>

shopping-cart.html

<h3>Your Cart</h3>
<hr>
<table class="table table-striped">
  <tr>
    <th>Product Name</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr ng-hide="cartItems.length">
    <td colspan="3">Please add something to your cart first!</td>
  </tr>
  <tr ng-repeat="item in cartItems" ng-show="cartItems.length">
    <td>{{ item.name }}</td>
    <td>{{ item.qty }}</td>
    <td>${{ item.price }}</td>
  </tr>
  <tr class="success">
    <td colspan="2">Cart Subtotal:</td>
    <td>${{ totalPrice }}</td>
  </tr>
</table>

store.html

<div class="cart">
  <span class="alert alert-success" ng-show="cartMessage">{{ cartMessage }}</span>
  <i class="glyphicon glyphicon-shopping-cart"></i>
  <a href="/#/cart">Cart Items (0)</a>
</div>
<header class="jumbotron hero-spacer">
  <p>Welcome to my online marketplace!</p>
</header>

<hr>
<div class="row text-center">
  <div class="col-md-3 col-sm-6 hero-feature" ng-repeat="product in products">
    <div class="thumbnail">
      <img ng-src="{{ product.image }}" alt="{{ product.name }}">
      <div class="caption">
        <h3>{{ product.name }}</h3>
        <p><a href="#" ng-click="addCart(product)" class="btn btn-primary">Buy for ${{ product.price }}</a></p>
      </div>
    </div>
  </div>
</div>