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
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.
18.117.154.89