What is Angular? A Beginner's Introduction

Angular is a free, open-source framework for building web applications. It is maintained by Google and written in TypeScript, and it gives you a complete toolkit: a way to build the screen, keep data in sync with it, move between pages, validate forms and talk to a server. Instead of choosing a separate library for each job, you get one set of tools that are designed to work together.

This lesson explains what that means in practice, so the rest of the course makes sense before you write any code.

What you will learn

• What problem a front-end framework solves
• The six building blocks you will use in every Angular app
• How Angular differs from writing plain JavaScript
• When Angular is a good choice, and when it may not be

The problem Angular solves

Imagine a small employee portal. It has a dashboard with numbers, a searchable list of people, a form to add someone new, a menu to move between pages, and a connection to a server that stores the data. Every one of those pieces has to stay consistent: when someone is added, the list, the dashboard count and the server must all agree.

With plain JavaScript you would find elements on the page, change their text by hand, listen for clicks, and remember to update every place that shows the same data. That works for a small page. In a bigger app, forgetting one update causes bugs that are hard to find.

Angular takes a different approach. You describe what the screen should look like for a given state, and Angular keeps the screen up to date when the state changes. You spend your time on the logic of your app, not on manually patching the page.

The building blocks

Almost everything in Angular is built from the same few ideas:

• Component: a piece of the screen with its own logic, such as a menu, a card or a whole page.
• Template: the HTML of a component, with extra syntax for showing data and reacting to clicks.
• Signal: a value that Angular watches, so the screen updates automatically when it changes.
• Service: a class that holds logic or data shared by several components, such as loading employees from a server.
• Router: the part that shows the right components for the URL in the address bar.
• HttpClient: the built-in tool for calling APIs over HTTP.

You will meet each of these in its own lesson. For now, just remember that an Angular app is a tree of components, supported by services.

A first look at the difference

Here is the idea in plain JavaScript. To show a count and increase it, you look up elements and update them yourself:

const label = document.querySelector('#count');
let count = 0;
document.querySelector('#add').addEventListener('click', () => {
  count++;
  label.textContent = count;
});

In Angular you describe the relationship once, and the framework does the updating. You will write this exact example in Signals: reactive state, so do not worry about the details yet.

When Angular is a good choice

Angular fits well when:

• The app is large or will grow, and several people will work on it.
• You want clear conventions so that new teammates can find things quickly.
• The app has many forms, tables and data screens, such as dashboards, admin tools and customer portals.
• You like having routing, forms, HTTP and testing tools included and maintained together.

It may be more than you need for a one-page marketing site or a tiny widget. For those, plain HTML or a lighter tool can be simpler.

The learning path: beginner to advanced

The course has three stages. Move on when you can finish the "Try it yourself" tasks without looking at the answers.

• Beginner (sections 1 to 8): TypeScript, setup, the CLI, components, templates, binding, styling, control flow, signals, pipes, lifecycle hooks, services, dependency injection and forms.
• Intermediate (sections 9 to 12): routing, guards, lazy loading, HTTP, RxJS operators and Subjects, testing, accessibility, performance, three projects and deployment.
• Advanced (sections 13 to 18): effects and resources, directives and dynamic UI, architecture, configuration, error handling and NgModules (legacy), custom, dynamic and signal forms, state management, advanced routing, SEO, zoneless change detection, server-side rendering, advanced testing, end-to-end tests, security, CI/CD, troubleshooting and a final capstone.

If you already know the basics, jump to the stage you need. Every lesson links to the next one.

How this course works

Each lesson is short and builds on the last. You will write real code, so install the tools in the next lessons and follow along. Every lesson ends with a short exercise and a quick check so you can confirm that you understood it. By the end of the intermediate stage you will have built three small applications, and the advanced stage ends with a production-ready capstone.

Try it yourself

1. Think of an app you use every day. List three parts of its screen that could be components.
2. For one of those components, write down what data it would need to show.
3. Write one sentence describing what a service for that app might do.

Quick check

1. What is the main job of a component?
2. Which building block shows the right components for the current URL?
3. Why does Angular let you describe the screen instead of updating elements by hand?

Keep learning

The official site, angular.dev, has the reference documentation for everything in this course. Continue with TypeScript basics for Angular.