Preface

As Angular continues to reign as one of the top JavaScript frameworks, more developers are seeking out the best way to get started with this extraordinarily flexible and secure framework. Learning Angular, now in its fourth edition, will show you how you can use it to achieve cross-platform high performance with the latest web techniques, extensive integration with modern web standards, and integrated development environments (IDEs).

The book is especially useful for those new to Angular and will help you to get to grips with the bare bones of the framework needed to start developing Angular apps. You’ll learn how to develop apps by harnessing the power of the Angular command-line interface (CLI), write unit tests, style your apps by following the Material Design guidelines, and finally, deploy them to a hosting provider.

Updated for Angular 15, this new edition covers lots of new features and practices that address the current frontend web development challenges. You’ll find a new dedicated chapter on observables and RxJS, more on error handling and debugging in Angular, and new real-life examples.

By the end of this book, you’ll not only be able to create Angular applications with TypeScript from scratch, but also enhance your coding skills with best practices.

Who this book is for

This book is for JavaScript and full-stack developers dipping their feet for the first time in to the world of frontend development with Angular, as well as those migrating to the Angular framework to build professional web applications. You’ll need prior exposure to JavaScript and a solid foundation in the basics of web programming before you get started with this book.

What this book covers

Chapter 1, Building Your First Angular Application, shows how to set up the development environment by installing the Angular CLI and explains how to use schematics (commands) to automate tasks such as code generation and application building.

We will create a new simple application using the Angular CLI and build it. We will also learn about some of the most useful Angular tools that are available on Visual Studio Code.

Chapter 2, Introduction to TypeScript, explains what is TypeScript, the language that is used when creating Angular applications, and covers the most basic building blocks, such as types, template strings, lambdas, and classes. We will learn how to use decorators that are widely used in Angular classes and modules. We will take a look at some of the advanced types and the latest features of the language.

Chapter 3, Organizing Application into Modules, explains what modules are in Angular and how they differ from modules in TypeScript. We will learn about the most common modules that we use in Angular and discuss the purposes of the different types of modules.

Chapter 4, Enabling User Experience with Components, explains how a component is connected to its template and how to use a TypeScript decorator to configure it. We will take a look at how components communicate with each other by passing data from one component to another using input and output bindings and learn about the different strategies for detecting changes in a component. We will also learn how to create standalone components.

Chapter 5, Enrich Applications Using Pipes and Directives, covers the built-in directives and pipes. We will build our own custom pipe and directive and use them in a sample application that demonstrates their use. We will also learn the difference between attribute and structural directives.

Chapter 6, Managing Complex Tasks with Services, explains how the dependency injection mechanism works, how to create and use services in components, and how we can create providers in an Angular application.

Chapter 7, Being Reactive Using Observables and RxJS, discusses reactive programming and how we can use observables in the context of an Angular application through the RxJS library. We will also take a tour of all the common RxJS operators that are used in an Angular application.

Chapter 8, Communicating with Data Services over HTTP, explains how to interact with a remote backend API and perform CRUD operations with data in Angular. We will also investigate how to set additional headers to an HTTP request and intercept such a request to act before sending the request or upon completion.

Chapter 9, Navigate through Application with Routing, explains how to use the Angular router in order to activate different parts of an Angular application. We will find out how to pass parameters through the URL and how we can break an application into routing modules that can be laz ily loaded. We will then learn how to guard against our components and how to prepare data prior to initialization of the component.

Chapter 10, Collecting User Data with Forms, explains how to use Angular reactive forms in order to integrate HTML forms and how to set them up using FormGroup and FormControl. We will track the interaction of the user in the form and validate input fields.

Chapter 11, Introduction to Angular Material, discusses how to integrate Google Material Design guidelines in to an Angular application using a library called Angular Material that is developed by the Angular team. We will take a look at some of the core components of the library and their usage. We will discuss the themes that are bundled with the library and how to install them.

Chapter 12, Unit Test an Angular Application, explains how to test Angular artifacts and override them in a test, examines the different parts of a test, and explains which parts of a component should be tested.

Chapter 13, Bringing Application to Production, discusses the hosting providers that are supported by the Angular CLI. We will perform build optimizations prior to deployment, and we will use the Angular CLI to deploy to GitHub Pages.

Chapter 14, Handling Errors and Application Debugging, explains how to handle different types of errors in an Angular application and understand errors that come from the framework itself. We will learn how to debug an Angular application using and how to profile it using Angular DevTools.

To get the most out of this book

• You will need a version of Angular 15 installed on your computer, preferably the latest one. All code examples have been tested using Angular 15.0.0 on Windows, but they should work with any future release of Angular 15 as well.
• If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

The code bundle for the book is hosted on GitHub at https://github.com/PacktPublishing/Learning-Angular-Fourth-Edition. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://packt.link/af51s.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. For example: “When we run the preceding command in the src\app\products folder, it will create the sort.pipe.ts file and its corresponding unit test file, sort.pipe.spec.ts."

A block of code is set as follows:

let distance: any;
distance = '1000km';
distance = 1000;
const distances: any[] = ['1000km', 1000];

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

const basket: any = new FruitBasket();

Any command-line input or output is written as follows:

ng generate interface product 

Bold: Indicates a new term, an important word, or words that you see on the screen. For instance, words in menus or dialog boxes appear in the text like this. For example: “There are two categories of pipes: pure and impure.”

Warnings or important notes appear like this.

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [e-mail] and mention the book’s title in the subject of your message. If you have questions about any aspect of this book, please email us at [e-mail].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you reported this to us. Please visit http://www.packtpub.com/submit-errata, click Submit Errata, and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit http://authors.packtpub.com.

Share your thoughts

Once you’ve read Learning Angular, Fourth Edition, we’d love to hear your thoughts! Scan the QR code below to go straight to the Amazon review page for this book and share your feedback.

https://packt.link/r/1803240601

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803240602

2. Submit your proof of purchase
3. That’s it! We’ll send your free PDF and other benefits to your email directly