CHApTer 5 ■ DIreCTIveSListing 5-1 shows product-detail.html. This is the HTML and CSS code for a product selection page. We will
focus our efforts on an exciting new fictitious product: the AngularJS socks. These amazing socks, created specifically
to warm the feet of AngularJS developers, come in a variety of colors. The requirement here is to hide the list of
available colors until the customer is ready to choose one. The directives we will use to achieve all of this are ngClick,
ngHide, and ngController.
■ Note It is an established convention in the Angular world to refer to directives using CamelCase when writing about
them. For example, we would write ngController, as I do in the preceding paragraph. This can be a little confusing,
because to use a directive in code, you must use the dash-delimited form of its name. For example, we would code the
aforementioned directive as ng-controller. You will see this convention in practice when you view the official Angular
documentation or read other books on the topic.
The bulk of this code is the CSS, which, for the most part, sets up the colors for the associated div elements. You
will see that, due to the ng-hide="isHidden" directive placed on each of these div elements, the page defaults to a
state in which the color list is hidden.
Listing 5-1. product-detail.html, a Basic Product Detail Page
<!DOCTYPE html >