Understanding and Implementing Information Management Concepts and Techniques

Building Front-End Web Apps with AngularJS and Parse.com

An incremental in-depth tutorial about building JavaScript front-end web applications with AngularJS and the cloud storage service Parse.com, for theory-underpinned and example-based learning by doing it yourself

Gerd Wagner

Warning: This tutorial book is a draft version, so it may still contain errors and may still be incomplete in certain respects. Please report any issue to G.Wagner@b-tu.de.

This tutorial book is available as an open access online book (HTML) and as an e-book (PDF) via its book webpage.

This book, along with any associated source code, is licensed under The Code Project Open License (CPOL), implying that the associated code is provided "as-is", can be modified to create derivative works, can be redistributed, and can be used in commercial applications, but the book must not be distributed or republished without the author's consent.


Revision History
Create first version.

Table of Contents

1. Run the Apps and Get Their Code
I. Getting Started
1. A Quick Tour of the Foundations of Web Apps
1. The World Wide Web (WWW)
2. HTML and XML
2.1. XML documents
2.2. Unicode and UTF-8
2.3. XML namespaces
2.4. Correct XML documents
2.5. The evolution of HTML
2.6. HTML forms
3. Styling Web Documents and User Interfaces with CSS
4. JavaScript - "the assembly language of the Web"
4.1. JavaScript as an object-oriented language
4.2. Further reading about JavaScript
5. Accessibility for Web Apps
2. More on JavaScript
1. JavaScript Basics
1.1. Types and data literals in JavaScript
1.2. Variable scope
1.3. Strict Mode
1.4. Different kinds of objects
1.5. Array lists
1.6. Maps
1.7. JavaScript supports four types of basic data structures
1.8. Functions
1.9. Defining and using classes
1.10. JavaScript as an object-oriented language
1.11. Further reading about JavaScript
3. Building a Minimal Front-End App with AngularJS in Seven Steps
1. Step 1 - Set up the App's Structure
1.1. The start page index.html
1.2. Modules and routes
1.3. The start page view template main.html
1.4. View models in AngularJS
2. Step 2 - Using the Cloud Storage Service Parse.com
3. Step 3 - Implement the Retrieve/List All Use Case
4. Step 4 - Implement the Create Use Case
5. Step 5 - Implement the Update Use Case
6. Step 6 - Implement the Delete Use Case
7. Step 7 - Implement createTestData() and clearDatabase()
7.1. Adding several objects in one step
7.2. Delete several objects in one step
8. Run the App and Get the Code
9. Points of Attention
4. Practice Projects
1. Develop an AngularJS App for Managing Movie Data
1.1. Dealing with date/time information using Date and <time>
II. Integrity Constraints
5. Integrity Constraints and Data Validation
1. Introduction
2. Integrity Constraints
2.1. String Length Constraints
2.2. Mandatory Value Constraints
2.3. Range Constraints
2.4. Interval Constraints
2.5. Pattern Constraints
2.6. Cardinality Constraints
2.7. Uniqueness Constraints
2.8. Standard Identifiers (Primary Keys)
2.9. Referential Integrity Constraints
2.10. Frozen Value Constraints
2.11. Beyond property constraints
3. Responsive Validation
4. Constraint Validation in MVC Applications
5. Criteria for Evaluating the Validation Support of Frameworks
6. Constraint Validation in an AngularJS Frontend Web App
1. New Issues
2. Using Angular Forms Validation API
3. Generic Constraints and Validations
4. Specific (Custom) Constraints and Validations
4.1. Calculated Value
4.2. Unique Value
4.3. Display Error-Messages
5. Encode our Web Application with Validation
5.1. New Folder's Structure with errorMessages
5.2. Start page - Index.html
5.3. Application's Initialization - js/app.js
5.4. Create Object Use Case
5.5. Error Messages
5.6. Update Object Use Case
5.7. Validation in Controller
6. Evaluation
7. Run the App and Get the Code
7. Practice Projects
1. Develop an AngularJS App with Constraint Validation
III. Associations
8. Reference Properties and Unidirectional Associations
1. References and Reference Properties
2. Referential Integrity
3. Modeling Reference Properties as Unidirectional Associations
4. Representing Unidirectional Associations as Reference Properties
5. Adding Directionality to a Non-Directed Association
6. Our Running Example
7. Eliminating Unidirectional Associations
7.1. The basic elimination procedure restricted to unidirectional associations
7.2. Eliminating associations from the Publisher-Book-Author design model
8. Rendering Reference Properties in the User Interface
9. Collection Types for Multi-Valued Reference Properties
9. Implementing Unidirectional Functional Associations with AngularJS and Parse.com
1. Many-to-One Relation in Parse
1.1. Create/Update Pointer
1.2. Retrieve Objects
1.3. Remove Pointer
2. New issues
3. Encode our Web Application with Unidirectional Functional Association
3.1. List Objects Use Case
3.2. Create Object Use Case
3.3. Update Object Use Case
3.4. Delete Object Use Case
10. Implementing Unidirectional Non-Functional Associations with AngularJS and Parse.com
1. One-to-Many or Many-to-Many Relations in Parse
1.1. Using Array
1.2. Using Join Table
1.3. Using Parse Relation
2. New issues
3. Encode our Web Application with Unidirectional Non-Functional Association
3.1. Special processing for Date
3.2. List Objects Use Case
3.3. Create Object Use Case
3.4. Update Object Use Case
3.5. Delete Object Use Case
4. Run the App and Get the Code
11. Bidirectional Associations
1. Inverse Reference Properties
2. Making an Association-Free Information Design Model
2.1. The basic procedure
2.2. How to eliminate uni-directional associations
2.3. How to eliminate bi-directional associations
2.4. The resulting association-free design model
12. Implementing Bidirectional Associations with AngularJS and Parse.com
1. Make a JavaScript Data Model
2. New issues
3. Encode our Web Application with Bidirectional Association
3.1. Show information about published books in the List Publishers use case
3.2. Show information about authored books in the List Authors use case
4. Run the App and Get the Code
13. Part-Whole Associations
1. Aggregation
2. Composition
IV. Inheritance in Class Hierarchies
14. Subtyping and Inheritance
1. Introducing Subtypes by Specialization
2. Introducing Supertypes by Generalization
3. Intension versus Extension
4. Type Hierarchies
5. The Class Hierarchy Merge Design Pattern
6. Subtyping and Inheritance in Computational Languages
6.1. Subtyping and Inheritance with OOP Classes
6.2. Subtyping and Inheritance with Database Tables
15. Subtyping in an AngularJS Front-End App
1. Subtyping with Constructor-Based Classes
1.1. JavaScript Code Pattern
1.2. Using Angular Factory for Subtyping
2. Setup Folder Structure
3. Case Study 1: Eliminating a Class Hierarchy
3.1. Encode the Factory Book
3.2. Write the View and Controller Code
4. Case Study 2: Implementing a Class Hierarchy
4.1. Make the JavaScript class model
4.2. Make the JSON table model
4.3. New issues
4.4. Encode the Angular Factories
4.5. Write the View and Controller Code
5. Run the App and Get the Code

List of Figures

2.1. The built-in JavaScript classes Object and Function.
3.1. The object type Book.
4.1. The object type Movie.
5.1. The object type Person with an interval constraint
5.2. The object type Book with a pattern constraint
5.3. Two object types with cardinality constraints
5.4. The object type Book with a uniqueness constraint
5.5. The object type Book with a standard identifier declaration
6.1. A platform-independent design model with the class Book and its invariants
6.2. User-Defined Direcitve plStdid
6.3. Display Error Messages using ngShow
6.4. Display Error Messages using ngIf
6.5. Display Error Messages using ngMessages
7.1. The object type Movie defined with several constraints.
8.1. A committee has a club member as chair expressed by the reference property chair
8.2. A committee has a club member as chair expressed by an association end with a "dot"
8.3. Representing the unidirectional association ClubMember has Committee as chairedCommittee as a reference property
8.4. A model of the Committee-has-ClubMember-as-chair association without ownership dots
8.5. Modeling a bidirectional association between Committee and ClubMember
8.6. The Publisher-Book information design model with a unidirectional association
8.7. The Publisher-Book-Author information design model with two unidirectional associations
8.8. Turn a non-functional target association end into a corresponding reference property
8.9. The association-free Publisher-Book design model
8.10. The association-free Publisher-Book-Author design model
9.1. Publisher-Book-Author design model
9.2. Publisher-Book association-free model
9.3. The Structure of Public Library Web-application with Book and Publisher
10.1. Book-Author association-free model
10.2. Book-Author-JoinTable model
11.1. The Publisher-Book-Author information design model with two bidirectional associations
11.2. Turn a bi-directional one-to-one association into a pair of mutually inverse single-valued reference properties
11.3. Turn a bi-directional many-to-many association into a pair of mutually inverse multi-valued reference properties
11.4. The association-free design model
12.1. Publisher-Book-Author association free model
14.1. The object type Book is specialized by two subtypes: TextBook and Biography
14.2. The object types Employee and Author share several attributes
14.3. The object types Employee and Author have been generalized by adding the common supertype Person
14.4. The complete class model containing two inheritance hierarchies
14.5. A class hierarchy having the root class Vehicle
14.6. A multiple inheritance hierarchy
14.7. The design model resulting from applying the Class Hierarchy Merge design pattern
14.8. A class model with a Person roles hierarchy
14.9. An SQL table model with a single table representing the Book class hierarchy
14.10. An SQL table model with a single table representing the Person roles hierarchy
14.11. An SQL table model with the table Person as the root of a table hierarchy
15.1. The object type Book as the root of a disjoint segmentation
15.2. The Person roles hierarchy
15.3. Student is a subclass of Person
15.4. Web Application with Factory
15.5. The simplified class model obtained by applying the Class Hierarchy Merge design pattern
15.6. The Simplified JavaScript class model of the Person class hierarchy
15.7. The JSON table model of the Person class hierarchy

List of Tables

2.1. Required and desirable features of JS code patterns for classes
3.1. The REST API of Parse.com's cloud storage service
8.1. An example of an association table
8.2. Different terminologies
8.3. Functionality types