Pro Angular 16

1.1 Understanding where Angular excels
1.1.1 Understanding round-trip and single-page applications
1.2 Comparing Angular to React
1.3 What do you need to know?
1.4 What is the structure of this book?
1.4.1 Part 1: Getting started with Angular
1.4.2 Part 2: Angular in detail
1.4.3 Part 3: Advanced Angular features
1.5 What doesn’t this book cover?
1.6 What software do you need for Angular?
1.7 How do you set up the development environment?
1.8 What if you have problems following the examples?
1.9 What if you find an error in the book?
1.10 Are there lots of examples?
1.11 Where can you get the example code?
1.12 How do you contact the author?
1.13 What if you really enjoyed this book?
1.14 What if this book has made you angry?
1.15 Summary
2.1 Getting ready
2.1.1 Installing Node.js
2.1.2 Installing an editor
2.1.3 Installing the Angular development package
2.1.4 Choosing a browser
2.2 Creating an Angular project
2.2.1 Opening the project for editing
2.2.2 Starting the Angular development tools
2.3 Adding features to the application
2.3.1 Creating a data model
Creating the to-do list class
2.3.2 Displaying data to the user
2.3.3 Updating the component
Understanding the imports
Understanding the decorator
Understanding the class
2.4 Styling the application content
2.4.1 Applying Angular Material components
2.4.2 Defining the spacer CSS style
2.5 Displaying the list of to-do items
2.5.1 Defining additional styles
2.6 Creating a two-way data binding
2.7 Filtering completed to-do items
2.8 Adding to-do items
2.9 Finishing up
2.10 Summary
3.1 Preparing the example project
3.2 Understanding HTML
3.2.1 Understanding void elements
3.2.2 Understanding attributes
3.2.3 Applying attributes without values
3.2.4 Quoting literal values in attributes
3.2.5 Understanding element content
3.2.6 Understanding the document structure
3.3 Understanding CSS and the Bootstrap framework
3.4 Understanding TypeScript/JavaScript
3.4.1 Understanding the TypeScript workflow
3.4.2 Understanding JavaScript vs. TypeScript
Compiling the function with TypeScript
Using a more specific type
Using a type union
Accessing type features
3.4.3 Understanding the basic TypeScript/JavaScript features
3.4.4 Defining variables and constants
3.4.5 Dealing with unassigned and null values
3.4.6 Using the JavaScript primitive types
Working with Booleans
Working with Strings
Using template strings
Working with Numbers
Working with null and undefined values
3.4.7 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
3.5 Summary
4.1 Preparing for this chapter
4.2 Defining and using functions
4.2.1 Defining optional function parameters
4.2.2 Defining default parameter values
4.2.3 Defining rest parameters
4.2.4 Defining functions that return results
4.2.5 Using functions as arguments to other functions
Defining functions using the arrow syntax
Understanding value closure
4.3 Working with arrays
4.3.1 Reading and modifying the contents of an array
4.3.2 Enumerating the contents of an array
4.3.3 Using the spread operator
4.3.4 Using the built-in array methods
4.4 Working with objects
4.4.1 Understanding literal object types
Defining optional properties in a type annotation
4.4.2 Defining classes
Adding methods to a class
Access controls and simplified constructors
Using class inheritance
4.4.3 Checking object types
4.5 Working with JavaScript modules
4.5.1 Creating and using modules
4.6 Summary
5.1 Preparing the project
5.1.1 Installing the additional NPM packages
Adding the CSS style sheets to the application
5.1.2 Preparing the RESTful web service
5.1.3 Preparing the HTML file
5.1.4 Creating the folder structure
5.1.5 Running the example application
5.1.6 Starting the RESTful web service
5.2 Preparing the Angular project features
5.2.1 Updating the root component
5.2.2 Inspecting the root module
5.2.3 Inspecting the bootstrap file
5.3 Starting the data model
5.3.1 Creating the model classes
5.3.2 Creating the dummy data source
5.3.3 Creating the model repository
5.3.4 Creating the feature module
5.4 Starting the store
5.4.1 Creating the store component and template
5.4.2 Creating the store feature module
5.4.3 Updating the root component and root module
5.5 Adding store features
5.5.1 Displaying the product details
5.5.2 Adding category selection
5.5.3 Adding product pagination
5.5.4 Creating a custom directive
5.6 Summary
6.1 Preparing the example application
6.2 Creating the cart
6.2.1 Creating the cart model
6.2.2 Creating the cart summary components
6.2.3 Integrating the cart into the store
6.3 Adding URL routing
6.3.1 Creating the cart detail and checkout components
6.3.2 Creating and applying the routing configuration
6.3.3 Navigating through the application
6.3.4 Guarding the routes
6.4 Completing the cart detail feature
6.5 Processing orders
6.5.1 Extending the model
Updating the repository and data source
Updating the feature module
6.5.2 Collecting the order details
6.6 Using the RESTful web service
6.6.1 Applying the data source
6.7 Summary
7.1 Preparing the example application
7.1.1 Creating the module
7.1.2 Configuring the URL routing system
7.1.3 Navigating to the administration URL
7.2 Implementing authentication
7.2.1 Understanding the authentication system
7.2.2 Extending the data source
7.2.3 Creating the authentication service
7.2.4 Enabling authentication
7.3 Extending the data source and repositories
7.4 Installing the component library
7.5 Creating the administration feature structure
7.5.1 Creating the placeholder components
7.5.2 Preparing the common content and the feature module
7.5.3 Implementing the product table feature
Using the table component features
7.5.4 Implementing the product editor
7.5.5 Implementing the order table feature
7.6 Summary
8.1 Preparing the example application
8.2 Using pre-rendering
8.2.1 Installing the SSR packages
8.2.2 Creating the platform service
8.2.3 Changing the web service URL
8.2.4 Disabling elements
8.2.5 Prerendering the application
8.3 Adding progressive features
8.3.1 Installing the PWA Package
8.3.2 Caching the data URLs
8.3.3 Responding to connectivity changes
8.3.4 Testing the progressive features
8.4 Preparing the application for deployment
8.4.1 Creating the data file
8.4.2 Creating the server
8.4.3 Changing the web service URL in the repository class
8.5 Building and testing the application
8.6 Containerizing the SportsStore application
8.6.1 Installing Docker
8.6.2 Preparing the application
8.6.3 Creating the Docker container
8.6.4 Running the application
8.7 Summary
9.1 Creating a new Angular project
9.2 Understanding the project structure
9.2.1 Understanding the source code folder
9.2.2 Understanding the packages folder
Adding packages with schematics to an Angular project
9.3 Using the Angular development tools
9.3.1 Understanding the development HTTP server
9.3.2 Understanding the build process
Understanding the application bundle
Understanding the polyfills bundle
Understanding the styles bundle
9.3.3 Using the linter
9.4 Understanding how an Angular application works
9.4.1 Understanding the HTML document
9.4.2 Understanding the application bootstrap
9.4.3 Understanding the root Angular module
9.4.4 Understanding the Angular component
9.4.5 Understanding content display
9.5 Understanding the production build process
9.5.1 Running the production build
9.6 Starting development in an Angular project
9.6.1 Creating the data model
Creating the descriptive model class
Creating the data source
Creating the model repository
9.6.2 Creating a component and template
9.6.3 Configuring the root Angular module
9.7 Summary
10.1 Preparing for this chapter
10.2 Understanding Angular data flow
10.2.1 Adding user interaction
10.3 Understanding Angular change detection
10.3.1 The advantage of Angular change detection
10.3.2 The disadvantage of Angular change detection
10.4 Understanding Angular Signals
10.4.1 Using writeable signals
10.4.2 Using computed signals
10.4.3 Using effects
10.4.4 Using signals outside of components
10.5 Working with Reactive Extensions
10.5.1 Understanding observables
10.5.2 Using observables with signals
10.6 Summary
11.1 Preparing for this chapter
11.2 Understanding one-way data bindings
11.2.1 Understanding the binding target
Understanding property bindings
11.2.2 Understanding the expression
11.2.3 Understanding the brackets
11.2.4 Understanding the host element
11.3 Using the standard property and attribute bindings
11.3.1 Using the standard property binding
11.3.2 Using the string interpolation binding
11.3.3 Using the attribute binding
11.4 Setting classes and styles
11.4.1 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
11.4.2 Using the style bindings
Setting a single style property
Setting styles using the ngStyle directive
11.5 Summary
12.1 Preparing the example project
12.2 Using the built-in directives
12.2.1 Using the ngIf directive
12.2.2 Using the ngSwitch directive
Avoiding literal value problems
12.2.3 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
12.2.4 Using the ngTemplateOutlet directive
Providing context data
12.2.5 Using directives without an HTML element
12.3 Understanding one-way data binding restrictions
12.3.1 Using idempotent expressions
12.3.2 Understanding the expression context
12.4 Summary
13.1 Preparing the example project
13.2 Using the event binding
13.2.1 Using event data
13.2.2 Handling events in the component
13.2.3 Using template reference variables
13.3 Using two-way data bindings
13.3.1 Using the ngModel directive
13.4 Working with forms
13.4.1 Adding a form to the example application
13.4.2 Adding form data validation
Styling elements using validation classes
Displaying field-level validation messages
Using the component to display validation messages
13.4.3 Validating the entire form
Displaying summary validation messages
Disabling the submit button
13.4.4 Completing the form
13.5 Summary
14.1 Preparing the example project
14.2 Creating a simple attribute directive
14.2.1 Applying a custom directive
14.3 Accessing application data in a directive
14.3.1 Reading host element attributes
Using a single host element attribute
14.3.2 Creating data-bound input properties
14.3.3 Responding to input property changes
14.3.4 Requiring input property values
14.4 Creating custom events
14.4.1 Binding to a custom event
14.5 Creating host element bindings
14.6 Creating a two-way binding on the host element
14.7 Exporting a directive for use in a template variable
14.8 Summary
15.1 Preparing the example project
15.2 Creating a simple structural directive
15.2.1 Implementing the structural directive class
15.2.2 Enabling the structural directive
15.2.3 Using the concise structural directive syntax
15.3 Creating iterating structural directives
15.3.1 Providing additional context data
15.3.2 Using the concise structure syntax
15.3.3 Dealing with property-level data changes
15.3.4 Dealing with collection-level data changes
Minimizing Updates
Keeping track of views
15.4 Querying the host element content
15.4.1 Querying multiple content children
15.4.2 Receiving query change notifications
15.5 Summary
16.1 Preparing the example project
16.2 Structuring an application with components
16.2.1 Creating new components
Understanding the new application structure
16.2.2 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 components
Projecting host element content
16.2.3 Completing the component restructure
16.3 Using component styles
16.3.1 Defining external component styles
16.4 Querying template content
16.5 Summary
17.1 Preparing the example project
17.2 Understanding pipes
17.3 Creating a custom pipe
17.3.1 Registering a custom pipe
17.3.2 Applying a custom pipe
17.3.3 Combining pipes
17.3.4 Creating impure pipes
17.4 Using the built-in pipes
17.4.1 Formatting numbers
17.4.2 Formatting currency values
17.4.3 Formatting percentages
17.4.4 Formatting dates
17.4.5 Changing string case
17.4.6 Serializing data as JSON
17.4.7 Slicing data arrays
17.4.8 Formatting key-value pairs
17.4.9 Selecting values
17.4.10 Pluralizing values
17.4.11 Using the async pipe
17.5 Summary
18.1 Preparing the example project
18.2 Understanding the object distribution problem
18.2.1 Demonstrating the problem
18.2.2 Distributing objects as services using dependency injection
Preparing the service
Preparing the dependent components
Registering the service
Reviewing the dependency injection changes
18.2.3 Declaring dependencies in other building blocks
Declaring a dependency in a pipe
Declaring dependencies in directives
18.3 Understanding the test isolation problem
18.3.1 Isolating components using services and dependency injection
Preparing the services
Registering the services
Preparing the dependent component
18.4 Completing the adoption of services
18.4.1 Updating the root component and template
18.4.2 Updating the child components
18.5 Summary
19.1 Preparing the example project
19.2 Understanding the root module
19.2.1 Understanding the imports property
19.2.2 Understanding the declarations property
19.2.3 Understanding the providers property
19.2.4 Understanding the bootstrap property
19.3 Creating feature modules
19.3.1 Creating a model module
Creating the module definition
Updating the other classes in the application
Updating the root module
19.3.2 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
19.3.3 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
19.4 Summary
20.1 Starting the example project
20.1.1 Adding and configuring the Bootstrap CSS package
20.1.2 Creating the project structure
20.2 Creating the model module
20.2.1 Creating the product data type
20.2.2 Creating the data source and repository
20.2.3 Completing the model module
20.3 Creating the messages module
20.3.1 Creating the message model and service
20.3.2 Creating the component and template
20.3.3 Completing the message Module
20.4 Creating the core module
20.4.1 Creating the shared state service
20.4.2 Creating the table component
Creating the table component template
20.4.3 Creating the form component
Creating the form component template
Creating the form component styles
20.4.4 Completing the core module
20.5 Completing the project
20.6 Summary
21.1 Preparing for this chapter
21.2 Understanding the reactive forms API
21.3 Rebuilding the form using the API
21.3.1 Responding to form control changes
21.3.2 Managing control state
21.3.3 Managing control validation
21.3.4 Adding additional controls
21.4 Working with multiple form controls
21.4.1 Using a form group with a form element
21.4.2 Accessing the form group from the template
21.4.3 Displaying validation messages with a form group
21.5 Summary
22.1 Preparing for this chapter
22.2 Creating form components dynamically
22.2.1 Using a form array
22.2.2 Adding and removing form controls
22.2.3 Validating dynamically created form controls
22.2.4 Filtering the FormArray values
22.3 Creating custom form validation
22.3.1 Creating a directive for a custom validator
22.3.2 Validating across multiple fields
Improving cross-field validation
22.3.3 Performing validation asynchronously
22.4 Summary
23.1 Preparing the example project
23.1.1 Configuring the model feature module
23.1.2 Creating the data file
23.1.3 Running the example project
23.2 Understanding RESTful web services
23.3 Replacing the static data source
23.3.1 Creating the new data source service
Setting up the HTTP request
Processing the response
23.3.2 Configuring the data source
23.3.3 Using the REST data source
23.3.4 Saving and deleting data
23.4 Consolidating HTTP requests
23.5 Making cross-origin requests
23.6 Configuring request headers
23.7 Handling errors
23.7.1 Generating user-ready messages
23.7.2 Handling the errors
23.8 Summary
24.1 Preparing the example project
24.2 Getting started with routing
24.2.1 Creating a routing configuration
24.2.2 Creating the routing component
24.2.3 Updating the root module
24.2.4 Completing the Configuration
24.2.5 Adding navigation links
24.2.6 Understanding the effect of routing
24.3 Completing the routing implementation
24.3.1 Handling route changes in components
24.3.2 Using route parameters
Receiving route data with input properties
Using multiple route parameters
Using optional route parameters
24.3.3 Navigating in code
24.3.4 Receiving navigation events
24.3.5 Removing the event bindings and supporting code
24.4 Summary
25.1 Preparing the example project
25.1.1 Adding components to the project
25.2 Using wildcards and redirections
25.2.1 Using wildcards in routes
25.2.2 Using redirections in routes
25.3 Navigating within a component
25.3.1 Responding to ongoing routing changes
25.3.2 Styling links for active routes
25.3.3 Fixing the All button
25.4 Creating child routes
25.4.1 Creating the child route outlet
25.4.2 Accessing parameters from child routes
25.5 Summary
26.1 Preparing the example project
26.2 Guarding routes
26.2.1 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
26.2.2 Preventing navigation with guards
Preventing route activation
Consolidating child route guards
Preventing route deactivation
26.3 Summary
27.1 Preparing the example project
27.2 Understanding the delivery problem
27.3 Loading feature modules dynamically
27.3.1 Creating a simple feature module
27.3.2 Loading the module dynamically
Creating a route to dynamically load a module
Using a dynamically loaded module
27.3.3 Guarding dynamic modules
Applying a dynamic loading guard
27.4 Using server-side rendering
27.4.1 Installing the server-side rendering packages
27.4.2 Preparing the application
Undoing the routing configuration change
Enabling the hydration feature
Adding a platform detection service
Avoiding browser APIs
27.4.3 Building and running the SSR application
27.4.4 Enabling navigation
27.4.5 Modifying the terms guard
27.4.6 Dealing with direct navigation
27.4.7 Testing rehydration
27.5 Using prerendering
27.5.1 Preparing the application
27.5.2 Prerendering the application
27.6 Summary
28.1 Preparing for this chapter
28.1.1 Removing buttons
28.1.2 Adjusting the HTML file
28.1.3 Running the project
28.2 Using the library components
28.2.1 Using the Angular Material button directive
Adding the margin style
Importing the component module
28.2.2 Using the Angular Material table
Using the built-in table features
28.3 Matching the component library theme
28.3.1 Creating the custom component
28.3.2 Using the Angular Material theme
28.3.3 Applying the ripple effect
28.4 Summary
29.1 Preparing the example project
29.2 Running a simple unit test
29.3 Working with Jasmine
29.4 Testing an Angular component
29.4.1 Working with the TestBed class
Configuring the test bed for dependencies
29.4.2 Testing data bindings
29.4.3 Testing a component with an external template
29.4.4 Testing component events
29.4.5 Testing output properties
29.4.6 Testing input properties
29.5 Testing an Angular directive
29.6 Summary
Symbols
A
B
C
D
E
F
H
J
L
M
N
P
R
S
T
U
V
W
Pro Angular 16 - rimske.pdf
How this book is organized—a roadmap
About the code
liveBook discussion forum