{"id":31283,"date":"2025-02-05T15:15:07","date_gmt":"2025-02-05T14:15:07","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=31283"},"modified":"2025-02-05T15:17:53","modified_gmt":"2025-02-05T14:17:53","slug":"angular-resource-api-la-guida-completa","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-resource-api-la-guida-completa\/","title":{"rendered":"Angular Resource API: la guida completa"},"content":{"rendered":"\n

Il rilascio di Angular v19<\/strong>, avvenuto poche settimane fa, segna un traguardo importante nella rivoluzione dei signal all’interno del framework, con le API Input<\/a><\/strong>, Model<\/a><\/strong>, Output<\/a><\/strong> e Signal Queries<\/a><\/strong> ora ufficialmente promosse a stabili<\/strong>.<\/p>\n\n\n\n

Ma non \u00e8 tutto! Questa versione major introduce anche nuovi strumenti potenti progettati per far progredire ulteriormente la rivoluzione dei signal: la nuova Resource API<\/strong>.<\/p>\n\n\n\n

Come suggerisce il nome, questa nuova Resource API<\/strong> \u00e8 progettata per semplificare il caricamento di risorse asincrone<\/strong> sfruttando tutta la potenza dei signal!<\/p>\n\n\n\n

\n
\n

IMPORTANTE:<\/strong> al momento della scrittura, la nuova Resource API \u00e8 ancora in fase sperimentale<\/strong>. Ci\u00f2 significa che potrebbe subire modifiche prima di diventare stabile, quindi usatela a vostro rischio. \ud83d\ude05<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n

Vediamo insieme in che modo ci pu\u00f2 semplificare la gestione delle risorse asincrone!<\/p>\n\n\n\n

\n\n\n\n

La nuova Resource API<\/h2>\n\n\n\n

La maggior parte delle signal API sono sincrone, ma nelle applicazioni del mondo reale \u00e8 fondamentale gestire risorse asincrone, come il recupero dei dati da un server o la gestione delle interazioni dell’utente in tempo reale.<\/p>\n\n\n\n

\u00c8 qui che entra in gioco la nuova Resource API<\/strong>.<\/p>\n\n\n\n

Utilizzando una Resource<\/code><\/strong>, \u00e8 possibile consumare facilmente una risorsa asincrona<\/strong> tramite i signal<\/strong>, consentendo di gestire facilmente il recupero dei dati, gli stati di caricamento e far partire una nuova richiesta ogni volta che i parametri del signal associato cambiano.<\/p>\n\n\n\n

La funzione resource( )<\/h3>\n\n\n\n

Il modo pi\u00f9 semplice per creare una Resource<\/code><\/strong> \u00e8 utilizzare la funzione resource()<\/strong><\/code>:<\/p>\n\n\n

import<\/span> { resource, signal } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> RESOURCE_URL = 'https:\/\/jsonplaceholder.typicode.com\/todos\/'<\/span>;\n<\/span><\/span>\n<\/span><\/span>private<\/span> id = signal(1<\/span>);\n<\/span><\/span>\n<\/span><\/span>private<\/span> myResource = resource({\n<\/span><\/mark>    request: ()<\/span> =><\/span> ({ id: this<\/span>.id() }),\n<\/span><\/mark>    loader: ({ request<\/span> }<\/span>) =><\/span> fetch(RESOURCE_URL + request.id),\n<\/span><\/mark>});\n<\/span><\/mark><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Questa funzione accetta un oggetto di configurazione ResourceOptions<\/strong><\/code> come input, permettendoci di specificare le seguenti propriet\u00e0:<\/p>\n\n\n\n