Angular
- Pronunciation
- ANG-gyuh-ler
In short
Angular is a complete, TypeScript-based web framework from Google with components, routing, forms, an HTTP client and dependency injection built in.
What is Angular?
Angular is developed by Google. The original AngularJS appeared in 2010; Angular, released in 2016, is a complete rewrite in TypeScript and is a different framework despite the shared name. Where React focuses on rendering, Angular aims to give you everything an application needs in one officially supported package.
An Angular app is built from components: TypeScript classes with a template and styles. Services hold shared logic and data, and Angular's dependency injection system hands them to the components that ask for them. The framework also includes a router, form handling with validation, an HTTP client and testing tools, and the Angular CLI creates, builds and tests projects with standard commands.
Recent versions have modernized the framework. Standalone components removed the need for modules, signals offer a simpler way to track changing state and update the page, and a new control flow syntax such as @if and @for replaced older template directives. Server-side rendering is built in as well.
A common misconception is that Angular and AngularJS are the same. AngularJS reached end of life in 2021, and code written for it doesn't run in modern Angular. Angular is often chosen by large companies and enterprise teams that value its strong conventions, though its learning curve is steeper than Vue's or React's.
Key takeaways
- Angular is a complete TypeScript web framework developed by Google.
- It includes routing, forms, an HTTP client and dependency injection.
- Components are TypeScript classes with templates; services hold shared logic.
- Signals and standalone components modernized recent versions.
- Angular is a rewrite of, and different from, the old AngularJS.
Example
import { Component, signal } from "@angular/core";
@Component({
selector: "app-counter",
template: `
<button (click)="increment()">Clicked {{ count() }} times</button>
@if (count() > 5) {
<p>That's a lot of clicks!</p>
}
`,
})
export class CounterComponent {
count = signal(0);
increment() {
this.count.update((n) => n + 1);
}
}Readers ask
What is the difference between Angular and AngularJS?
AngularJS (2010) was the original JavaScript framework. Angular (2016) is a complete rewrite in TypeScript with a different architecture; AngularJS code doesn't run in Angular, and AngularJS is no longer supported.
Is Angular better than React?
Neither is better in general. Angular is a full framework with strong conventions, which suits large teams that want one way of doing things. React is a smaller library that leaves more choices to you and its ecosystem.
Does Angular use TypeScript?
Yes. Angular is written in TypeScript, and Angular applications are written in TypeScript too.
Often compared
See also
- TypeScriptWeb Development, p. 50TypeScript is a programming language built on JavaScript that adds static types, catching many bugs before the code runs, and compiles to plain JavaScript.
- FrameworkProgramming Fundamentals, p. 20A framework is a reusable foundation of code, tools, and conventions that provides the structure of an application, so developers only fill in their own logic.
- Dependency InjectionSoftware Architecture, p. 12Dependency injection is a design technique in which an object receives the other objects it needs from the outside instead of creating them itself.
- SPAWeb Development, p. 41An SPA is a web application that loads a single HTML page and then updates content with JavaScript, so moving between views does not reload the page.
- ReactWeb Development, p. 36React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
- VueWeb Development, p. 55Vue is an open-source JavaScript framework for building user interfaces from components, known for its gentle learning curve and reactive data.
- UI ComponentWeb Development, p. 51A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.
Spotted a mistake or something missing on this page?Suggest an edit