The shopping view shown in Listing 28.12 is the main view for the shopping application. In fact, the user never actually leaves this page; rather, the content changes, based on the partial views described in the following sections.
The header of the view registers the <html ng-app="myApp">
element with the AngularJS myApp
application and loads the cart_styles.css
file. The <body>
element initializes the AngularJS ng-controller="shoppingController"
to provide the functionality to interact with the products, shopping cart, checkout, and orders.
The page content changes using the following ng-include
directive that maps to $scope.content
, and the content
variable in the scope can be set to any template file on the server:
<div ng-include="content"></div>
For an example, see the orders and shopping cart clickable links, shown below, which call setContent()
with the name of the template file to load:
<span class="orders"
ng-click="setContent('orders.html')">Orders</span>
<span id="cartLink" ng-click="setContent('cart.html')">
{{customer.cart.length}} items
<img src="/images/cart.png" />
</span>
Also notice that the number of items in the cart is taken directly from the scope variable customer.cart.length
. The Customer
object in the scope is downloaded directly from the webserver when the controller is initialized. Figure 28.1 shows the fully rendered shopping.html
page.
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>Shopping Cart</title>
05 <link rel="stylesheet" type="text/css"
06 href="/static/css/cart_styles.css" />
07 </head>
08 <body>
09 <div ng-controller="shoppingController">
10 <div id="banner">
11 <div id="title">My Store</div>
12 <div id="bar">
13 <span class="orders"
14 ng-click="setContent('orders.html')">Orders</span>
15 <span id="cartLink" ng-click="setContent('cart.html')">
16 {{customer.cart.length}} items
17 <img src="/images/cart.png" />
18 </span>
19 </div>
20 </div>
21 <div id="main">
22 <div ng-include="content"></div>
23 </div>
24 </div>
25 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
26 <script src="/static/js/cart_app.js"></script>
27 </body>
28 </html>