Learn Angular - Core Concepts & Main Architecture

#Introduction

In episode 1 you learned about Angular's history and position. Now it's time to open the hood: how Angular works behind the scenes and what the main building blocks of its architecture are.

Episode 2 covers two things: how it works behind the scenes — AOT and JIT compilation, change detection, and zone.js — and the main building blocks — modules, components, directives, services, template syntax, data binding, dependency injection, and lifecycle hooks. This understanding will make the hands-on episodes that follow make much more sense.

#How It Works Behind the Scenes

#AOT and JIT Compilation

Angular doesn't run templates directly. The HTML templates you write are compiled into efficient JavaScript code. There are two approaches:

• JIT (Just-In-Time): compilation happens in the browser as the application loads. Useful during development because the build process is faster.
• AOT (Ahead-Of-Time): compilation happens at build time. Templates are checked before release, errors are caught earlier, and the resulting bundle is smaller.

Modern Angular uses AOT by default, even in development. Compiler options are configured via angularCompilerOptions in tsconfig.json.

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }
}

The strictTemplates config makes Angular check types inside HTML templates — errors like calling a property that doesn't exist get caught at build time instead of runtime. This is one reason Angular feels "strict" but safe.

#Change Detection and zone.js

Every time an event, HTTP response, or timer fires, Angular needs to know which part of the template changed. zone.js patches browser async APIs so Angular knows when a change happens, then runs change detection to update the view.

By default Angular checks every component from top to bottom. In episode 15 you'll learn the OnPush strategy to limit checking to only the components whose data actually changed.

#Modules, Components, Directives, and Services

These are the four main building blocks:

• Component: a unit of view — selector, template, and styles.
• Directive: adds behavior to an element, such as validation or highlighting.
• Service: business logic and data shared between components.
• Module (legacy NgModule): a container that groups components, directives, and pipes. Since standalone components, NgModule is no longer required.

template -> kompilasi AOT -> kode efisien -> change detection saat event

#Main Building Blocks and Their Workflow

#Angular Project Structure

A project created with ng new has a standard structure: src/app for application code, src/main.ts for bootstrap, angular.json for build configuration, and tsconfig*.json for TypeScript.

ng new arsitektur-app --style=scss --ssr=false
tree src/app

Notice the root component app.component.ts, its template app.component.html, and app.config.ts, which holds global providers such as the router and HTTP client.

#Template Syntax, Data Binding, and Dependency Injection

Angular templates are HTML plus special syntax. Interpolation displays values with double braces, property binding binds values to element properties, and event binding captures events from the user.

Data binding in a template

import { Component, signal } from '@angular/core';
 
@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
    <input [value]="nama()" (input)="nama.set($any($event.target).value)" />
    <p>Halo, {{ nama() }}</p>
    <button (click)="reset()">Reset</button>
  `,
})
export class HelloComponent {
  readonly nama = signal('');
 
  reset(): void {
    this.nama.set('');
  }
}

Notice the binding patterns: [value] sends a value to an element, (input) receives an event, and {{ }} displays output. Dependency injection then supplies services to components via the constructor or the inject function — details covered in episode 6.

#Component Lifecycle Hooks

Angular components go through a lifecycle you can tap into with hooks:

• ngOnChanges: called when an input changes.
• ngOnInit: called once after the first property binding.
• ngOnDestroy: called before the component is destroyed.

Basic lifecycle hooks

import { Component, OnInit, OnDestroy } from '@angular/core';
 
@Component({
  selector: 'app-lifecycle',
  standalone: true,
  template: `<p>Komponen lifecycle aktif</p>`,
})
export class LifecycleComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    console.log('Komponen diinisialisasi');
  }
 
  ngOnDestroy(): void {
    console.log('Komponen dihancurkan');
  }
}

The ngOnDestroy hook is the right place to clean up subscriptions and timers so you don't leak memory.

#Wrap Up

Key takeaways:

• AOT is Angular's default: templates are compiled at build time and errors are caught early.
• zone.js triggers change detection; the OnPush strategy gets optimized in episode 15.
• The four main building blocks: components, directives, services, and modules.
• Angular templates use interpolation, property binding, and event binding.
• Lifecycle hooks such as ngOnInit and ngOnDestroy control a component's lifecycle.
• NgModule is no longer required because standalone components have been the default since Angular 17.

In the next episode, episode 3, we'll build our first Angular project — creating an application with ng new, understanding the folder structure and key files, running the dev server with live reload, and setting up TypeScript, linting, and formatting. You'll see all these architecture concepts take shape in a real project.