Table of Contents
The minimal AnuglarJS frontend web app that we have discussed in Part 1, has been limited to support the minimum functionality of a data management app only. For instance, it did not take care of preventing the user from entering invalid data into the app's database. In this second part of the tutorial we show how to express integrity constraints in AngularJS, and in the user interface built with AngularJS extended HTML tags.
We consider the same single-class data management problem that was considered in Part 1 of this tutorial. So, again, the purpose of our app is to manage information about books. But now we also consider the data integrity rules (also called 'business rules') that govern the management of book data. These integrity rules, or constraints, can be expressed in a UML class diagram as shown in Figure 6.1 below.
In this model, the following constraints have been expressed:
Due to the fact that the
isbn attribute should be declared as the standard identifier of
Book, so we
define it also as mandatory and unique. The
attribute has a pattern
constraint requiring its values to match the
ISBN-10 format that admits only 10-digit strings or 9-digit strings followed by
title attribute is mandatory, as indicated by its multiplicity expression , and
has a string length
constraint requiring its values to have at most 50
year attribute is mandatory and has an interval constraint, however, of a special form
since the maximum is not fixed, but provided by the calendaric function
nextYear(), which we implement as a utility function.
edition attribute is not mandatory, but optional, as indicated by its multiplicity expression
In addition to the constraints described in this list, there are the implicit range
constraints defined by assigning the datatype
NonEmptyString as range to
edition. In our AngularJS approach, all
these property constraints are encoded in the user interface built with HTML5. To be more
precisely, when HTML5
<input> elements used
together with Angular directives such as
ngModel, Angular provides
data-binding, input state control, and validation. Please notice that we implement the
application using Parse cloud storage, it will automatically add an property
objectId as standard identifier for each
adding for every property integrant Angular directives for validating the constraints;
performing validation before any data is saved;
responsive validation on user input for providing immediate feedback to the user;
validation on form submission for preventing the submission of flawed data.
Checking the constraints in the user interface on user input is important for providing immediate feedback to the user. But it is not safe enough to perform constraint validation only in the user interface, because this could be circumvented in a distributed web application where the user interface runs in the web browser of a frontend device while the application's data is managed by a backend component on a remote web server.
Consequently, we need a two-fold validation of constraints, luckly Angular is a specific templating system, it provides bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means we don't need to write code to constantly sync the view with the model and the model with the view as in other templating systems.
To solve all of these problems we do not need to change the folder's structure in Part 1. What we need is only to insert several Angular directives in the templates for different constraints and validation. In following sections we will first emphasize the details of constraints and validations with Angular, then discuss different ways of displaying error messages, at last show the whole program.