• GitHub: https://github.com/PacktPublishing/Learning-Angular-Fourth-Edition/tree/main/ch01
• Node.js: https://nodejs.org
• Git: https://git-scm.com/downloads
• VS Code: https://code.visualstudio.com/download

Angular is a development platform that is written in the TypeScript language. It consists of smaller sub-systems, including a JavaScript framework, a command-line interface, a language service, and a rich collection of first-party libraries.

Angular enables developers to build scalable web applications with TypeScript, a strict syntactic superset of JavaScript. Developing with Angular does not require knowledge of JavaScript, but it is nice to have. We will learn more details about TypeScript in Chapter 2, Introduction to TypeScript.

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

Angular was created by a team internally at Google. 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. The team joined forces with the TypeScript team at Microsoft and introduced TypeScript into the framework. A vital consideration towards that decision was decorators, a powerful feature of the TypeScript language that Angular heavily uses. The next version of the framework, 2.0, was written in TypeScript and re-branded as Angular with a different logo than AngularJS.

Angular is based on the most modern web standards and supports all the evergreen browsers. It is compatible with the two most recent major versions of all browsers except for Chrome and Firefox, which supports the latest ones.

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

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

• The main pillars of the platform: cross-platform, incredible tooling, and easy onboarding
• The usage of Angular worldwide

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 JavaScript framework. However, it is open-source and is backed by a vast and incredible community that enables the framework to run on the remaining three using the following integrations:

• Angular Universal: Renders Angular applications server-side
• Angular Service Worker: Enables Angular applications to run as Progressive Web Applications (PWA) that are customizable and can be installed on a desktop environment
• Ionic Framework: 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 creation to deployment.
• Angular DevTools: A browser extension that enables us to debug and profile Angular applications from the comfort of our browser. We will learn more about this tool in Chapter 14, Handling Errors and Application Debugging.

The Angular CLI is the de facto solution for working 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 for a web developer 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:

• Angular HTTP client to communicate with a REST API endpoint over HTTP
• Angular forms to create HTML forms for collecting input and data from users
• 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 not used in our application unless we import them explicitly into our project.

Who uses Angular?

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.

Statistically, more than 2,500 projects inside Google use the Angular framework. Additionally, more than 1.5 million developers worldwide prefer Angular for web development.

The fact that Angular is already used internally at Google is a crucial factor for the reliability of the platform. Every new version of Angular is first 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 platform to the rest of the developer community.

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

Setting up a frontend project today is more cumbersome than ever. We used to manually include the necessary JavaScript and CSS files in our HTML. Life used to be simple. Then frontend development became more ambitious: we started splitting our code into modules and using special tools called preprocessors for our code and CSS.

Our projects became more complicated, and we started to rely on build systems to bundle our applications. As developers, we are not huge fans of configuration—we want to focus on building awesome apps. However, modern browsers do more to support the latest web standards, and some have even started to support JavaScript modules. That said, this is far from being widely supported. In the meantime, we still have to rely on bundling and module support tools.

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. Scaffolder tools almost become necessary as complexity grows and where every hour counts towards 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, and create a production-grade bundle. The Angular CLI supports all of this with the use of special commands.

Prerequisites

Before we begin, we need to ensure that our development environment includes a set of 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 in the command line to check which version you are running. The Angular CLI uses Node.js to accomplish specific tasks, such as serving, building, and bundling your application.

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 that are 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 for creating Angular projects, we need to install it globally in our system. Open a terminal and run the following command:

npm install -g @angular/cli

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

• install or i: Denotes the installation of a package
• -g: 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 major version as the Angular framework, which in this book is 15. 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 Angular CLI 15, you can run the following command:

npm install -g @angular/cli@15

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

CLI commands

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

ng command [options]

Here, the 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 also be invoked using an alias instead of the actual command name. In this book, we revise 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 (s): Builds an Angular application and serves it using a pre-configured web server.
• test (t): Runs unit tests of an Angular application.
• deploy: Deploys an Angular application to a web-hosting provider. You can choose from a collection of providers included in the Angular CLI.
• add: Installs an Angular library to an Angular application.
• completion: Enables auto-complete for Angular CLI commands through the terminal.
• update: Updates an Angular application to the latest Angular version.

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

Additionally, you can use the Angular upgrade guide that contains tips and step-by-step instructions on how to update your application at https://update.angular.io.

Creating a new project

Now that we have prepared our development environment, we can start creating magic by scaffolding our first Angular application. We use the new command of the Angular CLI and pass the name of the application that we want to create as an option. To do so, go to a folder of your choice and type the following:

ng new my-app

Creating a new Angular application is a straightforward process. The Angular CLI will ask you for details about the application you want to create so that it can scaffold the Angular project as best as possible. Initially, it will ask if you 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.io/analytics. (y/N)

The Angular CLI will only ask the previous question once when you create your first Angular project and apply it globally in your system. However, you can change the setting later in a specific Angular workspace. Next, it will ask if you want to include routing in your application:

Would you like to add Angular routing? (y/N)

Routing is related to navigating from one view of your application to another, which we will learn later in Chapter 9, Navigate through Application with Routing. For now, answer No to the question and press Enter. The next question is related to the styling of your application:

Which stylesheet format would you like to use? (Use arrow keys)

It is common to use CSS for styling Angular applications. However, you can use preprocessors like SCSS or Less to add value to your development workflow. In this book, we work with CSS directly, so accept the default choice, CSS, and press 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, test, and publish the Angular application:

• .vscode: Includes VS Code configuration files
• node_modules: Includes npm packages needed for development and running the Angular application
• src: Contains the source files of the application
• .editorconfig: Defines coding styles for your editor
• .gitignore: Specifies 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: TypeScript configuration that is specific to the Angular application
• tsconfig.json: TypeScript configuration that is specific to the Angular CLI workspace
• tsconfig.spec.json: TypeScript configuration that is specific to unit tests

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

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

ng serve

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, by default, a sample web page that we can use as a reference and start building our project based on that. In the next section, we will explore the main parts of our application and learn how to modify this page.

We are about to take the first intrepid steps into examining our Angular application. The Angular CLI has already scaffolded our project and has carried much 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 VS Code in this book, but feel free to choose any editor you are comfortable with:

1. Open VS Code and select File | Open Folder… from the main menu.
2. Navigate to the my-app folder and select it. VS Code will load the associated Angular project.
3. Navigate to 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 is also where we define the styles of our application and any static assets we use, such as icons, images, and JSON files. It contains the following:

• app: Contains all the Angular-related files of the application. You interact with this folder most of the time during development.
• assets: Contains static assets such as fonts, images, and icons.
• favicon.ico: The icon displayed in the tab of your browser, along with the page title.
• index.html: The main HTML page of the Angular application.
• main.ts: The main entry point of the Angular application.
• styles.css: Contains application-wide styles. These are 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 is created automatically from the Angular CLI contains the following files:

• app.component.css: Contains CSS styles specific for the sample page
• 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.module.ts: Defines the main module of the Angular application

In the following sections, we will learn about the purpose of each of those files in more detail.

Components

The files whose name starts 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. A typical Angular application has at least a main component called AppComponent by convention.

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 4, Enabling User Experience with Components.

When the Angular CLI builds an Angular app, it first parses the index.html file and starts identifying HTML tag elements inside the body tag. An Angular application is always rendered inside the body tag 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 which components belong to the app?

Modules

The main module of our application is a TypeScript file that acts as a container for the main component. The component was registered with this module upon creating the Angular application; otherwise, the Angular framework would not be able to recognize and load it. A typical Angular application has at least a main module called AppModule by convention.

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

The main task of the bootstrapping file is to define the module that will be loaded at application startup. It calls the bootstrapModule method of the platformBrowserDynamic method and passes AppModule as the entry point of the application.

We will learn more about the capabilities of Angular modules in Chapter 3, Organizing Application into Modules.

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 to start the application:

   ng serve
   

2. Open the application with your browser at http://localhost:4200 and notice the text next to the rocket icon that reads my-app app is running! The word my-app that corresponds to the name of our application 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';
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'my-app';
   }
   

   The title variable is a property of the component and is currently used in the component template.

3. Open the app.component.html file and go to line 344:

   <span>{{ title }} app is running!</span>
   

   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 displays it on the page.

   Angular uses template syntax to extend and enrich the standard HTML syntax in the template of an application. We will learn more about the syntax used in Angular templates in Chapter 4, Enabling User Experience with Components.

4. Change the value of the title property in the TypeScript class to Learning Angular and examine the application in the browser:

Figure 1.2: Landing page title

Congratulations! You have successfully used the Angular CLI to interact with the Angular application.

By now, you should have a basic understanding of how Angular works and what are the basic parts of a sample Angular application. As a reader, you had to swallow much information at this point. However, you will get a chance to get more acquainted with the components and modules 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 just a few steps are needed to display an application on the screen.

VS Code 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. All the nice features we might want are already baked in, including syntax, error highlighting, and automatic builds. Another reason for its broad popularity is the various extensions available in the marketplace that enrich the Angular development workflow. What makes VS Code so great is not only its design and ease of use but also the access to a ton of plugins, and there are some great ones for Angular development. The most popular are included in the Angular Essentials extension pack from John Papa. To get it, go through the following steps:

1. Navigate to the Extensions menu of VS Code.
2. Type Angular Essentials in the search box.
3. Click the Install button on the first entry item.

Alternatively, you can install it automatically since it is already included in the repository of this book’s source code. When you download the project from GitHub and open it in VS Code, it will prompt you to view and install the recommended extensions:

Figure 1.3: Recommended extensions prompt

In the following sections, we will look at some of the extensions included in the Angular Essentials pack as well as other useful extensions for Angular development.

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 VS Code with the following features:

• Code completion
• 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 = 'Learning Angular';
     description = 'Hello World';
   }
   

2. Open the app.component.html file and start typing the name of the property in the template. The Angular Language Service will find it and suggest it for you automatically:

Figure 1.4: Angular Language Service

You may have noticed that a red line appeared instantly underneath the HTML element as you were typing. 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.5: 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.

Angular Snippets

The Angular Snippets extension contains a collection of TypeScript and HTML code snippets for various Angular artifacts, such as components. To create the TypeScript class of an Angular component using the extension, go through the following steps:

1. Open our Angular application in VS Code and click on the New File button next to the workspace name in the EXPLORER pane.
2. Enter a proper file name, including the .ts extension, and press Enter.
3. Type a-component inside the file and press Enter.

The extension builds the TypeScript code for you automatically:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'selector-name',
  templateUrl: 'name.component.html'
})
export class NameComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

There are also other available snippets for creating various Angular artifacts, such as modules. All snippets start with the a- prefix.

Nx Console

Nx Console is an interactive UI for the Angular CLI that aims to assist developers who are not very comfortable with the command-line interface or do not want to use it. It works as a wrapper over Angular CLI commands, and it helps developers concentrate on delivering outstanding Angular applications instead of trying to remember the syntax of every CLI command they want to use.

The extension is automatically enabled when you open an Angular CLI project. If you click on the Nx Console menu of VS Code, it displays a list of Angular CLI commands that you can execute:

Figure 1.6: Nx Console

Nx Console includes most of the Angular CLI commands. The user interface allows developers to use them without remembering the available options each command supports.

Material icon theme

VS Code has a built-in set of icons that it uses to display different types of files in a project. This extension provides additional icons that conform to the Material Design guidelines by Google; a subset of this collection targets Angular-based artifacts.

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

EditorConfig

VS Code editor settings, such as indentation or spacing, can be set at a user or project level. EditorConfig can override these settings using a configuration file called .editorconfig, which can be found in the root folder of an Angular CLI project. You can define unique settings in this file to ensure the consistency of the coding style across your team.

Angular Evergreen

The stability of the Angular platform is heavily based on the regular release cycles according to the following schedule:

• A major version every six months
• Various minor versions between each major one
• A patch version every week

The Angular Evergreen extension helps us follow the previous schedule and keep our Angular projects up to date. It provides us with a unique user interface containing information about the current Angular version of our project and actions we can take to update it. Updating an Angular project can also be accomplished using a custom menu that appears if we right-click on the angular.json file of the workspace.

In a nutshell, Angular Evergreen is loaded in an Angular CLI project and compares the local version of Angular with the latest one. If there is a new version, it will alert the user by displaying a notification message:

Figure 1.7: Angular Evergreen

Additional to the latest version, we can update to the next Angular version, which is the beta version currently under development, or upgrade other npm packages of the project.

Rename Angular Component

Renaming Angular artifacts such as components and modules usually requires visiting different parts of the codebase in a project. Working your way through the project when you are a beginner is a daunting task. Thankfully, there is an extension that can help us with that.

The Rename Angular Component extension provides a user-friendly interface that enables us to rename certain Angular artifacts. We can right-click on any component-related file, select the Rename Angular Component option and enter the new name of the component. The extension will find all template and TypeScript files that use the component and rename them accordingly.

Although the name of the extension refers to components, it can currently be used with other Angular artifacts such as services, directives, and guards. We will learn about these artifacts later in the book.

That’s it! Your journey to 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 platform, and examined the benefits of using it for web development.

We saw how to set up our development workspace and find the tools we need to bring TypeScript into the game. We introduced the Angular CLI tool, the Swiss Army knife for Angular, that 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 main module of an Angular application and looked at how Angular bootstraps it at application startup.

Finally, we met the VS Code editor and learned how it could empower you as a software developer. We examined some of the essential available plugins and extensions for Angular that save quite a few keystrokes. Your focus and energy should be spent on solving the problem and structuring your solution, not making your fingers tired. We encourage you to learn more about your editor and its possibilities because this will make you faster and more efficient.

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.