Unit
- Angular history: Originally released in 2016 as Angular 2, it is a complete rewrite of AngularJS (1.x). It is maintained by Google and a large open-source community. The framework follows a component-based architecture that encourages modular development and reusability.
- Single-page application paradigm: Angular enables SPAs where the entire application loads once and subsequent page changes happen client-side without full server round trips. This provides a smoother user experience similar to native desktop apps.
- TypeScript foundation: Angular is built with TypeScript, a typed superset of JavaScript that compiles to plain JavaScript. TypeScript adds static type checking, interfaces, enums, and modern ES features, reducing runtime errors and improving developer tooling with autocompletion and refactoring support.
- Component-based architecture: Every visual element is a component consisting of a TypeScript class, an HTML template, and optional styles. Components are organized in a hierarchical tree, making the UI structure clear and easy to maintain.
- Dependency injection system: Angular has a built-in DI framework that manages the creation and sharing of service instances. Services are registered with injectors and provided to components or other services, promoting loose coupling and testability.
- Powerful CLI tooling: The Angular CLI (
ngcommand) automates project scaffolding, development server, testing, and production builds. Commands likeng generatequickly create components, services, modules, and more with boilerplate code. - Comprehensive ecosystem: Angular includes modules for routing, forms, HTTP communication, animations, and internationalization out of the box. Third-party libraries are often available through npm, and the community provides extensive documentation.
- Cross-platform development: With frameworks like Ionic and NativeScript, Angular can target mobile devices and desktop applications using the same codebase. Progressive Web App support enables offline capabilities.
- Enterprise features: Angular provides change detection, zone.js for async operation tracking, ahead-of-time compilation for faster rendering, and strict mode options for code quality. These features make it suitable for large teams and complex applications.
System Architecture
Pattern: Component-based architecture with hierarchical injection
Components:
- Modules: NgModules group related components, directives, pipes, and services. The root module (
AppModule) bootstraps the application. - Components: Each component controls a part of the screen via a template. They receive data through inputs and emit events through outputs.
- Services: Singleton objects that provide shared logic or data. They are injected into components or other services via DI.
- Router: Maps URL paths to components and manages navigation history. Guards control access and resolve data before activation.
- Directives and Pipes: Structural directives change DOM layout (e.g.,
*ngIf), attribute directives modify element behavior, and pipes transform data in templates.
Code Example
TypeScript
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: '{{ greeting }}
',
styles: ['h1 { color: blue; }']
})
export class HelloComponent {
greeting: string = 'Hello, Angular!';
}This minimal component defines a selector (app-hello) that can be used in other templates. The template property contains inline HTML with an interpolation {{ greeting }}. The class property greeting is bound to the template. Styles are scoped to this component using the styles array.
Quick Revision
- Angular is a TypeScript-based framework for building SPAs with a component architecture.
- TypeScript provides static typing and modern features that improve code quality and tooling.
- The Angular CLI automates project creation, code generation, and build operations.
- Components are the basic building blocks, each with a class, template, and styles.
- Dependency injection allows services to be shared across the application efficiently.
- Angular includes integrated solutions for routing, forms, HTTP, and more.