Let’s discover Angular
Introduction
Angular is a TypeScript-based open-source web application framework maintained by Google and first released in 2016. It provides a full-featured platform for building dynamic, single-page applications with strong typing and modular architecture.
Key features
Component and module system for encapsulation and code organization
Two-way data binding with Angular Forms
Dependency injection for flexible, testable services
Built-in routing and navigation via the Angular Router
Ahead-of-Time (AOT) compilation and tree-shaking for optimized bundles
Common use cases
Enterprise-grade single-page applications with complex UI logic
Progressive Web Apps (PWAs) leveraging Service Workers
Cross-platform mobile and desktop apps with Ionic or Electron
Dynamic dashboards and data-driven interfaces with Angular Material
With its opinionated architecture, rich CLI tooling, and extensive ecosystem, Angular remains a popular choice for large-scale, maintainable web applications.
Key concepts
– Components: encapsulate HTML, CSS, and logic
– Modules: group related components and services
– Services & Dependency Injection: share logic/data across components
– Templates & Data Binding: sync UI and model (interpolation, property/event binding)
– Directives: extend HTML (structural, attribute)
– Angular CLI: scaffolds, builds, and serves projects
Basic Component Example
// src/app/hello.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-hello’,
template: `<h2>Hello, {{ name }}!</h2>
<button (click)= »changeName() »>Change Name</button>`
})
export class HelloComponent {
name = ‘Angular’;
changeName() { this.name = ‘World’; }
}
The @Component decorator registers the class as a component and sets its selector () and inline template.
The template uses interpolation ({{ name }}) to show the name property and binds a click event to changeName().
The HelloComponent class initializes name = ‘Angular’ and provides changeName() to set name to ‘World’.
At runtime Angular instantiates the component, renders “Hello, Angular!”, and on button click updates the view to “Hello, World!” via its change detection.
Getting Started
Install the CLI:
npm install -g @angular/cli
Create a new app:
ng new my-app
cd my-app
Serve locally:
ng serve –open