Implementing the Shipping View

When the user clicks the Checkout button in the shopping cart, the shipping view appears, allowing the user to enter shipping information. The shipping view, shown in Listing 28.16, provides a series of input fields to input the shipping information.

The shipping template code is very straightforward. There are a series of text inputs with labels for each shipping field value. The fields are linked to the customer.shipping[0] object in the scope model, using the ng-model directive. When the user changes the field, the scope changes automatically. This is very useful when sending customer changes back to the database. When the user clicks the Continue to Billing button, the shipping data is updated on the server as well, and the user is taken to the billing view. Figure 28.5 shows the rendered shipping view.

Listing 28.16 shipping.html: Implementing the partial shipping template

Click here to view code image

01 <div id="shippingContainer">
02   <h2>Ship To:</h2>
03   <label>Name</label>
04   <input type="text" ng-model="customer.shipping[0].name" /><br>
05   <label>Address</label>
06   <input type="text" ng-model="customer.shipping[0].address" /><br>
07   <label>City</label>
08   <input type="text" ng-model="customer.shipping[0].city" /><br>
09   <label>State</label>
10   <input type="text" ng-model="customer.shipping[0].state" /><br>
11   <label>Zipcode</label>
12   <input type="text" ng-model="customer.shipping[0].zip" />
13   <hr>
14   <div>
15     <span class="button" ng-click="setShipping()">
16       Continue to Billing
17     </span>
18     <span class="button" ng-click="setContent('products.html')">
19       Continue Shopping
20     </span>
21   </div>
22 </div>

Figure 28.5 The shipping view allows the user to enter the address to ship the prints to.