Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Learning Angular
Learning Angular

Learning Angular: A practical guide to building web applications with modern Angular , Fifth Edition

Arrow left icon
Profile Icon Aristeidis Bampakos
Arrow right icon
$22.99 $33.99
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (6 Ratings)
eBook Jan 2025 486 pages 5th Edition
eBook
$22.99 $33.99
Paperback
$41.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Aristeidis Bampakos
Arrow right icon
$22.99 $33.99
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (6 Ratings)
eBook Jan 2025 486 pages 5th Edition
eBook
$22.99 $33.99
Paperback
$41.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$22.99 $33.99
Paperback
$41.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Learning Angular

Building Your First Angular Application

Web development has undergone huge growth during the last decade. Frameworks, libraries, and tools have emerged that enable developers to build great web applications. Angular has paved the way by creating a framework focusing on application performance, development ergonomics, and modern web techniques.

Before developing Angular applications, we need to learn some basic but essential things to have a great experience with the Angular framework. One of the primary things we should know is what Angular is and why we should use it for web development. We will also take a tour in this chapter of Angular history to understand how the framework has evolved.

Another important but sometimes challenging introductory topic is setting up our development environment. It must be done at the beginning of a project and getting this right early can reduce friction as our application grows. Therefore, a large part of this chapter is dedicated to the Angular CLI, a tool developed by the Angular team that provides scaffolding and automation tasks in an Angular application, eliminating configuration boilerplate and enabling developers to focus on the coding process. We will use the Angular CLI to create our first application from scratch, get a feel for the anatomy of an Angular application, and take a sneak peek at how Angular works under the hood.

Working on an Angular project without help from development tools, such as an Integrated Development Environment (IDE), can be painful. Our favorite code editor can provide an agile development workflow that includes compilation at runtime, static type checking, introspection, code completion, and visual assistance to debug and build our application. We will highlight some of the most popular tools in the Angular ecosystem in this chapter, such as Angular DevTools and Visual Studio Code (VSCode).

To sum up, here are the main topics that we will explore in this chapter:

  • What is Angular?
  • Why choose Angular?
  • Setting up the Angular CLI workspace
  • The structure of an Angular application
  • Angular tooling

What is Angular?

Angular is a web framework written in the TypeScript language and includes a CLI, a language service, a debugging tool, and a rich collection of first-party libraries.

Libraries included in the Angular framework provided out of the box are called first-party libraries.

Angular enables developers to build scalable web applications with TypeScript, a strict syntactic superset of JavaScript, which we will learn about in Chapter 2, Introduction to TypeScript.

The official Angular documentation can be found at https://angular.dev.

The official Angular documentation is the most up-to-date resource for Angular development. It’s preferable to use it over other external resources while developing with Angular.

Google created Angular. The first version, 1.0, was released in 2012 and was called AngularJS. AngularJS was a JavaScript framework, and web applications built with it were written in JavaScript.

In 2016, the Angular team decided to make a revolutionary change in AngularJS. They collaborated with the TypeScript team at Microsoft and introduced the TypeScript language into the framework. The next version of the framework, 2.0, was written in TypeScript and rebranded as Angular with a different logo than AngularJS.

In 2022, Angular entered a new era of evolutionary advancements known as the Angular Renaissance. During that period, the framework picked up momentum in web development by introducing major innovations focused on enhancing the Developer Experience (DX) and optimizing application performance, such as:

  • A simple and modern approach to authoring Angular applications
  • Improved reactivity patterns to manage application state efficiently
  • The integration of Server-Side Rendering (SSR) techniques to improve performance

A major milestone in the Angular Renaissance era was Angular 17, when the Angular team decided to rebrand the framework with a new logo and colors, reflecting the recent changes and setting the vision for future advancements.

In this book, we will cover Angular 19, the latest major stable version of the Angular framework. AngularJS reached the end of its life in 2022, and it is no longer supported and maintained by the Angular team.

Angular is based on the most modern web standards and supports all the evergreen browsers. You can find more details about the specific version support of each browser at https://angular.dev/reference/versions#browser-support.

In the following section, we will learn the benefits of choosing Angular for web development.

Why choose Angular?

The power of the Angular framework is based on the combination of the following characteristics:

  • The main pillars of the framework:
    • Cross-platform
    • Incredible tooling
    • Easy onboarding
  • The usage of Angular worldwide:
    • An amazing community
    • Battle-tested against Google products

In the following sections, we will examine each characteristic in more detail.

Cross-platform

Angular applications can run on different platforms: web, server, desktop, and mobile. Angular can run natively only on the web because it is a web framework; however, it is open-source and is backed by incredible tooling that enables the framework to run on the remaining three using the following tools:

  • Angular SSR: Renders Angular applications server-side
  • Angular service worker: Enables Angular applications to run as Progressive Web Applications (PWAs) that can execute in desktop and native mobile environments
  • Ionic/NativeScript: Allows us to build mobile applications using Angular

The next pillar of the framework describes the tooling available in the Angular ecosystem.

Tooling

The Angular team has built two great tools that make Angular development easy and fun:

  • Angular CLI: A command-line interface that allows us to work with Angular projects, from scaffolding to testing and deployment
  • Angular DevTools: A browser extension that enables us to inspect and profile Angular applications from the comfort of our browser

The Angular CLI is the de facto solution to work with Angular applications. It allows the developer to focus on writing application code, eliminating the boilerplate of configuration tasks such as scaffolding, building, testing, and deploying an Angular application.

Onboarding

It is simple and easy to start with Angular development because when we install Angular, we also get a rich collection of first-party libraries out of the box, including:

  • An Angular HTTP client to communicate with external resources over HTTP
  • Angular forms to create HTML forms to collect input and data from users
  • An Angular router to perform in-app navigations

The preceding libraries are installed by default when we create a new Angular application using the Angular CLI. However, they are only used in our application if we import them explicitly into our project.

The usage of Angular worldwide

Many companies use Angular for their websites and web applications. The website https://www.madewithangular.com contains an extensive list of those companies, including some popular ones.

Additionally, Angular is used in thousands of projects by Google and by millions of developers worldwide. The fact that Angular is already used internally at Google is a crucial factor in the reliability of the framework. Every new version of Angular is thoroughly tested in those projects before becoming available to the public. The testing process helps the Angular team catch bugs early and delivers a top-quality framework to the rest of the developer community.

Angular is backed and supported by a thriving developer community. Developers can access many available communities worldwide, online or locally, to get help and guidance with the Angular framework. On the other hand, communities help the Angular framework progress by sharing feedback on new features, testing new ideas, and reporting issues. Some of the most popular online communities are:

  • Tech Stack Nation: The world’s friendliest Angular study group that brings together Angular developers who are passionate about improving their confidence in building amazing Angular applications. Tech Stack Nation is a community where Angular developers can collaborate, learn from each other’s expertise, and push the boundaries of what Angular can achieve. You can join Tech Stack Nation at https://techstacknation.com.
  • Angular Community Discord: Angular’s official Discord server that brings the incredible Angular community together. Everyone is welcome to join the community with the click of a button. It is the central location to connect Angular team members, Google Developer Experts (GDEs), library authors, meetup groups, and anyone interested in learning the framework. You can join the Angular Community Discord server at https://discord.gg/angular.
  • Angular.love: A community platform for Angular enthusiasts, supported by House of Angular, to facilitate the growth of Angular developers through knowledge-sharing initiatives. It started as a blog where experts published articles about Angular news, features, and best practices. Now, Angular.love also organizes in-person and online meetups, frequently featuring GDEs. You can join Angular.love at https://angular.love.

Now that we have seen what Angular is and why someone should choose it for web development, we will learn how to use it and build great web applications.

Setting up the Angular CLI workspace

Setting up a project with Angular can be tricky. You need to know what libraries to import and ensure that files are processed in the correct order, which leads us to the topic of scaffolding. Scaffolding is a tool to automate tasks, such as generating a project from scratch, and it becomes necessary as complexity grows and where every hour counts toward producing business value, rather than being spent fighting configuration problems.

The primary motivation behind creating the Angular CLI was to help developers focus on application building, eliminating the configuration boilerplate. Essentially, with a simple command, you should be able to initialize an application, add new artifacts, run tests, update applications, and create a production-grade bundle. The Angular CLI supports all of this using special commands called schematics.

Prerequisites

Before we begin, we must ensure that our development environment includes software tools essential to the Angular development workflow.

Node.js

Node.js is a JavaScript runtime built on top of Chrome’s v8 JavaScript engine. Angular requires an active or maintenance Long-Time Support (LTS) version. If you have already installed it, you can run node -v on the command line to check which version you are running.

If you need to work with applications that use different Node.js versions or can’t install the runtime due to restricted permissions, use nvm, a version manager for Node.js designed to be installed per user. You can learn more at https://github.com/nvm-sh/nvm.

npm

npm is a software package manager that is included by default in Node.js. You can check this out by running npm -v in the command line. An Angular application consists of various libraries, called packages, that exist in a central place called the npm registry. The npm client downloads and installs the libraries needed to run your application from the npm registry to your local computer.

Git

Git is a client that allows us to connect to distributed version-control systems, such as GitHub, Bitbucket, and GitLab. It is optional from the perspective of the Angular CLI. You should install it if you want to upload your Angular project to a Git repository, which you might want to do.

Installing the Angular CLI

The Angular CLI is part of the Angular ecosystem and can be downloaded from the npm package registry. Since it is used to create Angular projects, we must install it globally in our system. Open a terminal window and run the following command:

npm install -g @angular/cli

You may need elevated permissions on some Windows systems, so you should run your terminal as an administrator. Run the preceding command in Linux/macOS systems by adding the sudo keyword as a prefix to execute with administrative privileges.

The command that we used to install the Angular CLI uses the npm client, followed by a set of runtime arguments:

  • install or i: Denotes the installation of a package
  • -g or --global: Indicates that the package will be installed on the system globally
  • @angular/cli: The name of the package to install

The Angular CLI follows the same version as the Angular framework, which in this book is 19. The preceding command will install the latest stable version of the Angular CLI. You can check which version you have installed by running ng version or ng v in the command line. If you have a different version than 19 after installing it, you can run the following command:

npm install -g @angular/cli@19

The preceding command will fetch and install the latest version of Angular CLI 19.

CLI commands

The Angular CLI is a command-line interface tool that automates specific tasks during development, such as serving, building, bundling, updating, and testing an Angular project. As the name implies, it uses the command line to invoke the ng executable file and run commands using the following syntax:

ng [command] [options]

Here, [command] is the name of the command to be executed, and [options] denotes additional parameters that can be passed to each command. To view all available commands, you can run the following:

ng help

Some commands can be invoked using an alias instead of the name. In this book, we cover the most common ones (the alias of each command is shown inside parentheses):

  • new (n): Creates a new Angular CLI workspace from scratch
  • build (b): Compiles an Angular application and outputs generated files in a predefined folder
  • generate (g): Creates new files that comprise an Angular application
  • serve (dev): Builds an Angular application and serves it using a pre-configured web server
  • test (t): Runs the unit tests of an Angular application
  • add: Installs an Angular library in an Angular application
  • update: Updates an Angular application to the latest Angular version

You can find more Angular CLI commands at https://angular.dev/cli.

Updating an Angular application is one of the most critical tasks from the preceding list. It helps us stay up to date by upgrading our Angular applications to the latest version.

Try to keep your Angular projects up to date because each new version of Angular comes packed with many exciting new features, performance improvements, and bug fixes.

Additionally, you can use the Angular upgrade guide, which contains tips and step-by-step instructions on updating your applications, at https://angular.dev/update-guide.

Creating a new project

Now that we have prepared our development environment, we can start creating our first Angular application. We will use the ng new command of the Angular CLI and pass the name of the application that we want to create as an option:

  1. Open a terminal window, navigate to a folder of your choice, and run the command ng new my-app. Creating a new Angular application is a straightforward process. The Angular CLI will ask for details about the application we want to create so that it can scaffold the Angular project as best as possible.
  2. Initially, it will ask if we want to enable Angular analytics:
    Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.dev/cli/analytics. (y/N)
    

The Angular CLI will ask this question once when we create the first Angular project and apply it globally in our system. However, we can change the setting later in a specific Angular workspace.

  1. The next question is related to the styling of our application:
    Which stylesheet format would you like to use?
    

It is common to use CSS to style Angular applications. However, we can use preprocessors like SCSS or Less to add value to our development workflow. In this book, we work with CSS directly, so accept the default choice, CSS, and press Enter.

  1. Finally, the Angular CLI will prompt us if we want to enable SSR and Static Site Generation (SSG) in our application:
    Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
    

SSR and SSG are concerned with improving the startup and load performance of an Angular application. We will learn more about them in Chapter 15, Optimizing Application Performance. For now, accept the default choice, No, by pressing Enter.

The process may take some time, depending on your internet connection. During this time, the Angular CLI downloads and installs all necessary packages and creates default files for your Angular application. When finished, it will have created a folder called my-app. The folder represents an Angular CLI workspace that contains a single Angular application called my-app at the root level.

The workspace contains various folders and configuration files that the Angular CLI needs to build and test the Angular application:

  • .vscode: Includes VSCode configuration files
  • node_modules: Includes installed npm packages that are needed to develop and run the Angular application
  • public: Contains static assets such as fonts, images, and icons
  • src: Contains the source files of the application
  • .editorconfig: Defines coding styles for the default editor
  • .gitignore: Specifies the files and folders that Git should not track
  • angular.json: The main configuration file of the Angular CLI workspace
  • package.json and package-lock.json: Provide definitions of npm packages, along with their exact versions, which are needed to develop, test, and run the Angular application
  • README.md: A README file that is automatically generated from the Angular CLI
  • tsconfig.app.json: A TypeScript configuration that is specific to the Angular application
  • tsconfig.json: A TypeScript configuration that is specific to the Angular CLI workspace
  • tsconfig.spec.json: A TypeScript configuration that is specific to unit tests of the Angular application

As developers, we should only care about writing the source code that implements features for our application. Nevertheless, having basic knowledge of how the application is orchestrated and configured helps us better understand the mechanics and ways to intervene if necessary.

Navigate to the newly created folder and start your application with the following command:

ng serve

Remember that any Angular CLI command must be run inside an Angular CLI workspace folder.

The Angular CLI compiles the Angular project and starts a web server that watches for changes in project files. This way, whenever you change your application code, the web server rebuilds the project to reflect the new changes.

After compilation has been completed successfully, you can preview the application by opening your browser and navigating to http://localhost:4200:

Εικόνα που περιέχει κείμενο, στιγμιότυπο οθόνης, γραμματοσειρά

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.1: Angular application landing page

Congratulations! You have created your first Angular CLI workspace. The Angular CLI created a sample web page that we can use as a reference to build our project. In the next section, we will explore the main parts of our application and learn how to modify this page.

The structure of an Angular application

We will take the first intrepid steps in examining our Angular application. The Angular CLI has already scaffolded our project and done much of the heavy lifting for us. All we need to do is fire up our favorite IDE and start working with the Angular project. We will use VSCode in this book, but feel free to choose any editor you are comfortable with:

  1. Open VSCode and select File | Open Folder… from the main menu.
  2. Navigate to the my-app folder and select it. VSCode will load the associated Angular CLI workspace.
  3. Expand the src folder.

When we develop an Angular application, we’ll likely interact with the src folder. It is where we write the code and tests of our application. It contains the following:

  • app: All the Angular-related files of the application. You interact with this folder most of the time during development.
  • index.html: The main HTML page of the Angular application.
  • main.ts: The main entry point of the Angular application.
  • styles.css: CSS styles that apply globally to the Angular application. The extension of this file depends on the stylesheet format you choose when creating the application.

The app folder contains the actual source code we write for our application. Developers spend most of their time inside that folder. The Angular application that was created automatically from the Angular CLI contains the following files:

  • app.component.css: Contains CSS styles specific to the sample page. The extension of this file depends on the stylesheet format you choose when creating the application.
  • app.component.html: Contains the HTML content of the sample page.
  • app.component.spec.ts: Contains unit tests for the sample page.
  • app.component.ts: Defines the presentational logic of the sample page.
  • app.config.ts: Defines the configuration of the Angular application.
  • app.routes.ts: Defines the routing configuration of the Angular application.

The filename extension .ts refers to TypeScript files.

In the following sections, we will learn how Angular orchestrates some of those files to display the sample page of the application.

Components

The files whose names start with app.component constitute an Angular component. A component in Angular controls part of a web page by orchestrating the interaction of the presentational logic with the HTML content of the page, called a template.

Each Angular application has a main HTML file, named index.html, that exists inside the src folder and contains the following <body> HTML element:

<body>
  <app-root></app-root>
</body>

The <app-root> tag is used to identify the main component of the application and acts as a container to display its HTML content. It instructs Angular to render the template of the main component inside that tag. We will learn how it works in Chapter 3, Structuring User Interfaces with Components.

When the Angular CLI builds an Angular application, it parses the index.html file and identifies HTML tags inside the <body> element. An Angular application is always rendered inside the <body> element and comprises a tree of components. When the Angular CLI finds a tag that is not a known HTML element, such as <app-root>, it starts searching through the components of the application tree. But how does it know where to start?

Bootstrapping

The startup method of an Angular application is called bootstrapping, and it is defined in the main.ts file inside the src folder:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
 
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

The main task of the bootstrapping file is to define the component that will be loaded at application startup. It calls the bootstrapApplication method, passing AppComponent as a parameter to specify the starting component of the application. It also passes the appConfig object as a second parameter to specify the configuration that will be used in the application startup. The application configuration is described in the app.config.ts file:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

The appConfig object contains a providers property to define services provided throughout the Angular application. We will learn more about services in Chapter 5, Managing Complex Tasks with Services.

A new Angular CLI application provides routing services by default. Routing is related to in-app navigation between different components using the browser URL. It is activated using the provideRouter method, passing a routes object, called route configuration, as a parameter. The route configuration of the application is defined in the app.routes.ts file:

import { Routes } from '@angular/router';
export const routes: Routes = [];

Our application does not have a route configuration yet, as indicated by the empty routes array. We will learn how to set up routing and configure it in Chapter 9, Navigating through Applications with Routing.

Template syntax

Now that we have taken a brief overview of our sample application, it’s time to start interacting with the source code:

  1. Run the following command in a terminal window to start the application if it is not running already:
    ng serve
    

If you are working with VSCode, it is preferable to use its integrated terminal, which is accessible from the Terminal | New Terminal option in the main menu.

  1. Open the application with your browser at http://localhost:4200, and notice the text below the Angular logo that reads Hello, my-app. The word my-app, which corresponds to the application name, comes from a variable declared in the TypeScript file of the main component. Open the app.component.ts file and locate the title variable:
    import { Component } from '@angular/core';
    import { RouterOutlet } from '@angular/router';
    @Component({
      selector: 'app-root',
      imports: [RouterOutlet],
      templateUrl: './app.component.html',
      styleUrl: './app.component.css'
    })
    export class AppComponent {
      title = 'my-app';
    }
    

The title variable is a component property that is used in the component template.

  1. Open the app.component.html file and go to line 228:
    <h1>Hello, {{ title }}</h1>
    

The title property is surrounded by double curly braces syntax called interpolation, which is part of the Angular template syntax. In a nutshell, interpolation converts the value of the title property to text and prints it on the page.

Angular uses specific template syntax to extend and enrich the standard HTML syntax in the application template. We will learn more about the Angular template syntax in Chapter 3, Structuring User Interfaces with Components.

  1. Change the value of the title property in the AppComponent class to World, save the changes, wait for the application to reload, and examine the output in the browser:
Εικόνα που περιέχει κείμενο, γραμματοσειρά, γραφικά, λογότυπο

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.2: Landing page title

Congratulations! You have successfully interacted with the source code of your application.

By now, you should have a basic understanding of how Angular works and what the basic parts of an Angular application are. As a reader, you have had to absorb a lot of information so far. However, you will get a chance to get more acquainted with the components in the upcoming chapters. For now, the focus is to get you up and running, by giving you a powerful tool like the Angular CLI and showing you how only a few steps are needed to display an application on the screen.

Angular tooling

One of the reasons that the Angular framework is popular among developers is the rich ecosystem of available tools. The Angular community has built amazing tools to complete and automate various tasks, such as debugging, inspecting, and authoring Angular applications:

  • Angular DevTools
  • VSCode Debugger
  • VSCode Profiles

We will learn how to use each in the following sections, starting with Angular DevTools.

Angular DevTools

Angular DevTools is a browser extension created and maintained by the Angular team. It allows us to inspect and profile Angular applications directly in the browser. It is currently supported by Google Chrome and Mozilla Firefox and can be downloaded from the following browser stores:

To open the extension, open the browser developer tools and select the Angular tab. It contains three additional tabs:

  • Components: Displays the component tree of the Angular application
  • Profiler: Allows us to profile and inspect the Angular application
  • Injector Tree: Displays the services provided by the Angular application

In this chapter, we will explore how to use the Components tab. We will learn how to use the Profiler tab in Chapter 3, Structuring User Interfaces with Components, and the Injector Tree tab in Chapter 5, Managing Complex Tasks with Services.

The Components tab allows us to preview the components and directives of an Angular application and interact with them. If we select a component from the tree representation, we can view its properties and metadata:

Εικόνα που περιέχει κείμενο, στιγμιότυπο οθόνης, γραμματοσειρά, αριθμός

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.3: Component preview

From the Components tab, we can also look up the respective HTML element in the DOM or navigate to the actual source code of the component or directive. Clicking the < > button will take us to the TypeScript file of the current component:

Figure 1.4: TypeScript source file

Double-clicking a selector from the tree representation of the Components tab will navigate us to the DOM of the main page and highlight the individual HTML element:

Εικόνα που περιέχει κείμενο, στιγμιότυπο οθόνης, γραμματοσειρά, αριθμός

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.5: Main page DOM

Finally, one of the most useful features of the component tree is that we can alter the value of a component property and inspect how the component template behaves:

Εικόνα που περιέχει κείμενο, στιγμιότυπο οθόνης, γραμματοσειρά, γραμμή

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.6: Change component state

In the preceding image, you can see that when we changed the value of the title property to Angular World, the change was also reflected in the component template.

VSCode Debugger

We can debug an Angular application using standard debugging techniques for web applications or the tooling that VSCode provides out of the box.

The console object is the most commonly used web API for debugging. It is a very fast way to print data and inspect values in the browser console. To inspect the value of an object in an Angular component, we can use the debug or log method, passing the object we want to inspect as a parameter. However, it is considered an old-fashioned approach, and a codebase with many console.log methods is difficult to read. An alternate way is to use breakpoints inside the source code using the VSCode debug menu.

VSCode is an open-source code editor backed by Microsoft. It is very popular in the Angular community, primarily because of its robust support for TypeScript. TypeScript has been, to a great extent, a project driven by Microsoft, so it makes sense that one of its popular editors was conceived with built-in support for this language. It contains a rich collection of useful features, including syntax, error highlighting, automatic builds, and debugging.

VSCode contains a built-in debugging tool that uses breakpoints to debug Angular applications. We can add breakpoints inside the source code from VSCode and inspect the state of an Angular application. When an Angular application runs and hits a breakpoint, it will pause and wait. During that time, we can investigate and inspect several values involved in the current execution context.

Let’s see how to add breakpoints to our sample application:

  1. Open the app.component.ts file and click on the left of line 11 to add a breakpoint. A red dot denotes breakpoints:
Εικόνα που περιέχει κείμενο, στιγμιότυπο οθόνης, γραμματοσειρά, αριθμός

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.7: Adding a breakpoint

  1. Click on the Run and Debug button in the left sidebar of VSCode.
  2. Click on the play button to start the application using the ng serve command:

Figure 1.8: Run and debug menu

VSCode will build our application, open the default web browser, and hit the breakpoint inside the editor:

Figure 1.9: Hitting a breakpoint

We can now inspect various aspects of our component and use the buttons in the debugger toolbar to control the debugging session.

Another powerful feature of VSCode is VSCode Profiles, which help developers customize VSCode according to their development needs.

VSCode Profiles

VSCode Profiles allows us to customize the following aspects of the VSCode editor:

  • Settings: The configuration settings of VSCode
  • Keyboard shortcuts: Shortcuts to execute VSCode commands with the keyboard
  • Snippets: Reusable template code snippets
  • Tasks: Tasks that automate the execution of scripts and tools directly from VSCode
  • Extensions: Tools that enable us to add new capabilities in VSCode, such as languages, debuggers, and linters

Profiles can also be shared, which helps us maintain a consistent development setup and workflow across our team. VSCode contains a set of built-in profiles, including one for Angular, that we can further customize according to our development needs. To install the Angular profile:

  1. Click the Manage button represented by the gear icon at the bottom of the left sidebar in VSCode and select the Profiles option.
  2. Click on the arrow of the New Profile button and select the From Template | Angular option.
  3. Click the gear button if you want to select a custom icon for your profile.
  4. Click the Create button to create your profile.

VSCode will automatically apply the new profile after it has been created successfully.

In the following sections, we will explore some of the extensions in the VSCode Angular profile.

Angular Language Service

The Angular Language Service extension is developed and maintained by the Angular team and provides code completion, navigation, and error detection inside Angular templates. It enriches VSCode with the following features:

  • Code completion
  • A go-to definition
  • Quick info
  • Diagnostic messages

To get a glimpse of its powerful capabilities, let’s look at the code completion feature. Suppose we want to display a new property called description in the template of the main component. We can set this up by going through the following steps:

  1. Define the new property in the app.component.ts file:
    export class AppComponent {
      title = 'my-app';
      description = 'Hello World';
    }
    
  2. Open the app.component.html file and add the property name in the template using Angular interpolation syntax. The Angular Language Service will find it and suggest it for us automatically:

Figure 1.10: Angular Language Service

The description property is a public property. We can omit the keyword public when using public properties and methods. Code completion does not work for private properties and methods. If the property had been declared private, then the Angular Language Service and the template would not have been able to recognize it.

You may have noticed that a red line appeared instantly underneath the HTML element as you typed. The Angular Language Service did not recognize the property until you typed it correctly and gave you a proper indication of this lack of recognition. If you hover over the red indication, it displays a complete information message about what went wrong:

Εικόνα που περιέχει κείμενο, γραμματοσειρά, γραμμή, στιγμιότυπο οθόνης

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.11: Error handling in the template

The preceding information message comes from the diagnostic messages feature. The Angular Language Service supports various messages according to the use case. You will encounter more of these messages as you work more with Angular.

Material Icon Theme

VSCode has a built-in set of icons to display different types of files in a project. The Material Icon Theme extension provides additional icons that conform to the Material Design guidelines by Google; a subset of this collection targets Angular-based artifacts:

Εικόνα που περιέχει κείμενο, στιγμιότυπο οθόνης, γραμματοσειρά

Περιγραφή που δημιουργήθηκε αυτόματα

Figure 1.12: Material Icon Theme

Using this extension, you can easily spot the type of Angular files in a project, such as components, and increase developer productivity, especially in large projects with many files.

EditorConfig

VSCode editor settings, such as indentation or spacing, can be set at a user or project level. EditorConfig can override these settings using the .editorconfig configuration file, which can be found in the root folder of an Angular CLI project:

# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
trim_trailing_whitespace = false

You can define unique settings in this file to ensure the consistency of the coding style across your team.

Summary

That’s it! Your journey into the world of Angular has just begun. Let’s recap the features that you have learned so far. We learned what Angular is, looked over the brief history of the framework, and examined the benefits of using it for web development.

We saw how to set up our development workspace and find the tools to bring TypeScript into the game. We introduced the Angular CLI tool, the Swiss army knife for Angular, which automates specific development tasks. We used some of the most common commands to scaffold our first Angular application. We also examined the structure of our application and learned how to interact with it.

Our first application gave us a basic understanding of how Angular works internally to render our application on a web page. We embarked on our journey, starting with the main HTML file of an Angular application. We saw how Angular parses that file and starts searching the component tree to load the main component. We learned the process of Angular bootstrapping and how it is used to load the application configuration.

Finally, we met some of the most important Angular tools that could empower you as a software developer. We explored how to use Angular DevTools to inspect Angular applications and VSCode Debugger for debugging. We also examined VSCode Profiles and how it can help us maintain a consistent development environment across our team.

In the next chapter, you will learn some of the basics of the TypeScript language. The chapter will cover what problems can be solved by introducing types and the language itself. TypeScript, as a superset of JavaScript, contains a lot of powerful concepts and marries well with the Angular framework, as you are about to discover.

Join us on Discord

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

https://packt.link/LearningAngular5e

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore the basics of Angular 19 development, from components and templates to forms, routing, and services
  • Get up to speed with the new paradigms modern Angular brings, including standalone APIs, new control flow syntax, Signals, and server-side rendering (SSR)
  • Discover best practices for building, deploying, debugging, and testing Angular applications

Description

Angular is an extremely fast, cross-platform JavaScript framework loved by millions. Learning Angular is a comprehensive introduction to the framework from an experienced Angular developer and Google Developer Expert. You’ll learn the Angular way of development as you build a real-world app from the ground up. Updated for Angular 19, this fifth edition tackles landmark changes in Angular after the “Angular Renaissance”. It covers app creation with standalone components, Angular Signals, and the new control flow syntax, while acknowledging differences in approach in older Angular code. You’ll also find a brand-new chapter on optimizing performance with SSR and hydration, as well as revamped content on TypeScript. Angular developers of all experience levels will benefit from this book. It is especially useful if you are new to Angular, as it will help you get to grips with the bare bones of the framework. By the end of this book, you'll be able to create Angular applications with TypeScript from scratch and apply best practices in any Angular codebase.

Who is this book for?

This book is for JavaScript developers and web developers dipping their feet for the first time in the world of frontend development with Angular, as well as those migrating to the Angular framework to build professional web applications. Current Angular developers looking to catch up with modern Angular will also find this book useful. 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 you will learn

  • Use the Angular CLI to scaffold, build, and deploy new Angular applications
  • Create Angular applications using standalone APIs
  • Build rich components with Angular template syntax
  • Apply reactivity patterns with the RxJS library and Signals
  • Craft beautiful user interfaces using Angular Material
  • Create HTTP data services to access APIs and provide data to components
  • Improve your debugging and error handling skills during runtime and development
  • Optimize application performance with SSR and hydration techniques

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jan 09, 2025
Length: 486 pages
Edition : 5th
Language : English
ISBN-13 : 9781835081556
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jan 09, 2025
Length: 486 pages
Edition : 5th
Language : English
ISBN-13 : 9781835081556
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Table of Contents

16 Chapters
Building Your First Angular Application Chevron down icon Chevron up icon
Introduction to TypeScript Chevron down icon Chevron up icon
Structuring User Interfaces with Components Chevron down icon Chevron up icon
Enriching Applications Using Pipes and Directives Chevron down icon Chevron up icon
Managing Complex Tasks with Services Chevron down icon Chevron up icon
Reactive Patterns in Angular Chevron down icon Chevron up icon
Tracking Application State with Signals Chevron down icon Chevron up icon
Communicating with Data Services over HTTP Chevron down icon Chevron up icon
Navigating through Applications with Routing Chevron down icon Chevron up icon
Collecting User Data with Forms Chevron down icon Chevron up icon
Handling Application Errors Chevron down icon Chevron up icon
Introduction to Angular Material Chevron down icon Chevron up icon
Unit Testing Angular Applications Chevron down icon Chevron up icon
Bringing Applications to Production Chevron down icon Chevron up icon
Optimizing Application Performance Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(6 Ratings)
5 star 50%
4 star 33.3%
3 star 0%
2 star 0%
1 star 16.7%
Filter icon Filter
Top Reviews

Filter reviews by




Oleksandr Zinchenko Jan 23, 2025
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Feefo Verified review Feefo
Chris S. Jan 11, 2025
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Aristeidis has done a great job of taking someone from little to no knowledge Angular to being able to understand how to build a great project from start to finish. Even having worked in Angular for several years I found a few pieces in the first couple of chapters that I had not seen before that I look forward to bringing into my own projects. You could be a first day developer and being able to work through this book and be able to understand the concepts being presented fairly easily, in my opinion, and should be a great place to start with Angular for anyone just getting going. Clear, concise, and helpful the whole way through. Read more
Amazon Verified review Amazon
Nikhil Matolia Jan 11, 2025
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The book provides a clear and concise explanation of key concepts, making it easy to follow along. Highly recommended! Read more
Amazon Verified review Amazon
Michael S Jan 15, 2025
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
This new edition is one of the most approachable overview books for Angular I have seen in the modern era. I think this would be a great book for people looking to get into Angular fresh, whether you come from other frameworks or are fresh with frontend with some basics or are getting back to Angular since many versions ago. The review of JS and then TS essentials was a good refresher and something I wish I went over when I started. The follow along project felt realistic and was nice to iterate new ideas upon. And the pacing didn't feel too fast or too slow. My one criticism is that some state assignments done in ngOnInit blocks could be lifted out directly to component variable declarations, but anyone starting from this book would already be ahead of the curve. Read more
Amazon Verified review Amazon
Salman Farsi Jan 12, 2025
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
The Learning Angular provides a comprehensive introduction to Angular for both new and experienced developers. It begins with a foundational overview of Angular, covering its key features, such as its modular architecture, dependency injection, and CLI tools. The structured approach makes it easy to follow along, especially with chapters dedicated to TypeScript, a prerequisite for Angular development.Highlights include:- Clear explanations of Angular’s core concepts like components, directives, and services.- Practical guides for setting up the development environment using the Angular CLI.- Hands-on exercises in building, styling, and testing components.- Introduction to modern Angular features, including reactive programming and change detection strategies.The book's modular structure allows readers to learn progressively, with each chapter building on the previous one. It promises to help developers manage complex tasks, optimize performance, and create scalable applications.Overall, this resource is well-suited for developers aiming to master Angular’s latest features. Its clear writing style, practical examples, and up-to-date content make it a valuable learning companion. Read more
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.