Angular Projects, Third Edition: Build modern web apps in Angular 16 with 10 different projects and cutting-edge technologies

Welcome to Packt Early Access. We’re giving you an exclusive preview of this book before it goes on sale. It can take many months to write a book, but our authors have cutting-edge information to share with you today. Early Access gives you an insight into the latest developments by making chapter drafts available. The chapters may be a little rough around the edges right now, but our authors will update them over time.You can dip in and out of this book or follow along from start to finish; Early Access is designed to be flexible. We hope you enjoy getting to know more about the process of writing a Packt book.

1. Chapter 1: Creating Your First Web Application in Angular
2. Chapter 2: Building an SPA Application with Scully and Angular Router
3. Chapter 3: Building an Issue Tracking System Using Reactive Forms
4. Chapter 4: Building a PWA...

Essential background theory and context

The Angular framework is a cross-platform JavaScript framework that can run on various environments, including the web, server, mobile, and desktop. It consists of a collection of JavaScript libraries that we can use to build highly performant and scalable web applications. The architecture of an Angular application is based on a hierarchical representation of components. Components are the fundamental building blocks of an Angular application. They represent and control a particular portion of a web page called the view. Some examples of components are as follows:

• A list of blog posts
• An issue reporting form
• A weather display widget

Components of an Angular application can be logically organized as a tree:

Figure 1.1 – Component tree

An Angular application typically has one main component by convention, called AppComponent. Each component in the tree can communicate and interact with its siblings...

Introduction to the Angular CLI

The Angular CLI is a tool created by the Angular team that improves the developer experience while building Angular applications. It hides the complexity of scaffolding and configuring an Angular application while allowing developers to concentrate on what they do best – coding! Before we can start using the Angular CLI, we need to set up the following prerequisites in our system:

• Node.js: A JavaScript runtime that is built on the v8 engine of Chrome. You can download any Long-Term Support (LTS) version from https://nodejs.org.
• npm: A package manager for the Node.js runtime.

We can then install the Angular CLI using npm from the command line:

npm install -g @angular/cli

We use the -g option to install the Angular CLI globally, since we want to create Angular applications from any operating system path.

Installing the Angular CLI may require administrative privileges in some operating systems.

...

Exploring the rich ecosystem of Angular tooling in VS Code

There are many extensions available in the VS Code Marketplace that enhance the Angular tooling ecosystem. In this section, we will learn about the most popular ones that can significantly help us in Angular development:

• Nx Console
• Angular Language Service
• Angular Snippets
• Angular Evergreen
• Material Icon Theme

The preceding list is not exhaustive; some extensions are already included in the Angular Essentials extension pack. However, you can browse more Angular extensions for VS Code at https://marketplace.visualstudio.com/search?term=angular&target=VSCode.

Nx Console

Nx Console is a VS Code extension developed by the Nrwl team that provides a graphical user interface over the Angular CLI. It contains most of the Angular CLI commands and uses the Angular CLI internally to execute each one. We will learn more about this extension in the Building our application with Nx...

Project overview

In this project, we will use Angular CLI to create a new Angular application from scratch. Then, we will interact with the core functionality of the Angular framework to make a simple change to our application. Finally, we will learn how to use the Nx Console extension to build and serve our application.

Build time: 15 minutes.

Getting started

The following software tools are required to complete this project:

• Git: A free and open-source distributed version control system. You can download it from https://git-scm.com.
• VS Code: A code editor that you can download from https://code.visualstudio.com.
• Angular CLI: We introduced the command-line interface for Angular in the Essential background theory and context section.
• GitHub material: The code for this chapter, which you can find in the Chapter01 folder at https://github.com/PacktPublishing/Angular-Projects-Third-Edition.

Creating our first Angular application

To create a fresh new Angular application, we must execute the ng new command of the Angular CLI, passing the name of the application as an option:

ng new my-app

The ng new command is used to create a new Angular application or a new Angular workspace. An Angular workspace is an Angular CLI project containing one or more Angular applications, some of which can be Angular libraries. So, when we execute the ng new command, we create an Angular workspace with an Angular application by default.

In the previous command, the name of our Angular application is my-app. Upon executing the command, the Angular CLI will ask some questions to collect as much information as possible regarding the nature of the application we want to create:

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

Interacting with the Angular framework

When working with Angular, the real fun starts when we get our hands dirty with the framework itself. After all, understanding how Angular works and writing the application code is what matters.

The application source code resides inside the src\app folder at the root of our Angular CLI project. It contains all the files needed to build and test our Angular application, including a component and a module. The component is the main component of the Angular application:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

The following properties characterize an Angular component:

• selector: A unique name used to identify and declare the component inside HTML content. It is an HTML tag, just like any...

Using Nx Console for automating Angular CLI commands

The Angular CLI is a command-line tool with a variety of commands. Each command can accept a wide range of options and parameters according to the task we want to accomplish. Remembering these commands and their options by heart is daunting and time-consuming. In such cases, the ecosystem of Angular tooling can come in handy. VS Code Marketplace contains many useful extensions that we can install to help us during Angular development. One of these extensions is the Nx Console, which provides a user interface over the Angular CLI. To install the Nx Console in your environment, follow these steps:

1. Open VS Code and click on the Extensions menu in the sidebar:

Figure 1.13 – VS Code Extensions

2. In the EXTENSIONS pane that appears, type Nx Console.
3. Click the Install button on the first item to install the Nx Console extension.

The Nx Console extension is now installed globally...

Summary

In this chapter, we learned about the basic principles of the Angular framework and provided a brief overview of the Angular architecture. We saw some popular extensions for VS Code that we can use to enhance our development experience while working with Angular.

Then, we learned how to use the Angular CLI, a powerful tool of the Angular ecosystem, to scaffold and build a new Angular application from scratch. We also made our first interaction with Angular code by modifying the Angular component of a typical Angular CLI application. Finally, we installed the Nx Console extension and learned how to build our application.

In the next chapter, we will look at the Angular Router and learn how to use it to create a personal blog, using the Scully static website generator.

Practice questions

Let’s take a look at a few practice questions:

1. What is the basic building block of an Angular application?
2. How do we group components of similar functionality?
3. Who handles business logic tasks in an Angular application?
4. Which Angular CLI command can we use to create a new Angular application?
5. Which Angular CLI command can we use to serve an Angular application?
6. How do we declare an Angular component in HTML?
7. How do we declare Angular components in a module?
8. What syntax do we use to bind text on HTML templates?
9. What is the benefit of using the Nx Console?
10. Which extension do we use to perform static analysis in our Angular code?

Further reading

Here are some links to build upon what we learned in the chapter:

• Introduction to Basic Angular Concepts: https://angular.io/guide/architecture
• Interpolation: https://angular.io/guide/interpolation
• Nx Console: https://nx.dev/core-features/integrate-with-editors#vscode-plugin:-nx-console
• Angular Essentials: https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials
• Angular Evergreen: https://expertlysimple.io/get-evergreen