Pro Angular: Build Powerful and Dynamic Web Apps, 5th Edition

Table of Contents
About the Author
About the Technical Reviewer
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
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
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