Beginning AngularJS

CHApTer 5 ■ DIreCTIveS

The interesting thing about this implementation is how the logic is assembled. It’s intuitive, and it doesn’t leave a
trail of messy JavaScript code in its wake. In fact, the product-detail.html file is primarily HTML and CSS code.
Ofcourse, there must be some JavaScript code somewhere. I’m hoping that, with last chapter’s coverage of modules
in mind (and the ng-app="myAppModule" directive on the second line), you already know where this JavaScript is. It is
tucked away in a module file. Let’s have a look at this module now (see Listing 5-2).

Listing 5-2. The myAppModule.js Application Module

// Create the module
angular.module('myAppModule', []);

// configure the module with a controller
angular.module('myAppModule').controller('myProductDetailCtrl', function ($scope) {

// Hide colors by default
$scope.isHidden = true;

Figure 5-2. The Show Available Colors view of product-detail.html

As available space on today’s screens can be quite limited, it is incredibly useful to be able to hide information
and to make it available on demand. Figure 5-2 shows how it looks when the Show Available Colors button is clicked.