book

Pro Angular 16

Name: Pro Angular 16
Author: Adam Freeman
ISBN: 9781633436695

by Adam Freeman

May 2024

Beginner to intermediate

875 pages

23h 11m

English

Manning Publications

Read now

Unlock full access

Pro Angular 16
contents
preface
about this book
How this book is organized—a roadmapAbout the codeliveBook discussion forum
about the author
about the cover illustration
1 Getting ready
This chapter covers1.1 Understanding where Angular excels1.1.1 Understanding round-trip and single-page applications1.2 Comparing Angular to React1.3 What do you need to know?1.4 What is the structure of this book?1.4.1 Part 1: Getting started with Angular1.4.2 Part 2: Angular in detail1.4.3 Part 3: Advanced Angular features1.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 Jumping right in
This chapter covers2.1 Getting ready2.1.1 Installing Node.js2.1.2 Installing an editor2.1.3 Installing the Angular development package2.1.4 Choosing a browser2.2 Creating an Angular project2.2.1 Opening the project for editing2.2.2 Starting the Angular development tools2.3 Adding features to the application2.3.1 Creating a data model2.3.2 Displaying data to the user2.3.3 Updating the component2.4 Styling the application content2.4.1 Applying Angular Material components2.4.2 Defining the spacer CSS style2.5 Displaying the list of to-do items2.5.1 Defining additional styles2.6 Creating a two-way data binding2.7 Filtering completed to-do items2.8 Adding to-do items2.9 Finishing up2.10 Summary
3 Primer, part 1
This chapter covers3.1 Preparing the example project3.2 Understanding HTML3.2.1 Understanding void elements3.2.2 Understanding attributes3.2.3 Applying attributes without values3.2.4 Quoting literal values in attributes3.2.5 Understanding element content3.2.6 Understanding the document structure3.3 Understanding CSS and the Bootstrap framework3.4 Understanding TypeScript/JavaScript3.4.1 Understanding the TypeScript workflow3.4.2 Understanding JavaScript vs. TypeScript3.4.3 Understanding the basic TypeScript/JavaScript features3.4.4 Defining variables and constants3.4.5 Dealing with unassigned and null values3.4.6 Using the JavaScript primitive types3.4.7 Using the JavaScript operators3.5 Summary
4 Primer, part 2
This chapter covers4.1 Preparing for this chapter4.2 Defining and using functions4.2.1 Defining optional function parameters4.2.2 Defining default parameter values4.2.3 Defining rest parameters4.2.4 Defining functions that return results4.2.5 Using functions as arguments to other functions4.3 Working with arrays4.3.1 Reading and modifying the contents of an array4.3.2 Enumerating the contents of an array4.3.3 Using the spread operator4.3.4 Using the built-in array methods4.4 Working with objects4.4.1 Understanding literal object types4.4.2 Defining classes4.4.3 Checking object types4.5 Working with JavaScript modules4.5.1 Creating and using modules4.6 Summary

5 SportsStore: A real application
This chapter covers5.1 Preparing the project5.1.1 Installing the additional NPM packages5.1.2 Preparing the RESTful web service5.1.3 Preparing the HTML file5.1.4 Creating the folder structure5.1.5 Running the example application5.1.6 Starting the RESTful web service5.2 Preparing the Angular project features5.2.1 Updating the root component5.2.2 Inspecting the root module5.2.3 Inspecting the bootstrap file5.3 Starting the data model5.3.1 Creating the model classes5.3.2 Creating the dummy data source5.3.3 Creating the model repository5.3.4 Creating the feature module5.4 Starting the store5.4.1 Creating the store component and template5.4.2 Creating the store feature module5.4.3 Updating the root component and root module5.5 Adding store features5.5.1 Displaying the product details5.5.2 Adding category selection5.5.3 Adding product pagination5.5.4 Creating a custom directive5.6 Summary
6 SportsStore: orders and checkout
This chapter covers6.1 Preparing the example application6.2 Creating the cart6.2.1 Creating the cart model6.2.2 Creating the cart summary components6.2.3 Integrating the cart into the store6.3 Adding URL routing6.3.1 Creating the cart detail and checkout components6.3.2 Creating and applying the routing configuration6.3.3 Navigating through the application6.3.4 Guarding the routes6.4 Completing the cart detail feature6.5 Processing orders6.5.1 Extending the model6.5.2 Collecting the order details6.6 Using the RESTful web service6.6.1 Applying the data source6.7 Summary
7 SportsStore: administration
This chapter covers7.1 Preparing the example application7.1.1 Creating the module7.1.2 Configuring the URL routing system7.1.3 Navigating to the administration URL7.2 Implementing authentication7.2.1 Understanding the authentication system7.2.2 Extending the data source7.2.3 Creating the authentication service7.2.4 Enabling authentication7.3 Extending the data source and repositories7.4 Installing the component library7.5 Creating the administration feature structure7.5.1 Creating the placeholder components7.5.2 Preparing the common content and the feature module7.5.3 Implementing the product table feature7.5.4 Implementing the product editor7.5.5 Implementing the order table feature7.6 Summary
8 SportsStore: deployment
This chapter covers8.1 Preparing the example application8.2 Using pre-rendering8.2.1 Installing the SSR packages8.2.2 Creating the platform service8.2.3 Changing the web service URL8.2.4 Disabling elements8.2.5 Prerendering the application8.3 Adding progressive features8.3.1 Installing the PWA Package8.3.2 Caching the data URLs8.3.3 Responding to connectivity changes8.3.4 Testing the progressive features8.4 Preparing the application for deployment8.4.1 Creating the data file8.4.2 Creating the server8.4.3 Changing the web service URL in the repository class8.5 Building and testing the application8.6 Containerizing the SportsStore application8.6.1 Installing Docker8.6.2 Preparing the application8.6.3 Creating the Docker container8.6.4 Running the application8.7 Summary
9 Understanding Angular projects and tools
This chapter covers9.1 Creating a new Angular project9.2 Understanding the project structure9.2.1 Understanding the source code folder9.2.2 Understanding the packages folder9.3 Using the Angular development tools9.3.1 Understanding the development HTTP server9.3.2 Understanding the build process9.3.3 Using the linter9.4 Understanding how an Angular application works9.4.1 Understanding the HTML document9.4.2 Understanding the application bootstrap9.4.3 Understanding the root Angular module9.4.4 Understanding the Angular component9.4.5 Understanding content display9.5 Understanding the production build process9.5.1 Running the production build9.6 Starting development in an Angular project9.6.1 Creating the data model9.6.2 Creating a component and template9.6.3 Configuring the root Angular module9.7 Summary
10 Angular reactivity and signals
This chapter covers10.1 Preparing for this chapter10.2 Understanding Angular data flow10.2.1 Adding user interaction10.3 Understanding Angular change detection10.3.1 The advantage of Angular change detection10.3.2 The disadvantage of Angular change detection10.4 Understanding Angular Signals10.4.1 Using writeable signals10.4.2 Using computed signals10.4.3 Using effects10.4.4 Using signals outside of components10.5 Working with Reactive Extensions10.5.1 Understanding observables10.5.2 Using observables with signals10.6 Summary
11 Using Data Bindings
This chapter covers11.1 Preparing for this chapter11.2 Understanding one-way data bindings11.2.1 Understanding the binding target11.2.2 Understanding the expression11.2.3 Understanding the brackets11.2.4 Understanding the host element11.3 Using the standard property and attribute bindings11.3.1 Using the standard property binding11.3.2 Using the string interpolation binding11.3.3 Using the attribute binding11.4 Setting classes and styles11.4.1 Using the class bindings11.4.2 Using the style bindings11.5 Summary
12 Using the built-in directives
This chapter covers12.1 Preparing the example project12.2 Using the built-in directives12.2.1 Using the ngIf directive12.2.2 Using the ngSwitch directive12.2.3 Using the ngFor directive12.2.4 Using the ngTemplateOutlet directive12.2.5 Using directives without an HTML element12.3 Understanding one-way data binding restrictions12.3.1 Using idempotent expressions12.3.2 Understanding the expression context12.4 Summary
13 Using events and forms
This chapter covers13.1 Preparing the example project13.2 Using the event binding13.2.1 Using event data13.2.2 Handling events in the component13.2.3 Using template reference variables13.3 Using two-way data bindings13.3.1 Using the ngModel directive13.4 Working with forms13.4.1 Adding a form to the example application13.4.2 Adding form data validation13.4.3 Validating the entire form13.4.4 Completing the form13.5 Summary
14 Creating attribute directives
This chapter covers14.1 Preparing the example project14.2 Creating a simple attribute directive14.2.1 Applying a custom directive14.3 Accessing application data in a directive14.3.1 Reading host element attributes14.3.2 Creating data-bound input properties14.3.3 Responding to input property changes14.3.4 Requiring input property values14.4 Creating custom events14.4.1 Binding to a custom event14.5 Creating host element bindings14.6 Creating a two-way binding on the host element14.7 Exporting a directive for use in a template variable14.8 Summary
15 Creating structural directives
This chapter covers15.1 Preparing the example project15.2 Creating a simple structural directive15.2.1 Implementing the structural directive class15.2.2 Enabling the structural directive15.2.3 Using the concise structural directive syntax15.3 Creating iterating structural directives15.3.1 Providing additional context data15.3.2 Using the concise structure syntax15.3.3 Dealing with property-level data changes15.3.4 Dealing with collection-level data changes15.4 Querying the host element content15.4.1 Querying multiple content children15.4.2 Receiving query change notifications15.5 Summary
16 Understanding components
This chapter covers16.1 Preparing the example project16.2 Structuring an application with components16.2.1 Creating new components16.2.2 Defining templates16.2.3 Completing the component restructure16.3 Using component styles16.3.1 Defining external component styles16.4 Querying template content16.5 Summary
17 Using and creating pipes
This chapter covers17.1 Preparing the example project17.2 Understanding pipes17.3 Creating a custom pipe17.3.1 Registering a custom pipe17.3.2 Applying a custom pipe17.3.3 Combining pipes17.3.4 Creating impure pipes17.4 Using the built-in pipes17.4.1 Formatting numbers17.4.2 Formatting currency values17.4.3 Formatting percentages17.4.4 Formatting dates17.4.5 Changing string case17.4.6 Serializing data as JSON17.4.7 Slicing data arrays17.4.8 Formatting key-value pairs17.4.9 Selecting values17.4.10 Pluralizing values17.4.11 Using the async pipe17.5 Summary
18 Using services
18.1 Preparing the example project18.2 Understanding the object distribution problem18.2.1 Demonstrating the problem18.2.2 Distributing objects as services using dependency injection18.2.3 Declaring dependencies in other building blocks18.3 Understanding the test isolation problem18.3.1 Isolating components using services and dependency injection18.4 Completing the adoption of services18.4.1 Updating the root component and template18.4.2 Updating the child components18.5 Summary
19 Using and creating modules
This chapter covers19.1 Preparing the example project19.2 Understanding the root module19.2.1 Understanding the imports property19.2.2 Understanding the declarations property19.2.3 Understanding the providers property19.2.4 Understanding the bootstrap property19.3 Creating feature modules19.3.1 Creating a model module19.3.2 Creating a utility feature module19.3.3 Creating a feature module with components19.4 Summary
20 Creating the example project
20.1 Starting the example project20.1.1 Adding and configuring the Bootstrap CSS package20.1.2 Creating the project structure20.2 Creating the model module20.2.1 Creating the product data type20.2.2 Creating the data source and repository20.2.3 Completing the model module20.3 Creating the messages module20.3.1 Creating the message model and service20.3.2 Creating the component and template20.3.3 Completing the message Module20.4 Creating the core module20.4.1 Creating the shared state service20.4.2 Creating the table component20.4.3 Creating the form component20.4.4 Completing the core module20.5 Completing the project20.6 Summary
21 Using the forms API, part 1
This chapter covers21.1 Preparing for this chapter21.2 Understanding the reactive forms API21.3 Rebuilding the form using the API21.3.1 Responding to form control changes21.3.2 Managing control state21.3.3 Managing control validation21.3.4 Adding additional controls21.4 Working with multiple form controls21.4.1 Using a form group with a form element21.4.2 Accessing the form group from the template21.4.3 Displaying validation messages with a form group21.5 Summary
22 Using the forms API, part 2
This chapter covers22.1 Preparing for this chapter22.2 Creating form components dynamically22.2.1 Using a form array22.2.2 Adding and removing form controls22.2.3 Validating dynamically created form controls22.2.4 Filtering the FormArray values22.3 Creating custom form validation22.3.1 Creating a directive for a custom validator22.3.2 Validating across multiple fields22.3.3 Performing validation asynchronously22.4 Summary
23 Making HTTP Requests
This chapter covers23.1 Preparing the example project23.1.1 Configuring the model feature module23.1.2 Creating the data file23.1.3 Running the example project23.2 Understanding RESTful web services23.3 Replacing the static data source23.3.1 Creating the new data source service23.3.2 Configuring the data source23.3.3 Using the REST data source23.3.4 Saving and deleting data23.4 Consolidating HTTP requests23.5 Making cross-origin requests23.6 Configuring request headers23.7 Handling errors23.7.1 Generating user-ready messages23.7.2 Handling the errors23.8 Summary
24 Routing and navigation: part 1
This chapter covers24.1 Preparing the example project24.2 Getting started with routing24.2.1 Creating a routing configuration24.2.2 Creating the routing component24.2.3 Updating the root module24.2.4 Completing the Configuration24.2.5 Adding navigation links24.2.6 Understanding the effect of routing24.3 Completing the routing implementation24.3.1 Handling route changes in components24.3.2 Using route parameters24.3.3 Navigating in code24.3.4 Receiving navigation events24.3.5 Removing the event bindings and supporting code24.4 Summary
25 Routing and navigation: part 2
25.1 Preparing the example project25.1.1 Adding components to the project25.2 Using wildcards and redirections25.2.1 Using wildcards in routes25.2.2 Using redirections in routes25.3 Navigating within a component25.3.1 Responding to ongoing routing changes25.3.2 Styling links for active routes25.3.3 Fixing the All button25.4 Creating child routes25.4.1 Creating the child route outlet25.4.2 Accessing parameters from child routes25.5 Summary
26 Routing and navigation: part 3
This chapter covers26.1 Preparing the example project26.2 Guarding routes26.2.1 Delaying navigation with a resolver26.2.2 Preventing navigation with guards26.3 Summary
27 Optimizing application delivery
This chapter covers27.1 Preparing the example project27.2 Understanding the delivery problem27.3 Loading feature modules dynamically27.3.1 Creating a simple feature module27.3.2 Loading the module dynamically27.3.3 Guarding dynamic modules27.4 Using server-side rendering27.4.1 Installing the server-side rendering packages27.4.2 Preparing the application27.4.3 Building and running the SSR application27.4.4 Enabling navigation27.4.5 Modifying the terms guard27.4.6 Dealing with direct navigation27.4.7 Testing rehydration27.5 Using prerendering27.5.1 Preparing the application27.5.2 Prerendering the application27.6 Summary
28 Working with component libraries
This chapter covers28.1 Preparing for this chapter28.1.1 Removing buttons28.1.2 Adjusting the HTML file28.1.3 Running the project28.2 Using the library components28.2.1 Using the Angular Material button directive28.2.2 Using the Angular Material table28.3 Matching the component library theme28.3.1 Creating the custom component28.3.2 Using the Angular Material theme28.3.3 Applying the ripple effect28.4 Summary
29 Angular unit testing
This chapter covers29.1 Preparing the example project29.2 Running a simple unit test29.3 Working with Jasmine29.4 Testing an Angular component29.4.1 Working with the TestBed class29.4.2 Testing data bindings29.4.3 Testing a component with an external template29.4.4 Testing component events29.4.5 Testing output properties29.4.6 Testing input properties29.5 Testing an Angular directive29.6 Summary

Overview

Get Pro Angular 16, the most comprehensive guide to the Angular web framework available.

Thousands of web developers have relied on Adam Freeman’s Pro Angular series to get the most out of the Angular framework. Now in this revised sixth edition, Adam takes you from Angular’s basic components to its most complex functions, highlighting common pitfalls and new features such as signals.

In this thoroughly updated bestseller, you’ll learn how to:

Set up Angular dev tools and create projects
Use features such as components, directives, services, and pipes
Manage data changes with signals
Navigate app features with URL routing
Optimize Angular apps with pre-rendering and server-side rendering
Use popular component libraries

Pro Angular 16 gives you everything you need to build Angular apps that are easy to test, easy to maintain, and easy to extend and scale. You’ll start with the basics—plus a refresher on HTML and TypeScript. You’ll quickly move on to explore Angular’s built-in functionalities and customization options, then dive into advanced features like asynchronous HTTP requests and component libraries.

About the Technology
Angular is a powerful professional web framework suitable for building everything from lightweight prototypes to full-featured business applications. Created by Google and honed to perfection by millions of developers worldwide, Angular helps you deliver fast, predictable results when it counts.

About the Book
Now in its sixth edition, Pro Angular 16 shows you the path to Angular mastery. This thoroughly revised book helps you build a toolbox of Angular skills, from directives and components to creating services and optimizing application delivery. Throughout, you’ll use your skills to build a professional-level project—a SportStore e-commerce complete with checkout, administration, and deployment. Along the way, you’ll pick up some great TypeScript techniques that will boost your web dev productivity.

What's Inside

Set up Angular dev tools and create projects
Manage data changes with signals
Navigate app features with URL routing
Use popular component libraries

About the Reader
For web developers who know basic JavaScript and HTML.

About the Author
Adam Freeman has written over fifty bestselling books on software development. He has held numerous senior IT positions, most recently as CTO and COO of a global bank.

Quotes

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781633436695Publisher Support Other Publisher Website Purchase Link

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills