Introducció

Angular és un framework de desenvolupament d'aplicacions web que segueix una arquitectura basada en components. Aquesta arquitectura permet crear aplicacions modulars, escalables i mantenibles. En aquesta secció, explorarem els components clau de l'arquitectura d'Angular i com interactuen entre ells.

Components clau de l'arquitectura d'Angular

Mòduls (Modules)
Components
Plantilles (Templates)
Directives
Serveis (Services)
Injecció de dependències (Dependency Injection)
Enrutament (Routing)

Mòduls (Modules)

Els mòduls són la unitat bàsica d'organització en una aplicació Angular. Cada aplicació Angular té almenys un mòdul, el mòdul principal (AppModule). Els mòduls permeten agrupar components, directives, pipes i serveis relacionats.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Components

Els components són els blocs de construcció de l'aplicació. Cada component té una plantilla HTML associada que defineix la vista i una classe TypeScript que defineix el comportament.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

Plantilles (Templates)

Les plantilles defineixen la vista d'un component. Utilitzen HTML i directives Angular per mostrar dades i gestionar esdeveniments.

<!-- app.component.html -->
<h1>{{ title }}</h1>

Directives

Les directives són instruccions que es poden aplicar a elements del DOM per modificar el seu comportament o aspecte. Hi ha tres tipus de directives:

Directives d'atribut: Modifiquen l'aparença o comportament d'un element.
Directives estructurals: Canvien l'estructura del DOM.
Components: Són directives amb una plantilla associada.

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

Serveis (Services)

Els serveis són classes que encapsulen la lògica de negoci i poden ser reutilitzades en diferents components. S'injecten als components mitjançant el sistema d'injecció de dependències d'Angular.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Data1', 'Data2', 'Data3'];
  }
}

Injecció de dependències (Dependency Injection)

L'injecció de dependències és un patró de disseny que permet a les classes Angular rebre les dependències que necessiten en lloc de crear-les elles mateixes. Això facilita la reutilització i les proves.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html'
})
export class DataComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

Enrutament (Routing)

L'enrutament permet navegar entre diferents vistes o components dins de l'aplicació. Angular utilitza el RouterModule per configurar les rutes.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Resum

En aquesta secció, hem explorat els components clau de l'arquitectura d'Angular, incloent mòduls, components, plantilles, directives, serveis, injecció de dependències i enrutament. Aquests elements treballen junts per crear aplicacions Angular modulars, escalables i mantenibles. En el proper mòdul, aprofundirem en els components d'Angular i com crear-los i utilitzar-los de manera efectiva.

Arquitectura d'Angular

Introducció

Components clau de l'arquitectura d'Angular

Mòduls (Modules)

Components

Plantilles (Templates)

Directives

Serveis (Services)

Injecció de dependències (Dependency Injection)

Enrutament (Routing)

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques