Angular Get Started

Learning Objectives

By the end of this lesson, you will be able to:

• Understand the prerequisites for learning Angular.
• Install all required development tools.
• Set up your first Angular development environment.
• Create your first Angular project using Angular CLI.
• Understand the generated project structure.
• Run your Angular application locally.
• Understand what happens behind the scenes when Angular starts.
• Learn best practices for setting up professional Angular projects.

Introduction

Every great application starts with a properly configured development environment.

Imagine two developers joining the same company.

The first developer spends an entire day installing tools, fixing version conflicts, and troubleshooting environment issues.

The second developer follows a standardized setup process and starts coding within 20 minutes.

Who becomes productive faster?

Almost every software company follows standardized development environments because they reduce errors, improve collaboration, and ensure everyone works with the same versions of tools.

Angular follows the same philosophy.

Before writing a single line of Angular code, let's build a professional development environment that mirrors what enterprise teams use every day.

A Real-World Story

A fintech company hired 40 new Angular developers.

Initially, each developer installed different versions of Node.js, Angular CLI, and Visual Studio Code extensions.

The result?

• "Works on my machine" bugs
• Build failures
• Dependency conflicts
• Different application behavior
• Lost development time

The engineering team solved the problem by documenting a standard Angular setup process.

Within days:

• Development became consistent.
• New developers onboarded faster.
• Build failures disappeared.
• Team productivity improved.

A proper development environment is the first step toward professional software development.

What Do You Need Before Learning Angular?

Angular is built on modern web technologies.

Before starting Angular, you should have basic knowledge of:

• HTML
• CSS
• JavaScript
• TypeScript (recommended)
• Basic command-line usage

Don't worry if you're not an expert. We'll introduce TypeScript concepts throughout the course whenever they're needed.

Software Required

To build Angular applications, you'll need the following tools.

1. Node.js

Node.js is a JavaScript runtime that allows Angular's development tools to run on your computer.

Angular itself runs in the browser, but its build tools, package manager, and CLI rely on Node.js.

Download the LTS (Long-Term Support) version from the official Node.js website.

Why Node.js?

It provides:

• JavaScript runtime
• npm (Node Package Manager)
• Package installation
• Build tools
• Development server

2. npm

npm is installed automatically with Node.js.

It manages all project dependencies.

Examples include:

• Angular packages
• TypeScript
• RxJS
• Build tools
• Testing libraries

Without npm, Angular projects cannot install or update required packages.

3. Visual Studio Code

VS Code is one of the most popular editors for Angular development.

Recommended extensions:

• Angular Language Service
• ESLint
• Prettier
• GitLens
• Material Icon Theme
• Auto Rename Tag

These extensions improve productivity with syntax highlighting, auto-completion, linting, formatting, and Git integration.

4. Angular CLI

Angular CLI (Command Line Interface) is a powerful tool that automates project creation, code generation, testing, building, and deployment.

Instead of manually creating folders and configuration files, Angular CLI generates a production-ready project in seconds.

Installing Node.js

Visit the official Node.js website and download the latest LTS version.

After installation, verify it by opening a terminal and running:

node -v

Example output:

v22.12.0

Verify npm:

npm -v

Example:

10.9.0

If both commands display version numbers, your installation is successful.

Installing Angular CLI

Install Angular CLI globally using npm.

npm install -g @angular/cli

After installation, verify it:

ng version

Example output:

Angular CLI: 20.x.x
Node: 22.x.x
Package Manager: npm
Operating System: Windows / macOS / Linux

The CLI is now ready to create Angular projects.

Creating Your First Angular Project

Run the following command:

ng new angular-demo

Angular CLI asks a few questions.

For example:

Would you like to enable Server-Side Rendering (SSR)?

For beginners, choose No.

Later in this course, you'll learn SSR and Hydration in detail.

Next:

Which stylesheet format would you like?

Recommended:

CSS

Angular CLI now creates the project.

Behind the scenes, it:

• Creates the folder structure.
• Downloads required packages.
• Configures TypeScript.
• Installs Angular.
• Generates starter files.
• Configures build tools.

Within a minute, your first Angular application is ready.

Understanding the Generated Project

After project creation, you'll see a structure similar to this:

angular-demo/
│
├── src/
│   ├── app/
│   ├── assets/
│   ├── styles.css
│   ├── main.ts
│
├── node_modules/
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

Important Files

Don't worry if these files look unfamiliar. We'll explore each one in upcoming lessons.

Running the Application

Navigate into the project:

cd angular-demo

Start the development server:

ng serve

or

ng serve --open

Angular compiles the application and starts a local development server.

Open:

http://localhost:4200

You'll see the default Angular welcome page.

Congratulations!

Your first Angular application is now running.

What Happens Behind the Scenes?

When you execute:

ng serve

Angular performs several steps automatically.

This automation saves developers from manually configuring build tools.

Development Workflow

A typical Angular development cycle looks like this:

This feature, known as Live Reload, significantly speeds up development.

Enterprise Development Environment

In professional software companies, Angular development often includes additional tools.

Although you'll begin with a simple local setup, understanding this larger ecosystem prepares you for enterprise projects.

Best Practices

• Always install the latest LTS version of Node.js.
• Keep Angular CLI updated to benefit from new features and fixes.
• Use Visual Studio Code with recommended extensions.
• Create a separate project for experimentation and learning.
• Use Git from the beginning to track changes.
• Avoid modifying generated configuration files until you understand their purpose.
• Keep project dependencies updated using npm update when appropriate.

Common Mistakes

• Installing an unsupported Node.js version.
• Forgetting to verify installations with node -v, npm -v, and ng version.
• Editing files inside node_modules.
• Running Angular commands outside the project directory.
• Ignoring error messages during installation.
• Mixing global and local CLI versions without understanding version compatibility.

Advanced interview questions

Summary

Setting up Angular is more than installing software-it's the first step toward adopting professional development practices. With Node.js, npm, Angular CLI, and Visual Studio Code working together, you now have a robust environment capable of creating, running, and maintaining modern Angular applications. In the next lesson, we'll dive deeper into the Angular project structure and understand how each generated file contributes to building scalable, production-ready applications.