Angular Architecture

Angular Architecture Overview

Angular applications follow a clear, layered structure. At the top are NgModules that group related features together. Inside them live Components (UI), Services (logic), Directives (DOM behavior), and Pipes (data display).

The basic flow looks like this:

AppModule → Components → Templates → Services → HTTP/API → Back to Components

Your component asks a service for data, the service fetches it, and the component displays it in the template. That loop is the heart of every Angular application.

Modules, Components, and Services

• NgModule groups components, directives, and pipes. Every Angular app has at least one — AppModule.
• Component controls a piece of UI. It contains a template (HTML), styles (CSS), and logic (TypeScript) all in one place. Example: HeaderComponent.
• Service holds shared business logic, API calls, or state that multiple components need. Example: UserService.
• Directive adds behavior to or modifies existing DOM elements. Examples: *ngIf, *ngFor.
• Pipe transforms data for display in templates without touching the component. Examples: date, uppercase.

Angular Project Structure

When you create a new app with the Angular CLI, here's what you get:

my-app/

├── src/

│   ├── app/                    ← your application code lives here

│   │   ├── app.component.ts    ← root component (logic)

│   │   ├── app.component.html  ← root component template

│   │   ├── app.component.css   ← root component styles

│   │   └── app.module.ts       ← root module

│   ├── assets/                 ← images, fonts, static files

│   ├── environments/           ← dev and production config

│   ├── index.html              ← the single HTML entry point

│   └── main.ts                 ← bootstraps the Angular app

├── angular.json                ← CLI workspace configuration

├── package.json                ← npm dependencies

└── tsconfig.json               ← TypeScript configuration

The src/app/ folder is where you'll spend almost all of your time.