Pro Angular 9: Build Powerful and Dynamic Web Apps

Table of Contents
About the Author
About the Technical Reviewer
Part I: Getting Started with Angular
	Chapter 1: Getting Ready
		What Do You Need to Know?
		What Is the Structure of This Book?
			Part 1: Getting Started with Angular
			Part 2: Angular in Detail
			Part 3: Advanced Angular Features
		What Doesn’t This Book Cover?
		What Software Do I Need for Angular Development?
		How Do I Set Up the Development Environment?
		What If I Have Problems Following the Examples?
		What If I Find an Error in the Book?
		Are There Lots of Examples?
		Where Can You Get the Example Code?
		How Do I Contact the Author?
		What If I Really Enjoyed This Book?
		What If This Book Has Made Me Angry and I Want to Complain?
		Summary
	Chapter 2: Your First Angular App
		Preparing the Development Environment
			Installing Node.js
			Installing the angular-cli Package
			Installing an Editor
			Installing a Browser
		Creating and Preparing the Project
			Creating the Project
			Starting the Development Tools
		Adding Angular Features to the Project
			Creating a Data Model
				Creating the To-Do List Class
			Displaying Data to the User
			Updating the Component
				Understanding the Imports
				Understanding the Decorator
				Understanding the Class
			Styling the HTML Elements
			Displaying the List of To-Do Items
			Creating a Two-Way Data Binding
				Filtering To-Do Items
			Adding To-Do Items
			Displaying Completed To-Do Items
		Summary
	Chapter 3: Putting Angular in Context
		Understanding Where Angular Excels
			Understanding Round-Trip and Single-Page Applications
		Comparing Angular to React and Vue.js
		Understanding the MVC Pattern
			Understanding Models
			Understanding Controllers/Components
				Understanding View Data
			Understanding Views/Templates
		Understanding RESTful Services
		Common Design Pitfalls
			Putting the Logic in the Wrong Place
			Adopting the Data Store Data Format
			Just Enough Knowledge to Cause Trouble
		Summary
	Chapter 4: An HTML and CSS Primer
		Preparing the Example Project
		Understanding HTML
			Understanding Void Elements
			Understanding Attributes
			Applying Attributes Without Values
			Quoting Literal Values in Attributes
			Understanding Element Content
			Understanding the Document Structure
		Understanding Bootstrap
			Applying Basic Bootstrap Classes
				Using Contextual Classes
				Using Margin and Padding
				Changing Element Sizes
			Using Bootstrap to Style Tables
			Using Bootstrap to Create Forms
			Using Bootstrap to Create Grids
				Creating Responsive Grids
				Creating a Simplified Grid Layout
		Summary
	Chapter 5: JavaScript and TypeScript: Part 1
		Preparing the Example Project
			Understanding the Basic Workflow
		Using Statements
		Defining and Using Functions
			Defining Functions with Parameters
				Using Default and Rest Parameters
			Defining Functions That Return Results
			Using Functions As Arguments to Other Functions
				Using Arrow Functions
		Using Variables and Types
			Using Variable Closure
			Using the Primitive Types
				Working with Booleans
				Working with Strings
					Using Template Strings
				Working with Numbers
		Using JavaScript Operators
			Using Conditional Statements
			The Equality Operator vs. the Identity Operator
			Explicitly Converting Types
				Converting Numbers to Strings
				Converting Strings to Numbers
		Working with Arrays
			Using an Array Literal
			Reading and Modifying the Contents of an Array
			Enumerating the Contents of an Array
			Using the Spread Operator
			Using the Built-in Array Methods
		Summary
	Chapter 6: JavaScript and TypeScript: Part 2
		Preparing the Example Project
		Working with Objects
			Using Object Literals
			Using Functions as Methods
			Defining Classes
				Defining Class Getter and Setter Properties
				Using Class Inheritance
		Working with JavaScript Modules
			Creating and Using Modules
				Renaming Imports
				Importing All of the Types in a Module
		Useful TypeScript Features
			Using Type Annotations
				Type Annotating Properties and Variables
				Specifying Multiple Types or Any Type
			Using Tuples
			Using Indexable Types
			Using Access Modifiers
		Summary
	Chapter 7: SportsStore: A Real Application
		Preparing the Project
			Installing the Additional NPM Packages
				Adding the CSS Style Sheets to the Application
			Preparing the RESTful Web Service
			Preparing the HTML File
			Creating the Folder Structure
			Running the Example Application
			Starting the RESTful Web Service
		Preparing the Angular Project Features
			Updating the Root Component
			Updating the Root Module
			Inspecting the Bootstrap File
		Starting the Data Model
			Creating the Model Classes
			Creating the Dummy Data Source
			Creating the Model Repository
			Creating the Feature Module
		Starting the Store
			Creating the Store Component and Template
			Creating the Store Feature Module
			Updating the Root Component and Root Module
		Adding Store Features the Product Details
			Displaying the Product Details
			Adding Category Selection
			Adding Product Pagination
			Creating a Custom Directive
		Summary
	Chapter 8: SportsStore: Orders and Checkout
		Preparing the Example Application
		Creating the Cart
			Creating the Cart Model
			Creating the Cart Summary Components
			Integrating the Cart into the Store
		Adding URL Routing
			Creating the Cart Detail and Checkout Components
			Creating and Applying the Routing Configuration
			Navigating Through the Application
			Guarding the Routes
		Completing the Cart Detail Feature
		Processing Orders
			Extending the Model
				Updating the Repository and Data Source
				Updating the Feature Module
			Collecting the Order Details
		Using the RESTful Web Service
			Applying the Data Source
		Summary
	Chapter 9: SportsStore: Administration
		Preparing the Example Application
			Creating the Module
			Configuring the URL Routing System
			Navigating to the Administration URL
		Implementing Authentication
			Understanding the Authentication System
			Extending the Data Source
			Creating the Authentication Service
			Enabling Authentication
		Extending the Data Source and Repositories
		Creating the Administration Feature Structure
			Creating the Placeholder Components
			Preparing the Common Content and the Feature Module
			Implementing the Product Feature
				Implementing the Product Editor
			Implementing the Orders Feature
		Summary
	Chapter 10: SportsStore: Progressive Features and Deployment
		Preparing the Example Application
		Adding Progressive Features
			Installing the PWA Package
			Caching the Data URLs
			Responding to Connectivity Changes
		Preparing the Application for Deployment
			Creating the Data File
			Creating the Server
			Changing the Web Service URL in the Repository Class
		Building and Testing the Application
			Testing the Progressive Features
		Containerizing the SportsStore Application
			Installing Docker
			Preparing the Application
			Creating the Docker Container
			Running the Application
		Summary
Part II: Angular in Detail
	Chapter 11: Understanding Angular Projects and Tools
		Creating a New Angular Project
		Understanding the Project Structure
			Understanding the Source Code Folder
			Understanding the Packages Folder
		Using the Development Tools
			Understanding the Development HTTP Server
			Understanding the Build Process
				Understanding the Application Bundle
				Understanding the Polyfills Bundle
				Understanding the Styles Bundle
			Using the Linter
		Understanding How an Angular Application Works
			Understanding the HTML Document
			Understanding the Application Bootstrap
			Understanding the Root Angular Module
			Understanding the Angular Component
			Understanding Content Display
		Understanding the Production Build Process
			Understanding Ahead-of-Time Compilation
			Understanding Differential Loading
			Running the Production Build
		Starting Development in an Angular Project
			Creating the Data Model
				Creating the Descriptive Model Class
				Creating the Data Source
				Creating the Model Repository
			Creating a Component and Template
			Configuring the Root Angular Module
		Summary
	Chapter 12: Using Data Bindings
		Preparing for This Chapter
		Understanding One-Way Data Bindings
			Understanding the Binding Target
				Understanding Property Bindings
			Understanding the Expression
			Understanding the Brackets
			Understanding the Host Element
		Using the Standard Property and Attribute Bindings
			Using the Standard Property Binding
			Using the String Interpolation Binding
			Using the Attribute Binding
		Setting Classes and Styles
			Using the Class Bindings
				Setting All of an Element’s Classes with the Standard Binding
				Setting Individual Classes Using the Special Class Binding
				Setting Classes Using the ngClass Directive
			Using the Style Bindings
				Setting a Single Style Property
				Setting Styles Using the ngStyle Directive
		Updating the Data in the Application
		Summary
	Chapter 13: Using the Built-in Directives
		Preparing the Example Project
		Using the Built-in Directives
			Using the ngIf Directive
			Using the ngSwitch Directive
				Avoiding Literal Value Problems
			Using the ngFor Directive
				Using Other Template Variables
					Using the Index Value
					Using the Odd and Even Values
					Using the First and Last Values
				Minimizing Element Operations
			Using the ngTemplateOutlet Directive
				Providing Context Data
		Understanding One-Way Data Binding Restrictions
			Using Idempotent Expressions
			Understanding the Expression Context
		Summary
	Chapter 14: Using Events and Forms
		Preparing the Example Project
			Importing the Forms Module
			Preparing the Component and Template
		Using the Event Binding
			Using Event Data
			Using Template Reference Variables
		Using Two-Way Data Bindings
			Using the ngModel Directive
		Working with Forms
			Adding a Form to the Example Application
			Adding Form Data Validation
				Styling Elements Using Validation Classes
				Displaying Field-Level Validation Messages
				Using the Component to Display Validation Messages
			Validating the Entire Form
				Displaying Summary Validation Messages
				Disabling the Submit Button
		Using Model-Based Forms
			Enabling Model-Based Forms Feature
			Defining the Form Model Classes
			Using the Model for Validation
			Generating the Elements from the Model
		Creating Custom Form Validators
			Applying a Custom Validator
		Summary
	Chapter 15: Creating Attribute Directives
		Preparing the Example Project
		Creating a Simple Attribute Directive
			Applying a Custom Directive
		Accessing Application Data in a Directive
			Reading Host Element Attributes
				Using a Single Host Element Attribute
			Creating Data-Bound Input Properties
			Responding to Input Property Changes
		Creating Custom Events
			Binding to a Custom Event
		Creating Host Element Bindings
		Creating a Two-Way Binding on the Host Element
		Exporting a Directive for Use in a Template Variable
		Summary
	Chapter 16: Creating Structural Directives
		Preparing the Example Project
		Creating a Simple Structural Directive
			Implementing the Structural Directive Class
			Enabling the Structural Directive
			Using the Concise Structural Directive Syntax
		Creating Iterating Structural Directives
			Providing Additional Context Data
			Using the Concise Structure Syntax
			Dealing with Property-Level Data Changes
			Dealing with Collection-Level Data Changes
				Keeping Track of Views
		Querying the Host Element Content
			Querying Multiple Content Children
			Receiving Query Change Notifications
		Summary
	Chapter 17: Understanding Components
		Preparing the Example Project
		Structuring an Application with Components
			Creating New Components
				Understanding the New Application Structure
			Defining Templates
				Defining External Templates
				Using Data Bindings in Component Templates
				Using Input Properties to Coordinate Between Components
					Using Directives in a Child Component Template
				Using Output Properties to Coordinate Between Components
				Projecting Host Element Content
			Completing the Component Restructure
		Using Component Styles
			Defining External Component Styles
			Using Advanced Style Features
				Setting View Encapsulation
				Using the Shadow DOM CSS Selectors
					Selecting the Host Element
					Selecting the Host Element’s Ancestors
					Pushing a Style into the Child Component’s Template
		Querying Template Content
		Summary
	Chapter 18: Using and Creating Pipes
		Preparing the Example Project
		Understanding Pipes
		Creating a Custom Pipe
			Registering a Custom Pipe
			Applying a Custom Pipe
			Combining Pipes
			Creating Impure Pipes
		Using the Built-in Pipes
			Formatting Numbers
			Formatting Currency Values
			Formatting Percentages
			Formatting Dates
			Changing String Case
			Serializing Data as JSON
			Slicing Data Arrays
			Formatting Key/Value Pairs
			Selecting Values
			Pluralizing Values
		Summary
	Chapter 19: Using Services
		Preparing the Example Project
		Understanding the Object Distribution Problem
			Demonstrating the Problem
			Distributing Objects as Services Using Dependency Injection
				Preparing the Service
				Preparing the Dependent Components
				Registering the Service
				Reviewing the Dependency Injection Changes
			Declaring Dependencies in Other Building Blocks
				Declaring a Dependency in a Pipe
				Declaring Dependencies in Directives
		Understanding the Test Isolation Problem
			Isolating Components Using Services and Dependency Injection
				Preparing the Services
				Registering the Services
				Preparing the Dependent Component
		Completing the Adoption of Services
			Updating the Root Component and Template
			Updating the Child Components
		Summary
	Chapter 20: Using Service Providers
		Preparing the Example Project
		Using Service Providers
			Using the Class Provider
				Understanding the Token
					Using Opaque Tokens
				Understanding the useClass Property
				Resolving a Dependency with Multiple Objects
			Using the Value Provider
			Using the Factory Provider
			Using the Existing Service Provider
		Using Local Providers
			Understanding the Limitations of Single Service Objects
			Creating Local Providers in a Component
			Understanding the Provider Alternatives
				Creating a Local Provider for All Children
				Creating a Provider for View Children
			Controlling Dependency Resolution
				Restricting the Provider Search
				Skipping Self-Defined Providers
		Summary
	Chapter 21: Using and Creating Modules
		Preparing the Example Project
		Understanding the Root Module
			Understanding the imports Property
			Understanding the declarations Property
			Understanding the providers Property
			Understanding the bootstrap Property
		Creating Feature Modules
			Creating a Model Module
				Creating the Module Definition
				Updating the Other Classes in the Application
				Updating the Root Module
			Creating a Utility Feature Module
				Creating the Module Folder and Moving the Files
				Updating the Classes in the New Module
				Creating the Module Definition
					Understanding the Imports
					Understanding the Providers
					Understanding the Declarations
					Understanding the Exports
				Updating the Other Classes in the Application
				Updating the Root Module
			Creating a Feature Module with Components
				Creating the Module Folder and Moving the Files
				Creating the Module Definition
				Updating the Other Classes
				Updating the Root Module
		Summary
Part III: Advanced Angular Features
	Chapter 22: Creating the Example Project
		Starting the Example Project
			Adding and Configuring the Bootstrap CSS Package
			Creating the Project Structure
		Creating the Model Module
			Creating the Product Data Type
			Creating the Data Source and Repository
			Completing the Model Module
		Creating the Core Module
			Creating the Shared State Service
			Creating the Table Component
				Creating the Table Component Template
			Creating the Form Component
				Creating the Form Component Template
				Creating the Form Component Styles
			Completing the Core Module
		Creating the Messages Module
			Creating the Message Model and Service
			Creating the Component and Template
			Completing the Message Module
		Completing the Project
		Summary
	Chapter 23: Using Reactive Extensions
		Preparing the Example Project
		Understanding the Problem
		Solving the Problem with Reactive Extensions
			Understanding Observables
			Understanding Observers
			Understanding Subjects
		Using the Async Pipe
			Using the Async Pipe with Custom Pipes
		Scaling Up Application Feature Modules
		Going Beyond the Basics
			Filtering Events
			Transforming Events
				Using Different Event Objects
			Receiving Only Distinct Events
				Using a Custom Equality Checker
			Taking and Skipping Events
		Summary
	Chapter 24: Making HTTP Requests
		Preparing the Example Project
			Configuring the Model Feature Module
			Creating the Data File
			Updating the Form Component
			Running the Example Project
		Understanding RESTful Web Services
		Replacing the Static Data Source
			Creating the New Data Source Service
				Setting Up the HTTP Request
				Processing the Response
			Configuring the Data Source
			Using the REST Data Source
			Saving and Deleting Data
		Consolidating HTTP Requests
		Making Cross-Origin Requests
			Using JSONP Requests
		Configuring Request Headers
		Handling Errors
			Generating User-Ready Messages
			Handling the Errors
		Summary
	Chapter 25: Routing and Navigation: Part 1
		Preparing the Example Project
		Getting Started with Routing
			Creating a Routing Configuration
			Creating the Routing Component
			Updating the Root Module
			Completing the Configuration
			Adding Navigation Links
			Understanding the Effect of Routing
		Completing the Routing Implementation
			Handling Route Changes in Components
			Using Route Parameters
				Using Multiple Route Parameters
				Using Optional Route Parameters
			Navigating in Code
			Receiving Navigation Events
			Removing the Event Bindings and Supporting Code
		Summary
	Chapter 26: Routing and Navigation: Part 2
		Preparing the Example Project
			Adding Components to the Project
		Using Wildcards and Redirections
			Using Wildcards in Routes
			Using Redirections in Routes
		Navigating Within a Component
			Responding to Ongoing Routing Changes
			Styling Links for Active Routes
			Fixing the All Button
		Creating Child Routes
			Creating the Child Route Outlet
			Accessing Parameters from Child Routes
		Summary
	Chapter 27: Routing and Navigation: Part 3
		Preparing the Example Project
		Guarding Routes
			Delaying Navigation with a Resolver
				Creating a Resolver Service
				Registering the Resolver Service
				Applying the Resolver
				Displaying Placeholder Content
				Using a Resolver to Prevent URL Entry Problems
			Preventing Navigation with Guards
				Preventing Route Activation
				Consolidating Child Route Guards
				Preventing Route Deactivation
		Loading Feature Modules Dynamically
			Creating a Simple Feature Module
			Loading the Module Dynamically
				Creating a Route to Dynamically Load a Module
				Using a Dynamically Loaded Module
			Guarding Dynamic Modules
				Applying a Dynamic Loading Guard
		Targeting Named Outlets
			Creating Additional Outlet Elements
			Navigating When Using Multiple Outlets
		Summary
	Chapter 28: Using Animations
		Preparing the Example Project
			Disabling the HTTP Delay
			Simplifying the Table Template and Routing Configuration
		Getting Started with Angular Animation
			Enabling the Animation Module
			Creating the Animation
				Defining Style Groups
				Defining Element States
				Defining State Transitions
				Defining the Trigger
			Applying the Animation
			Testing the Animation Effect
		Understanding the Built-in Animation States
		Understanding Element Transitions
			Creating Transitions for the Built-in States
				Animating Element Addition and Removal
			Controlling Transition Animations
				Specifying a Timing Function
				Specifying an Initial Delay
				Using Additional Styles During Transition
				Performing Parallel Animations
		Understanding Animation Style Groups
			Defining Common Styles in Reusable Groups
			Using Element Transformations
			Applying CSS Framework Styles
		Summary
	Chapter 29: Angular Unit Testing
		Preparing the Example Project
		Running a Simple Unit Test
		Working with Jasmine
		Testing an Angular Component
			Working with the TestBed Class
				Configuring the Test Bed for Dependencies
			Testing Data Bindings
			Testing a Component with an External Template
			Testing Component Events
			Testing Output Properties
			Testing Input Properties
			Testing with Asynchronous Operations
		Testing an Angular Directive
		Summary
Index