Implementing the Product Page View

When the user clicks an image in the products list, the product page view is rendered. Listing 28.14 shows the AngularJS code used for the product page view. Notice that the product information is displayed using AngularJS expressions that access the $scope.product value. The Add to Cart button sends product._id to the addToCart() function in the controller, which adds the print to the cart. Figure 28.3 shows the rendered product page view, which shows the image, name, description, quantity, and price, as well as the Add to Cart button.

Listing 28.14 product.html: Implementing the partial product details template with an Add to Cart button

Click here to view code image

01 <div id="productContainer">
02    <img class="fullImg"
03         ng-src="../images/{{product.imagefile}}" />
04    <div class="prodInfo">
05        <p class="itemTitle">{{product.name}}</p>
06      <p class="prodDesc">{{product.description}}</p>
07      <p class="fullPrice">{{product.price|currency}}</p>
08        <p class="status">{{product.instock}} available</p>
09        <p class="cartButton" ng-click="addToCart(product._id)">
10          Add to Cart
11          <img src="/images/cart.png" />
12        </p>
13    </div>
14 </div>

Figure 28.3 The product page view, showing the description, availability, and the Add to Cart button.