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

Utilitzant Serveis Angular

Següent ►
►

En aquest tema, aprendrem a utilitzar serveis Angular dins d'una aplicació Ionic. Els serveis són una part fonamental de l'arquitectura Angular, ja que permeten encapsular la lògica de negoci i compartir dades entre components de manera eficient.

Objectius

  • Entendre què són els serveis Angular i per què són útils.
  • Aprendre a crear i injectar serveis en una aplicació Ionic.
  • Veure exemples pràctics d'ús de serveis per gestionar dades.

Què és un Servei Angular?

Un servei Angular és una classe que conté lògica de negoci i pot ser compartida entre diferents components de l'aplicació. Els serveis són ideals per a tasques com:

  • Fer peticions HTTP.
  • Gestionar dades compartides.
  • Implementar lògica de negoci complexa.

Creant un Servei Angular

Pas 1: Crear el Servei

Utilitzarem l'eina de línia de comandes Angular CLI per crear un servei. Obre el terminal i executa la següent comanda:

ng generate service data

Això crearà dos fitxers: data.service.ts i data.service.spec.ts (per a proves).

Pas 2: Implementar el Servei

Obre el fitxer data.service.ts i implementa el servei. A continuació, es mostra un exemple bàsic d'un servei que gestiona una llista d'elements:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private items: string[] = [];

  constructor() { }

  addItem(item: string) {
    this.items.push(item);
  }

  getItems(): string[] {
    return this.items;
  }

  clearItems() {
    this.items = [];
  }
}

Pas 3: Injectar el Servei en un Component

Per utilitzar el servei en un component, primer hem d'injectar-lo en el constructor del component. A continuació, es mostra com fer-ho:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  items: string[] = [];

  constructor(private dataService: DataService) {}

  addItem(item: string) {
    this.dataService.addItem(item);
    this.items = this.dataService.getItems();
  }

  clearItems() {
    this.dataService.clearItems();
    this.items = [];
  }
}

Pas 4: Utilitzar el Servei en la Vista

Finalment, podem utilitzar el servei en la vista del component (home.page.html):

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Angular Service Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-input #itemInput placeholder="Enter item"></ion-input>
    <ion-button (click)="addItem(itemInput.value)">Add Item</ion-button>
  </ion-item>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
  <ion-button (click)="clearItems()">Clear Items</ion-button>
</ion-content>

Exercici Pràctic

Objectiu

Crear un servei que faci una petició HTTP a una API pública i mostri les dades en un component.

Instruccions

  1. Crear el Servei HTTP:

    • Utilitza Angular CLI per crear un servei anomenat api.
    • Implementa una funció que faci una petició GET a una API pública (per exemple, https://jsonplaceholder.typicode.com/posts).

  2. Injectar el Servei en un Component:

    • Injecta el servei en un component (per exemple, HomePage).
    • Utilitza el servei per obtenir les dades de l'API i mostrar-les en la vista.

Solució

api.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

home.page.ts:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  posts: any[] = [];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      API Data
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <ion-label>
        <h2>{{ post.title }}</h2>
        <p>{{ post.body }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Conclusió

En aquest tema, hem après què són els serveis Angular i com utilitzar-los dins d'una aplicació Ionic. Hem vist com crear un servei, injectar-lo en un component i utilitzar-lo per gestionar dades. Els serveis són una eina poderosa per organitzar i reutilitzar la lògica de negoci en les nostres aplicacions.

En el següent tema, explorarem com fer peticions HTTP i treballar amb APIs de manera més detallada.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats