To prepare for this chapter, I deleted the contents of the angularjs web server folder and installed the angular.js, bootstrap.css, and bootstrap-theme.css files, as described in Chapter 1. I then created a file called directives. html, which you can see in Listing 15-1.
Listing 15-1. The Contents of the directives.html File
<html ng-app=”exampleApp”>
<head>
<title>Directives</title>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“exampleApp”, [])
.controller(“defaultCtrl”, function ($scope) {
$scope.products = [
{ name: “Apples”, category: “Fruit”, price: 1.20, expiry: 10 },
{ name: “Bananas”, category: “Fruit”, price: 2.42, expiry: 7 },
{ name: “Pears”, category: “Fruit”, price: 2.02, expiry: 6 }
];
});
</script>
</head>
<body ng-controller=”defaultCtrl”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3>Products</h3>
</div>
<div class=”panel-body”>
Content will go here
</div>
</div>
</body>
</html>
This document defines an AngularJS application with a single controller called defaultCtrl. The controller sets up a products array on the scope that contains a subset of the data I used to demonstrate filters in Chapter 14. You can see how the browser displays this file in Figure 15-1.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.