Summary  
Demonstrates how to install, configure, and verify key CLI tools and package managers required to scaffold and manage code projects.  

General domain of usage  
Web application development

Before **starting** **development** with **Angular**, you need to **set up** your **working environment**. This requires **three essential tools**: **Node.js**, **Angular CLI**, and **VS Code**.

The author of the course uses **macOS**, but the installation steps are the same for both **macOS** and **Windows**.

Note

**Node.js** is a **JavaScript runtime** that allows you to execute code on the **server** and manage packages using **npm** (Node Package Manager).

Definition

1. Go to the official **Node.js** <a href="https://nodejs.org/en/download" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> website</a>;

2. Use the **LTS (Long-Term Support)** version of **Node.js** instead of the latest release, as **Angular** may not yet be fully compatible with the newest version.

3. Select your **operating system**—I'm choosing **macOS**, but pick the one that matches your setup. Leave the other settings as they are;

4. **Download** the **installer** and follow the **on-screen instructions** to complete the **installation**.

Once **installed**, open the **terminal** (or **command prompt**) and **verify** that **Node.js** is **installed**:

If everything is **set up correctly**, this **command** will display the **installed Node.js version**.

Next, check that **npm** (<u>Node Package Manager</u>) is **installed**:

Running `npm -v` will display the installed version of **npm** — a sign that it has been correctly installed and is ready to use.

**Angular CLI** (Command Line Interface) is a tool that simplifies the **creation**, **setup**, and **management** of **Angular** projects.

To **install Angular CLI**, first **open** your **terminal** (or **command prompt**). Then, **run** the following **command** to **install Angular CLI globally**:

This command installs Angular CLI globally on your system, making it available for any Angular project.

Before installing **Angular CLI**, ensure that **Node.js** is already installed on your system. The installation of **Node.js** is a **prerequisite** for using **npm** and **Angular CLI**.

Once the **installation** is **complete**, **check** the **version** of **Angular CLI** by **running**:

This will **display** the **version information** for **Angular CLI** and other **installed dependencies**.

**VS Code** (Visual Studio Code) is a free **code editor** from **Microsoft**, offering **extension support** and useful tools for **Angular** development.

1. Go to the official **VS Code** <a href="https://code.visualstudio.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg>website</a>;

2. Choose the **version** for your **operating system** (<u>Windows</u>, <u>macOS</u>, or <u>Linux</u>);

3. **Download** the **installer** and follow the **on-screen instructions** to complete the **installation**.

Once **installed**, open **VS Code** and **set up** the **necessary extensions**:

1. Go to the **Extensions section** (`Ctrl + Shift + X` on **Windows** or `Cmd + Shift + X` on **macOS**);

2. **Install** the **Angular Language Service** extension for **code highlighting** and **autocompletion**;

3. You can also **install Angular Essentials** to add **syntax support**, **autocompletion**, and other **tools** for easier **Angular development** in **VS Code**.

What is the primary purpose of Node.js in an Angular project?

Discover how to build modern web applications using Angular, one of the most powerful frontend frameworks. You'll start with the core concepts, set up your development environment, and gradually move on to building dynamic, interactive components. Along the way, you'll work with directives, services, routing, and the latest approach with Standalone Components. With each step, you'll gain practical skills to confidently develop and organize Angular applications following industry best practices.

Discover the core concepts of Angular and how it simplifies web development. Learn about its key principles, evolution, and how to set up the necessary tools to start building applications.

Discover the fundamentals of components and templates in Angular, including how they are created, structured, and interact with each other to build dynamic, data-driven applications.

Dive into Angular's directives and pipes to learn how they make your templates smarter and your data cleaner. Discover how to control DOM behavior with directives and transform displayed data with powerful, built-in or custom pipes.

Learn how to organize and reuse logic in your Angular applications using services. You'll discover how to create services and inject them into components with Angular's built-in Dependency Injection system. This keeps your code clean, modular, and easier to maintain.

Learn how Angular applications used to rely on modules and discover why the framework is now embracing a more flexible approach with Standalone Components. Dive into the structure of NgModules, understand their key elements, and explore when and how to use Standalone Components in modern Angular development.

Learn how Angular handles routing and navigation to build dynamic single-page applications. In this section, you'll discover how to define routes and navigate between views using Angular's built-in tools.

Environment Setup

Installing Node.js

Installing Angular CLI

Installing VS Code