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

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

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

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

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

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