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