Chapter 4. Practice Projects

Table of Contents

1. Develop an AngularJS App for Managing Movie Data
1.1. Dealing with date/time information using Date and <time>

1. Develop an AngularJS App for Managing Movie Data

The purpose of the app is managing information about movies.

The app deals with just one object type: Movie, as depicted in Figure 4.1 below. In the subsequent parts of the tutorial, you will extend this simple app by adding integrity constraints, further model classes for actors and directors, and the associations between them.

Notice that in most parts of this project you can follow, or even copy, the code of the book data management app, except that in the Movie class there is an attribute with range Date, so you should use the HTML <time> element in the list objects table, as discussed below in Section 1.1.

Figure 4.1. The object type Movie.

The object type Movie.

For developing the app, simply follow the sequence of seven steps described in the tutorial:

  1. Step 1 - Set up the Folder Structure

  2. Step 2 - Write the Model Code

  3. Step 3 - Initialize the Application

  4. Step 4 - Implement the List Objects Use Case

  5. Step 5 - Implement the Create Object Use Case

  6. Step 6 - Implement the Upate Object Use Case

  7. Step 7 - Implement the Delete Object Use Case

Make sure that

  1. your HTML pages comply with the XML syntax of HTML5,

  2. international characters are supported by using UTF-8 encoding for all HTML files,

  3. your JavaScript code complies with our Coding Guidelines and is checked with JSLint (http://www.jslint.com); it must pass the JSLint test (e.g. instead of the unsafe equality test with "==", always the strict equality test with "===" has to be used).

1.1. Dealing with date/time information using Date and <time>

Assume that our Book model class has an additional attribute publicationDate, the values of which have to be included in HTML tables and forms. While date/time information items have to be formatted as strings in a human-readable form on web pages, preferably in localized form based on the settings of the user's browser, it's not a good idea to store date/time values in this form. Rather we use instances of the pre-defined JavaScript class Date for representing and storing date/time values. In this form, the pre-defined functions toISOString() and toLocaleDateString() can be used for turning Date values into ISO standard date/time strings (of the form "2015-01-27") or to localized date/time strings (like "27.1.2015"). Notice that, for simplicity, we have omitted the time part of the date/time strings.

In summary, a date/time value is expressed in three different forms:

  1. Internally, for storage and computations, as a Date value.

  2. Internally, for annotating localized date/time strings, or externally, for displaying a date/time value in a standard form, as an ISO standard date/time string, e.g., with the help of toISOString().

  3. Externally, for displaying a date/time value in a localized form, as a localized date/time string, e.g., with the help of toLocaleDateString().

When a date/time value is to be included in a web page, we can use the HTML <time> element that allows to display a human-readable representation (typically a localized date/time string) that is annotated with a standard (machine-readable) form of the date/time value.

We illustrate the use of the <time> element with the following example of a web page that includes two <time> elements: one for displaying a fixed date, and another (initially empty) element for displaying the date of today, which is computed with the help of a JavaScript function. In both cases we use the datetime attribute for annotating the displayed human-readable date with the corresponding machine-readable representation.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Using the HTML5 Time Element</title>
 <script src="assignDate.js"></script>
 <script>window.addEventListener("load", assignDate);</script>
</head>
<body>
 <h1>HTML5 Time Element</h1>
 <p>HTML 2.0 was published on <time datetime="1995-11-24">November 24, 1995</time>.</p>
 <p>Today is <time id="today" datetime=""></time>.</p>
</body>
</html> 

This web page loads and executes the following JavaScript function for computing today's date as a Date value and assigning its ISO standard representation and its localized representation to the <time> element:

function assignDate() {
  var dateEl = document.getElementById("today");
  var today = new Date();
  dateEl.textContent = today.toLocaleDateString();
  dateEl.setAttribute("datetime", today.toISOString());
}