El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Arquitectura d'Angular

Següent ►
►

En aquest tema, explorarem l'arquitectura d'Angular, que és essencial per entendre com funciona aquest framework i com estructurar les nostres aplicacions de manera eficient. Angular és un framework de desenvolupament d'aplicacions web basat en TypeScript, creat per Google. La seva arquitectura està dissenyada per ser modular, escalable i mantenible.

Conceptes Clau

  1. Mòduls

  • NgModule: Angular utilitza mòduls per organitzar el codi en unitats lògiques. Cada aplicació Angular té almenys un mòdul, el mòdul principal (AppModule).
  • Declaracions: Components, directives i pipes que pertanyen a aquest mòdul.
  • Importacions: Altres mòduls que aquest mòdul necessita.
  • Exportacions: Components, directives i pipes que aquest mòdul fa disponibles per a altres mòduls.
  • Proveïdors: Serveis que aquest mòdul proporciona.
  • Bootstrap: Component principal que Angular carrega al iniciar l'aplicació.

  1. Components

  • Component: La unitat bàsica de l'UI en una aplicació Angular. Cada component té una plantilla HTML, una classe TypeScript per a la lògica i un full d'estils CSS.
  • Selector: Etiqueta HTML que identifica el component.
  • Plantilla: Defineix la vista del component.
  • Estils: Defineixen l'aparença del component.

  1. Directives

  • Directives estructurals: Canvien l'estructura del DOM (ex. *ngIf, *ngFor).
  • Directives d'atribut: Canvien l'aparença o el comportament d'un element existent (ex. ngClass, ngStyle).

  1. Pipes

  • Pipes: Transformen les dades en les plantilles (ex. | date, | uppercase).

  1. Serveis i Injecció de Dependències

  • Serveis: Classes que encapsulen la lògica de negoci i poden ser compartides entre components.
  • Injecció de Dependències (DI): Patró de disseny que Angular utilitza per proporcionar serveis als components i altres serveis.

  1. Enrutament

  • Router: Mòdul que permet la navegació entre diferents vistes o components de l'aplicació.

Estructura d'una Aplicació Angular

Una aplicació Angular típica té la següent estructura de carpetes:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   ├── app.module.ts
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   └── ...
├── angular.json
├── package.json
└── ...

Explicació de Fitxers i Carpetes Clau

  • app.module.ts: Defineix el mòdul principal de l'aplicació.
  • app.component.ts: Component principal de l'aplicació.
  • main.ts: Punt d'entrada de l'aplicació.
  • index.html: Fitxer HTML principal que carrega l'aplicació Angular.
  • angular.json: Fitxer de configuració del projecte Angular.
  • package.json: Fitxer de configuració de dependències del projecte.

Exemples Pràctics

Exemple de Mòdul

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyService } from './services/my-service.service';

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

Exemple de Component

// app.component.ts
import { Component } from '@angular/core';

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

Exemple de Servei

// my-service.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'Hello from MyService!';
  }
}

Exemple d'Enrutament

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';

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

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

Exercicis Pràctics

Exercici 1: Crear un Component

  1. Crea un nou component anomenat HelloComponent.
  2. Defineix una propietat message a la classe del component.
  3. Mostra el valor de message a la plantilla del component.

Solució

// hello.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  message = 'Hello, Angular!';
}
<!-- hello.component.html -->
<p>{{ message }}</p>

Exercici 2: Crear un Servei

  1. Crea un nou servei anomenat GreetingService.
  2. Defineix un mètode getGreeting que retorni un missatge de salutació.
  3. Utilitza aquest servei en el HelloComponent per mostrar el missatge de salutació.

Solució

// greeting.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GreetingService {
  getGreeting() {
    return 'Hello from GreetingService!';
  }
}
// hello.component.ts
import { Component, OnInit } from '@angular/core';
import { GreetingService } from '../services/greeting.service';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
  message: string;

  constructor(private greetingService: GreetingService) {}

  ngOnInit() {
    this.message = this.greetingService.getGreeting();
  }
}
<!-- hello.component.html -->
<p>{{ message }}</p>

Resum

En aquest tema, hem explorat l'arquitectura d'Angular, incloent-hi els mòduls, components, directives, pipes, serveis i enrutament. Hem vist com aquests elements treballen junts per crear aplicacions modulars, escalables i mantenibles. També hem proporcionat exemples pràctics i exercicis per reforçar els conceptes apresos. Amb aquesta base, estàs preparat per aprofundir en els següents mòduls del curs.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats