The Anatomy of an AngularJS App: Preparing the Example Project

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” >


<title>AngularJS Demo</title>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

<script src=”angular.js”></script>


var myApp = angular.module(“exampleApp”, []);

myApp.controller(“dayCtrl”, function ($scope) {

// controller statements will go here





<div class=”panel” ng-controller=”dayCtrl”>

<div class=”page-header”>

<h3>AngularJS App</h3>


<h4>Today is {{day || “(unknown)”}}</h4>




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.

Leave a Reply

Your email address will not be published. Required fields are marked *