Angular Basics

The Architecture of an Angular App

Angular is a framework for building applications with HTML and TypeScript. Think of it as a structured system for creating complex, single-page applications (SPAs) where the user experience is fluid and fast. Instead of loading new pages from a server, Angular dynamically rewrites the current page.

Angular is a platform and framework for building single-page client applications using HTML and TypeScript.

The core of an Angular application is its component-based architecture. The user interface is broken down into a tree of individual, reusable pieces called components. A central concept that organizes these components is the NgModule.

NgModule

noun

A container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It groups components, directives, pipes, and services that are related.

Every Angular app has at least one root module, usually named AppModule. This module ties everything together and is the entry point for launching the app. For more complex applications, you might create feature modules to keep your code organized.

Components The Building Blocks

If modules are the containers, components are the fundamental building blocks inside them. A component controls a patch of screen called a view. For example, you might have a navigation bar component, a user profile component, and a list of products component, all working together on a single page.

Each component is a self-contained unit with its own logic, template (HTML), and styles (CSS).

A component is defined using a TypeScript class. This class is then decorated with the @Component decorator, which provides metadata that tells Angular how to process and use the class. Here’s a basic example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world', // The custom HTML tag
  template: '<h1>{{ message }}</h1>', // The view
  styles: ['h1 { color: blue; }'] // Scoped styles
})
export class HelloWorldComponent {
  // The logic and data for the view
  message = 'Hello, Angular World!';
}

Let's break down the metadata:

selector: This defines a custom HTML tag. To use this component, you would place <app-hello-world></app-hello-world> in another template.
template: This is the HTML that defines the component's view. It can be inline or in a separate file (templateUrl).
styles: These are CSS styles that apply only to this component's template.

Templates and Data Binding

A component's template is more than just static HTML. It's dynamic, and Angular connects it to the component's TypeScript class through a mechanism called data binding. Data binding synchronizes data between your logic and your view.

Binding Type	Syntax	Direction	Description
Interpolation	`{{ data }}`	Class → Template	Displays a component property's value as text.
Property Binding	`[property]="data"`	Class → Template	Sets an element's property to a component property's value.
Event Binding	`(event)="handler()"`	Template → Class	Runs a component method when a user event occurs.

Imagine a simple counter component. The count is stored in the class, and the user can increment it by clicking a button. The template would use data binding to display the current count and listen for the click event.

<!-- counter.component.html -->

<h2>Counter</h2>
<p>Current count: {{ count }}</p>

<button (click)="increment()">Add 1</button>

Here, {{ count }} uses interpolation to display the count property from the component's class. (click)="increment()" uses event binding to call the increment method in the class whenever the button is clicked.

Directives and Services

Directives are classes that add extra behavior to elements in your templates. There are three kinds of directives in Angular:

Components: These are directives with a template.
Structural directives: These change the DOM layout by adding and removing elements. The most common are *ngIf (conditionally adds an element) and *ngFor (repeats an element for each item in a list).
Attribute directives: These change the appearance or behavior of an element, component, or another directive. For example, ngModel modifies the behavior of a form input.

<!-- A list of items using *ngFor -->
<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

<!-- A message that only appears if the user is logged in -->
<p *ngIf="isLoggedIn">Welcome back!</p>

While components handle the view, services are where you put business logic, data, or functions that need to be shared across different components. A service is just a plain TypeScript class. For example, you might have a UserService to handle user authentication or a DataService to fetch information.

To use a service, you rely on Angular's dependency injection (DI) system. You register the service with Angular (usually at the module level), and then Angular's injector is responsible for creating and providing an instance of that service to any component that requests it.

Dependency injection is a design pattern where a class requests dependencies from external sources rather than creating them itself.

You request a service in a component's constructor:

import { Component } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({ /* ... */ })
export class UserProfileComponent {
  user: any;

  constructor(private userService: UserService) {
    this.user = this.userService.getCurrentUser();
  }
}

In this example, Angular's injector sees that UserProfileComponent needs UserService, so it creates (or gets an existing instance of) UserService and passes it to the constructor. This makes your components leaner and easier to test.

Quiz Questions 1/6

What is the primary role of an NgModule in an Angular application?

Quiz Questions 2/6

In the context of the @Component decorator, which property defines the custom HTML tag used to instantiate the component in a template?

These are the core concepts that form the foundation of any Angular application. Understanding how modules, components, templates, and services work together is the first step to building powerful web apps.

Full Stack Credit Card Recommender