Angular Architecture
Angular architecture refers to the way an Angular application is organized and how its different parts interact with each other. Understanding this architecture is essential because every feature in Angular — routing, forms, HTTP requests — fits into this overall structure. Angular follows a component-based architecture, meaning the user interface is divided into small, reusable building blocks called components.
The Core Building Blocks
An Angular application is built from six primary building blocks. Each one has a specific role, and they work together to create the final application.
1. Modules
A module is a container that groups related components, services, and other code together. Every Angular application has at least one module called the Root Module, which is typically named AppModule. Modules help organize the application into logical sections and control which parts of the application are available where.
Think of a module like a folder on a computer — it keeps related files together and makes the project easier to navigate.
2. Components
A component is the most fundamental building block in Angular. Each component controls a specific section of the user interface. For example, a navigation bar, a product card, or a login form can each be a separate component.
Every component consists of three parts:
- A TypeScript class — contains the data and logic.
- An HTML template — defines what is displayed on the screen.
- A CSS stylesheet — controls the visual appearance (optional).
3. Templates
A template is the HTML that a component uses to display its content. Angular extends standard HTML with special syntax — such as {{ }} for displaying data and *ngIf for conditional rendering. This extended HTML is called an Angular template.
4. Services
A service is a class that contains business logic or shared functionality that multiple components can use. For example, fetching data from an API, calculating values, or managing user authentication are tasks that belong in a service — not in a component.
Keeping this logic in services rather than inside components keeps the components focused on displaying data, and the services focused on processing it.
5. Dependency Injection
Dependency Injection (DI) is the mechanism Angular uses to provide services to components and other services. Instead of a component creating its own instance of a service, Angular creates the service instance and "injects" it into the component automatically. This makes the code more flexible and easier to test.
6. Routing
The Router is the part of Angular that manages navigation. It maps URL paths to components, so when a user visits a specific URL (like /about), Angular displays the correct component without reloading the page.
How the Pieces Fit Together
Here is a step-by-step flow of what happens when an Angular application loads in the browser:
Step 1 — Browser Loads index.html
The browser downloads the single index.html file. This file contains the <app-root> tag, which is where the Angular application will be inserted.
Step 2 — main.ts Bootstraps the Application
The main.ts file runs first. It tells Angular to start the application using the root module (AppModule).
Step 3 — AppModule Declares the Root Component
AppModule tells Angular which component to use as the starting point. This is the AppComponent, which maps to the <app-root> tag in index.html.
Step 4 — AppComponent Renders
Angular loads the AppComponent and renders its HTML template in the browser. This template typically contains the navigation and a <router-outlet> tag where different page components are displayed.
Step 5 — Router Displays the Correct Page Component
Based on the current URL, the Angular Router loads the appropriate component inside the <router-outlet>. If the user navigates to /products, the ProductsComponent renders there.
Visual Representation of Angular Architecture
Browser
└── index.html
└── <app-root> ← AppComponent renders here
├── <app-navbar> ← NavbarComponent
└── <router-outlet> ← Router inserts page components here
├── HomeComponent (when URL is /)
├── ProductsComponent (when URL is /products)
└── ContactComponent (when URL is /contact)
Each Component can use:
└── Services (via Dependency Injection)
└── HttpClient (to call external APIs)
The Role of Each File in a Component
When the Angular CLI generates a component named product, it creates four files:
product/
├── product.component.ts ← Logic and data
├── product.component.html ← What appears on screen
├── product.component.css ← Visual styling
└── product.component.spec.ts ← Automated tests
product.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-product', // HTML tag to use this component
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent {
productName = 'Wireless Headphones';
price = 49.99;
}
product.component.html
<div>
<h2>{{ productName }}</h2>
<p>Price: ${{ price }}</p>
</div>
The {{ productName }} and {{ price }} syntax pulls the values from the TypeScript class and displays them in the HTML. This is called interpolation.
Modules in Detail
The root module (AppModule) is defined in app.module.ts. It uses a decorator called @NgModule with four important properties:
@NgModule({
declarations: [AppComponent, ProductComponent], // Components in this module
imports: [BrowserModule, AppRoutingModule], // Other modules to use
providers: [ProductService], // Services available app-wide
bootstrap: [AppComponent] // Starting component
})
export class AppModule { }
declarations
Lists all the components that belong to this module. A component must be declared in a module before it can be used.
imports
Lists other modules whose features this module needs. For example, importing BrowserModule gives access to core Angular features for the browser.
providers
Lists services that should be available throughout the application.
bootstrap
Specifies which component Angular should load first when the application starts.
Data Flow in Angular
Data in Angular flows in a clear, predictable direction:
From Component to Template
Properties defined in the TypeScript class appear in the HTML template using interpolation {{ }} or property binding [property]="value".
From Template to Component
User actions (like clicking a button or typing in an input) send data back to the TypeScript class using event binding (event)="method()".
Between Components
A parent component can send data to a child component using @Input(). A child component can send data back to the parent using @Output().
Between Components and Services
Components request data or perform actions by calling methods on injected services. Services handle the actual data processing or API calls and return the result to the component.
Summary
Angular architecture is built around six core concepts: modules, components, templates, services, dependency injection, and routing. The application starts from main.ts, bootstraps through AppModule, and renders AppComponent into index.html. Components control specific sections of the UI, templates define what is displayed, and services handle shared logic. The router maps URLs to components. Dependency injection ensures that services are provided automatically wherever needed. This architecture keeps code organized, reusable, and maintainable as the application grows.