Pro Angular: Build Powerful and Dynamic Web Apps

Table of Contents
About the Author
About the Technical Reviewer
Part I: Getting Ready
	Chapter 1: Getting Ready
		Understanding Where Angular Excels
			Understanding Round-Trip and Single-Page Applications
		Comparing Angular to React and Vue.js
		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: Jumping Right In
		Getting Ready
			Installing Node.js
			Installing an Editor
			Installing the Angular Development Package
			Choosing a Browser
		Creating an Angular Project
			Opening the Project for Editing
			Starting the Angular Development Tools
		Adding Features to the Application
			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 Application Content
			Applying Angular Material Components
			Defining the Spacer CSS Style
		Displaying the List of To-Do Items
			Defining Additional Styles
		Creating a Two-Way Data Binding
		Filtering Completed To-Do Items
		Adding To-Do Items
		Finishing Up
		Summary
	Chapter 3: Primer, Part 1
		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 CSS and the Bootstrap Framework
		Understanding TypeScript/JavaScript
			Understanding the TypeScript Workflow
			Understanding JavaScript vs. TypeScript
				Compiling the Function with TypeScript
				Using a More Specific Type
				Using a Type Union
				Accessing Type Features
			Understanding the Basic TypeScript/JavaScript Features
			Defining Variables and Constants
			Dealing with Unassigned and Null Values
			Using the JavaScript Primitive Types
				Working with Booleans
				Working with Strings
					Using Template Strings
				Working with Numbers
				Working with Null and Undefined Values
			Using the JavaScript Operators
				Using Conditional Statements
				The Equality Operator vs. the Identity Operator
				Explicitly Converting Types
					Converting Numbers to Strings
					Converting Strings to Numbers
				Using the Null and Nullish Coalescing Operators
				Using the Optional Chaining Operator
		Summary
	Chapter 4: Primer, Part 2
		Preparing for This Chapter
		Defining and Using Functions
			Defining Optional Function Parameters
			Defining Default Parameter Values
			Defining Rest Parameters
			Defining Functions That Return Results
			Using Functions as Arguments to Other Functions
				Defining Functions Using the Arrow Syntax
				Understanding Value Closure
		Working with Arrays
			Reading and Modifying the Contents of an Array
			Enumerating the Contents of an Array
			Using the Spread Operator
			Using the Built-in Array Methods
		Working with Objects
			Understanding Literal Object Types
				Defining Optional Properties in a Type Annotation
			Defining Classes
				Adding Methods to a Class
				Access Controls and Simplified Constructors
				Using Class Inheritance
			Checking Object Types
		Working with JavaScript Modules
			Creating and Using Modules
		Working with Reactive Extensions
			Understanding Observables
			Understanding Observers
			Understanding Subjects
		Summary
	Chapter 5: 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
			Inspecting 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 6: 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 7: 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
		Installing the Component Library
		Creating the Administration Feature Structure
			Creating the Placeholder Components
			Preparing the Common Content and the Feature Module
			Implementing the Product Table Feature
				Using the Table Component Features
			Implementing the Product Editor
			Implementing the Order Table Feature
		Summary
	Chapter 8: 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: Working with Angular
	Chapter 9: Understanding Angular Projects and Tools
		Creating a New Angular Project
		Understanding the Project Structure
			Understanding the Source Code Folder
			Understanding the Packages Folder
				Adding Packages with Schematics to an Angular Project
		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
			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 10: 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 11: 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 and Count Value
					Using the Odd and Even Values
					Using the First and Last Values
				Minimizing Element Operations
			Using the ngTemplateOutlet Directive
				Providing Context Data
			Using Directives Without an HTML Element
		Understanding One-Way Data Binding Restrictions
			Using Idempotent Expressions
			Understanding the Expression Context
		Summary
	Chapter 12: Using Events and Forms
		Preparing the Example Project
			Importing the Forms Module
			Preparing the Component and Template
		Using the Event Binding
			Using Event Data
			Handling Events in the Component
			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
			Completing the Form
		Summary
	Chapter 13: 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 14: 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 15: 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 16: 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
			Using the Async Pipe
		Summary
	Chapter 17: 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 18: 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
	Chapter 19: 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 20: 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 Messages Module
			Creating the Message Model and Service
			Creating the Component and Template
			Completing the Message 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
		Completing the Project
		Summary
	Chapter 21: Using the Forms API, Part 1
		Preparing for This Chapter
		Understanding the Reactive Forms API
		Rebuilding the Form Using the API
			Responding to Form Control Changes
			Managing Control State
			Managing Control Validation
			Adding Additional Controls
		Working with Multiple Form Controls
			Using a Form Group with a Form Element
			Accessing the Form Group from the Template
			Displaying Validation Messages with a Form Group
			Nesting Form Controls
				Validating Nested Form Controls
		Summary
	Chapter 22: Using the Forms API, Part 2
		Preparing for This Chapter
		Creating Form Components Dynamically
			Using a Form Array
			Adding and Removing Form Controls
			Validating Dynamically Created Form Controls
			Filtering the FormArray Values
		Creating Custom Form Validation
			Creating a Directive for a Custom Validator
			Validating Across Multiple Fields
				Improving Cross-Field Validation
			Performing Validation Asynchronously
		Summary
	Chapter 23: Making HTTP Requests
		Preparing the Example Project
			Configuring the Model Feature Module
			Creating the Data File
			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 24: 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
				Dealing with Direct Data Access
				Using Optional Route Parameters
			Navigating in Code
			Receiving Navigation Events
			Removing the Event Bindings and Supporting Code
		Summary
	Chapter 25: 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 26: 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 27: 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 28: Working with Component Libraries
		Preparing for This Chapter
			Installing the Component Library
			Adjusting the HTML File
			Running the Project
		Using the Library Components
			Using the Angular Button Directive
				Adding the Margin Style
				Importing the Component Module
			Using the Angular Material Table
				Using the Built-in Table Features
		Matching the Component Library Theme
			Creating the Custom Component
			Using the Angular Material Theme
			Applying the Ripple Effect
		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 an Angular Directive
		Summary
Index