Learning Angular E-Book

Aristeidis Bampakos

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 532

Veröffentlichungsjahr: 2023

Beschreibung

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 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 tutorials 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.

Leseprobe

Learning Angular

Fourth Edition

A no-nonsense guide to building web applications with Angular 15

Aristeidis Bampakos

Pablo Deeleman

BIRMINGHAM—MUMBAI

Learning Angular

Fourth Edition

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Senior Publishing Product Manager: Suman Sen

Acquisition Editor – Peer Reviews: Gaurav Gavas

Project Editor: Meenakshi Vijay

Content Development Editor: Shazeen Iqbal

Copy Editor: Safis Editing

Technical Editor: Srishty Bhardwaj

Proofreader: Safis Editing

Indexer: Hemangini Bari

Presentation Designer: Rajesh Shirsath

Developer Relations Marketing Executive: Priyadarshini Sharma

First published: April 2016

Second edition: December 2017

Third edition: September 2020

Fourth edition: February 2023

Production reference: 4260423

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80324-060-2

www.packt.com

Contributors

About the authors

Aristeidis Bampakos has over 20 years of experience in the software development industry. He is a Greek national who currently works in Athens as a Web Development Team Leader at Plex-Earth, specializing in the development of web applications using Angular.

He studied Computer Technology at the University of Portsmouth and in 2002 he was awarded the degree of Bachelor of Engineering with Second Class Honours (Upper Division). In 2004, he completed his MSc in Telecommunications Technology at Aston University. His career started as a C# .NET developer, but he saw the potential of web development and moved toward it in early 2011. He began working with AngularJS, and Angular later on, and in 2020 he was officially recognized as a Google Developer Expert (GDE) for Angular.

Aristeidis is passionate about helping the developer community learn and grow. His love for teaching has led him to become an award-winning author of 2 successful book titles about Angular (Learning Angular – 3rd edition and Angular Projects – 2nd edition), as well as an Angular Senior Tech Instructor at Code.Hub, where he nurtures aspiring Angular developers and professionals.

In his spare time, he enjoys being an occasional speaker in meetups, conferences, and podcasts, where he talks about Angular. He is currently leading the effort of making Angular accessible to the Greek development community by maintaining the open-source Greek translation of the official Angular documentation.

To my pet bunny Elpida (Hope), my writing companion in this authoring journey and my best friend during the last 10 years. R.I.P.

Pablo Deeleman has contributed to the dev community with several books on Angular since 2016, all published by Packt Publishing.

With sound expertise in front-end libraries and frameworks such as Backbone.js, Knockout.js, VueJS, React, Svelte, AngularJs, and Angular, Pablo Deeleman has developed his career since 1998 as a JavaScript engineer across a broad range of successful companies, such as Gameloft, Red Hat or Dynatrace, just to name a few. He currently works as Staff Software Engineer at Twilio, the global leader in customer engagement communications.

I’d like to thank my team at Twilio and the awesome bunch of passionate individuals that support and challenge me to become a better professional each day: Gemma Gelida, David Luna, Natalia Venditto, Adrián González, Rafael Marfil, Andreia Leite, and many more. I’d like to personally thank Aristeidis Bampakos for driving this editorial franchise to an unparalleled level of excellence.

About the reviewers

Jurgen Van de Moere is a front-end architect based in Belgium.

He began his career in 1999 and worked for more than a decade as a web developer and system engineer for large companies across Europe. In 2012, driven by his passion for web technologies, Jurgen decided to specialise in JavaScript and Angular.

Since then, he has helped many leading businesses succeed in building secure, maintainable, testable, and scalable Angular applications. In his mission to continually share his knowledge with others, Jurgen serves as a private advisor and mentor to world-renowned businesses and developers around the world.

You won’t find Jurgen in the spotlight very often as he loves to spend time with his family, reading books, and writing articles. His writings impact thousands of developers a day and are regularly featured by some of the leading publishers in the tech industry.

Jurgen is actively involved in growing the Belgian Angular community as co-organizer of NG-BE, Belgium’s first ever Angular conference. In 2016, he was awarded through the Google GDE program as the first ever Google Developer Expert in Belgium for web technologies.

You can reach Jurgen at [email protected], follow him on Twitter at https://twitter.com/jvandemo or read his articles on https://jvandemo.com.

Santosh Yadav works as a Senior Software Engineer at Celonis and is a GDE for Angular, GitHub Star, and an Auth0 Ambassador. He loves contributing to Angular and its ecosystem. He is co-founder of This is Learning. He is also the author of the Ngx-Builders package and part of the NestJsAddOns core Team. He is also running This is Tech Talks talk show, where he invites industry experts to discuss different technologies. You can find him on Twitter (@SantoshYadavDev).

I would like to dedicate this book to my wife, Rekha, and daughter, Hiya. Also, I would like to thank Lars Gyrup, Brink Nielsen, Tanay Pant, Anuj Tripathi, Sajith Karad, and my teammates at Celonis for all the help they provided through the year and for keeping me motivated.

Join our community on Discord

Join our community’s Discord space for discussions with the author and other readers:

https://packt.link/LearningAngular4e

Contents

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Share your thoughts

Building Your First Angular Application

Technical requirements

What is Angular?

Why choose Angular?

Cross-platform

Tooling

Onboarding

Who uses Angular?

Setting up the Angular CLI workspace

Prerequisites

Node.js

npm

Git

Installing the Angular CLI

CLI commands

Creating a new project

Structure of an Angular application

Components

Modules

Template syntax

VS Code tooling

Angular Language Service

Angular Snippets

Nx Console

Material icon theme

EditorConfig

Angular Evergreen

Rename Angular Component

Summary

Introduction to TypeScript

The history of TypeScript

The benefits of TypeScript

Introducing TypeScript resources

The official website

The official wiki documentation

Types

String

Declaring variables

The let keyword

The const keyword

Number

Boolean

Array

Dynamic typing with no type

Custom types

Enum

Void

Type inference

Functions, lambdas, and execution flow

Annotating types in functions

Function parameters in TypeScript

Optional parameters

Default parameters

Rest parameters

Function overloading

Arrow functions

Common TypeScript features

Spread parameter

Template strings

Generics

Optional chaining

Nullish coalescing

Classes, interfaces, and inheritance

Anatomy of a class

Constructor parameters with accessors

Interfaces

Class inheritance

Decorators

Class decorators

Extending a class decorator

Property decorators

Method decorators

Parameter decorator

Advanced types

Partial

Record

Union

Modules

Summary

Join our community on Discord

Organizing Application into Modules

Technical requirements

Introducing Angular modules

Creating our first module

Group application features into modules

Add a module in the main module

Exposing feature modules

Organizing modules by type

Leveraging Angular built-in modules

Summary

Enabling User Experience with Components

Technical requirements

Creating our first component

The structure of an Angular component

Registering components with modules

Creating standalone components

Interacting with the template

Loading the component template

Displaying data from the component class

Styling the component

Getting data from the template

Component inter-communication

Passing data using an input binding

Listening for events using an output binding

Emitting data through custom events

Local reference variables in templates

Encapsulating CSS styling

Deciding on a change detection strategy

Introducing the component lifecycle

Performing component initialization

Cleaning up component resources

Detecting input binding changes

Accessing child components

Summary

Join our community on Discord

Enrich Applications Using Pipes and Directives

Technical requirements

Introducing directives

Transforming elements using directives

Displaying data conditionally

Iterating through data

Switching through templates

Manipulating data with pipes

Building custom pipes

Sorting data using pipes

Change detection with pipes

Creating standalone pipes

Building custom directives

Displaying dynamic data

Property binding and responding to events

Creating components dynamically

Toggling templates dynamically

Creating standalone directives

Summary

Managing Complex Tasks with Services

Technical requirements

Introducing Angular DI

Creating our first Angular service

Providing dependencies across the application

Injecting services in the component tree

Sharing dependencies through components

Root and component injectors

Sandboxing components with multiple instances

Restricting DI down the component tree

Restricting provider lookup

Overriding providers in the injector hierarchy

Overriding service implementation

Providing services conditionally

Transforming objects in Angular services

Summary

Join our community on Discord

Being Reactive Using Observables and RxJS

Technical requirements

Strategies for handling asynchronous information

Shifting from callback hell to promises

Observables in a nutshell

Reactive programming in Angular

The RxJS library

Creating observables

Transforming observables

Higher-order observables

Subscribing to observables

Unsubscribing from observables

Destroying a component

Using the async pipe

Summary

Communicating with Data Services over HTTP

Technical requirements

Communicating data over HTTP

Introducing the Angular HTTP client

Setting up a backend API

Handling CRUD data in Angular

Fetching data through HTTP

Modifying data through HTTP

Adding new products

Updating product price

Removing a product

Authentication and authorization with HTTP

Authenticating with backend API

Authorizing user access

Authorizing HTTP requests

Summary

Join our community on Discord

Navigating through Application with Routing

Technical requirements

Introducing the Angular router

Specifying a base path

Importing the router module

Configuring the router

Rendering components

Creating an Angular application with routing

Scaffolding an Angular application with routing

Configuring routing in our application

Creating feature routing modules

Handling unknown route paths

Setting a default path

Navigating imperatively to a route

Decorating router links with styling

Passing parameters to routes

Building a detail page using route parameters

Reusing components using child routes

Taking a snapshot of route parameters

Filtering data using query parameters

Enhancing navigation with advanced features

Controlling route access

Preventing navigation away from a route

Prefetching route data

Lazy-loading routes

Protecting a lazy-loaded module

Lazy loading components

Summary

Collecting User Data with Forms

Technical requirements

Introducing forms to web apps

Data binding with template-driven forms

Using reactive patterns in Angular forms

Interacting with reactive forms

Providing form status feedback

Creating nesting form hierarchies

Creating elegant reactive forms

Validating controls in a reactive way

Building a custom validator

Modifying forms dynamically

Manipulating form data

Watching state changes and being reactive

Summary

Join our community on Discord

Introduction to Angular Material

Technical requirements

Introducing Material Design

Introducing Angular Material

Adding Angular Material to your application

Adding Angular Material controls

Theming Angular Material components

Adding core UI controls

Buttons

Form controls

Input

Autocomplete

Select

Checkbox

Date picker

Navigation

Layout

List

Grid list

Popups and modal dialogs

Creating a simple dialog

Configuring a dialog

Getting data back from a dialog

Data table

Table

Sort table

Pagination

Integration controls

Introducing the Angular CDK

Clipboard

Drag and drop

Summary

Unit Test an Angular Application

Technical requirements

Why do we need tests?

The anatomy of a unit test

Introducing unit tests in Angular

Testing components

Testing with dependencies

Replacing the dependency with a stub

Spying on the dependency method

Testing asynchronous services

Testing with inputs and outputs

Testing with a component harness

Testing services

Testing a synchronous method

Testing an asynchronous method

Testing services with dependencies

Testing pipes

Testing directives

Testing forms

Summary

Join our community on Discord

Bringing an Application to Production

Technical requirements

Building an Angular application

Building for different environments

Building for the window object

Limiting the application bundle size

Optimizing the application bundle

Deploying an Angular application

Summary

Handling Errors and Application Debugging

Technical requirements

Handling application errors

Catching HTTP request errors

Creating a global error handler

Responding to 401 Unauthorized error

Demystifying framework errors

Debugging Angular applications

Using the Console API

Adding breakpoints in source code

Using Angular DevTools

Summary

Join our community on Discord

Other Books You May Enjoy

Index

Landmarks

Cover

Index

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:

Scan the QR code or visit the link below

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

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

2

Introduction to TypeScript

As we learned in the previous chapter, where we built our very first Angular application, the code of an Angular project is written in TypeScript. Writing in TypeScript and leveraging its static typing gives us a remarkable advantage over other scripting languages. This chapter is not a thorough overview of the TypeScript language. Instead, we’ll focus on the core elements and study them in detail on our journey through Angular. The good news is that TypeScript is not all that complex, and we will manage to cover most of its relevant parts.

In this chapter, we’re going to cover the following main topics:

The history of TypeScriptTypesFunctions, lambdas, and execution flowCommon TypeScript featuresDecorators Advanced typesModules