Part I. Getting Started

In this first part of the book we summarize the web's foundations and show how to build a front-end web application using AngularJS and the cloud storage service It shows how to build such an app with minimal effort. A front-end web app can be provided by any web server, but it is executed on the user's computer device (smartphone, tablet or notebook), and not on the remote web server.

The minimal version of an AngularJS front-end data management application discussed in this tutorial only includes a minimum of the overall functionality required for a complete app. It takes care of only one object type ("books") and supports the four standard data management operations (Create/Retrieve/Update/Delete), but it needs to be enhanced by styling the user interface with CSS rules, and by adding further important parts of the app's overall functionality.

Table of Contents

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