Implementing the Products View

Next, you implement the products view to provide the user with a list of products to choose from. In this example, the shopping page is very basic: only a single page with a list of prints to buy. Although it is basic, it is enough to demonstrate the implementation of the shopping cart and keeps the code simple.

Listing 28.13 is an AngularJS partial that is loaded into the view when $scope.content is set to products.html. The code uses ng-repeat on the products that are initialized when shoppingController is initialized. Notice that the product information is displayed on the page by using expressions such as {{product.name}}.

Also notice that when the user clicks the <img> element, the setProduct() function is called in the controller. That function sets the current $scope.product value and changes the $scope.content value to product.html. Figure 28.2 shows the rendered products view.

Listing 28.13 products.html: Implementing the partial product listing template

Click here to view code image

01 <div id="productsContainer">
02   <div class="listItem" ng-repeat="product in products">
03     <img class="listImg" ng-click="setProduct(product._id)"
04          ng-src="../images/{{product.imagefile}}" />
05     <span class="prodName">{{product.name}}</span>
06     <span class="price">{{product.price|currency}}</span>
07   </div>
08 </div>

Figure 28.2 The products view, showing the prints available.