I am going to return to a simple project structure for the examples in this part of the book. Remove the contents of the angularjs folder and add the angular.js, bootstrap.css, and bootstrap-theme.css files as described in Chapter 1. Create an HTML file called example.html and set the content to match Listing 9-1.
Listing 9-1. The Contents of the example.html File
<!DOCTYPE html>
<html ng-app=”exampleApp” >
<head>
<title>AngularJS Demo</title>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script src=”angular.js”></script>
<script>
var myApp = angular.module(“exampleApp”, []);
myApp.controller(“dayCtrl”, function ($scope) {
// controller statements will go here
});
</script>
</head>
<body>
<div class=”panel” ng-controller=”dayCtrl”>
<div class=”page-header”>
<h3>AngularJS App</h3>
</div>
<h4>Today is {{day || “(unknown)”}}</h4>
</div>
</body>
</html>
The listing contains the plumbing for a minimal AngularJS app, which I’ll explain in the sections that follow.
The view for this app contains a data binding expression that isn’t set up at the moment, so I have used the JavaScript || operator, which I described in Chapter 5, to display the value of the day variable if it is defined and the string (unknown) otherwise. Figure 9-1 shows how this HTML document is displayed by the browser.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.