An Angular application is a web application built from a data model, components, and templates. Components and templates use data bindings and event bindings to generate standard HTML content for the browser. section 2.10 section 3.5
Angular projects include configuration and code files, development tools, a build process, and a web server. The development server rebuilds the application after changes and hot reloads the client; deployment uses a slower optimized build. section 9.4 section 9.7
A practical Angular application typically combines:
- A data model that represents the application state. section 2.10
- Components and templates that create the user-facing HTML. section 2.10
- Bindings that display data and event handling that responds to user actions. section 2.10 section 2.0
- Packages such as Angular Material for styling and Angular tools for project creation, development, linting, and deployment. section 2.0 section 9.7
To-do application
A simple application can display a to-do list, let users create items, and mark existing items complete. Keeping state only in the application makes the example easy to follow, but closing or reloading the browser loses changes; later applications add persistent storage. section 2.3
SportsStore application
A larger Angular application can organize a realistic store application, add URL routing, and proceed from development to deployment in a container such as Docker. section 1.4.1 section 5.1.3 section 8.7
Listing 5.7. Preparing the index.html file in the src folder
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>SportsStore</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body class="p-2"> <app>SportsStore Will Go Here</app> </body> </html>
Use the entry HTML file to load the application, provide the base URL needed by routing, and place the root app element where Angular inserts its content. section 5.1.3
