Blog

Angular framework – 5 esercizi per skillarti

Possedere una certa dimestichezza con i framework front end (e non) è un requisito importante per intraprendere una carriera lavorativa come web developer. La conoscenza dei linguaggi per sviluppare siti e web è senza dubbio la base, ma conoscere il linguaggio JavaScript (o CSS e HTML) non apre automaticamente tutte le porte per ambire al ruolo di full stack developer.

Angular framework è, ad oggi, uno degli strumenti più utilizzati dagli sviluppatori. Conoscerlo è sicuramente un plus, ben visto dai datori di lavoro e permette a voi sviluppatori di semplificare (e non di poco) le operazioni in fase di progettazione e sviluppo di un app web.

Ma Angular cos’è?

Si tratta di un framework modulare open source, che fa della scalabilità e flessibilità i suoi punti di forza. Costituisce l’evoluzione di AngularJS. Il linguaggio usato per sviluppare con questo framework è TypeScript, ma la conoscenza del linguaggio JavaScript è fondamentale.

Andando più in profondità…

 

Angular a cosa serve?

Angular permette di realizzare applicazioni multipiattaforma, adattando facilmente la base di codice a diversi dispositivi e diverse esigenze; la compilazione e il deploy producono codice JavaScript che può essere servito da qualsiasi server web. Questa soluzione si rivela, nelle sue versioni più recenti, la scelta migliore per la realizzazione di interfacce web, soprattutto in casi di sistemi complessi, modulari, in cui diverse UI su diverse piattaforme condividono una base di funzionalità e di codice.

In questo articolo vedremo 5 importanti esercizi in Angular per skillarti. Che tu sia esperto o alle prime armi, non importa! Prova a cimentarti in queste brevi sfide.

1. Costruisci una toolbar usando i decoratori ng-content e @Input():

 1. import { Component, Input } from '@angular/core';
 2.  
 3. @Component({
 4.   selector: 'app-toolbar',
 5.   template: `
 6.     <div class="toolbar">
 7.       <ng-content></ng-content>
 8.     </div>
 9.   `,
10.   styles: [`
11.     .toolbar {
12.       background-color: #f2f2f2;
13.       padding: 10px;
14.       display: flex;
15.       justify-content: flex-start;
16.       align-items: center;
17.     }
18.   `]
19. })
20. export class ToolbarComponent {
21.   @Input() title: string;
22. }

Nel codice sopra, abbiamo definito ToolbarComponent con un selettore di ‘app-toolbar’. Il modello del componente contiene un elemento <div> con la barra degli strumenti del nome della classe. All’interno di <div>, utilizziamo ng-content per proiettare il contenuto inserito all’interno dei tag app-toolbar. Il componente ha anche una singola proprietà @Input() chiamata title, che può essere utilizzata per impostare dinamicamente il titolo della barra degli strumenti.

Successivamente, puoi utilizzare il componente app-toolbar in un altro componente Angular aggiungendolo al modello e fornendo un valore titolo. Sentiti libero di realizzare a tuo piacimento un codice HTML per fornire uno stile unico alla tua toolbar!

2. Costruisci un “formattatore” per carte di credito. Utilizza @Pipe() e PipeTransform che è un’interfaccia.

 1. import { Pipe, PipeTransform } from '@angular/core';
 2.  
 3. @Pipe({
 4.   name: 'creditCardFormatter'
 5. })
 6. export class CreditCardFormatterPipe implements PipeTransform {
 7.   transform(creditCardNumber: string): string {
 8.     // Remove all non-numeric characters from the input
 9.     const cleanedNumber = creditCardNumber.replace(/\D/g, '');
10.  
11.     // Split the cleaned number into groups of 4 digits
12.     const groups = cleanedNumber.match(/.{1,4}/g);
13.  
14.     // Join the groups with a space between each group
15.     const formattedNumber = groups ? groups.join(' ') : '';
16.  
17.     return formattedNumber;
18.   }
19. }

Il codice creato è facilmente comprensibile: definiamo la classe CreditCardFormatterPipe che implementa l’interfaccia PipeTransform. Il metodo transform accetta il numero di carta di credito di input come stringa e restituisce il numero di carta di credito formattato.

 All’interno del metodo transform, per prima cosa rimuoviamo tutti i caratteri non numerici dalla stringa di input utilizzando un’espressione regolare. Quindi, usiamo il metodo match per dividere il numero pulito in gruppi di 4 cifre. Infine, ci uniamo ai gruppi con uno spazio tra ogni gruppo utilizzando il metodo join.

 

3. Costruisci un componente “card”. Per aiutarti utilizza di nuovo ng-content e @Input().

 1. import { Component, Input } from '@angular/core';
 2.  
 3. @Component({
 4.   selector: 'app-card',
 5.   template: `
 6.     <div class="card">
 7.       <div class="card-header">
 8.         <ng-content select="[cardHeader]"></ng-content>
 9.       </div>
10.       <div class="card-body">
11.         <ng-content select="[cardBody]"></ng-content>
12.       </div>
13.       <div class="card-footer">
14.         <ng-content select="[cardFooter]"></ng-content>
15.       </div>
16.     </div>
17.   `,
18.   styles: [`
19.     .card {
20.       background-color: #ffffff;
21.       border-radius: 4px;
22.       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
23.       padding: 20px;
24.     }
25.  
26.     .card-header {
27.       margin-bottom: 10px;
28.     }
29.  
30.     .card-footer {
31.       margin-top: 10px;
32.     }
33.   `]
34. })
35. export class CardComponent {}

Abbiamo definito CardComponent con un selettore di ‘app-card’. Il template del componente contiene un elemento <div> con il nome della classe card, che rappresenta il contenitore della card. All’interno della scheda, abbiamo tre elementi <div>: card-header, card-body e card-footer. Utilizziamo ng-content con l’attributo select per proiettare il contenuto posizionato all’interno di specifici tag di contenuto.

 

4. Costruisci un componente di valutazione basato su stelle (come nei classici modelli per recensioni). Ricorda di utilizzare @Component(), @Input(), ngFor, and ngIf.

 1. import { Component, Input } from '@angular/core';
 2.  
 3. @Component({
 4.   selector: 'app-star-rating',
 5.   template: `
 6.     <div class="star-rating">
 7.       <span
 8.         *ngFor="let star of stars; let i = index"
 9.         [class.full]="i < rating"
10.         [class.half]="i === Math.floor(rating) && rating % 1 !== 0"
11.       >
12.     ★
13.       </span>
14.     </div>
15.   `,
16.   styles: [`
17.     .star-rating {
18.       color: #ffbf00;
19.       font-size: 24px;
20.     }
21.  
22.     .star-rating span {
23.       display: inline-block;
24.       transition: color 0.2s;
25.     }
26.  
27.     .star-rating span.full {
28.       color: #ffbf00;
29.     }
30.  
31.     .star-rating span.half {
32.       position: relative;
33.       color: #ffbf00;
34.       overflow: hidden;
35.     }
36.   `]
37. })
38. export class StarRatingComponent {
39.   @Input() rating: number;
40.   stars: number[];
41.  
42.   constructor() {
43.     this.stars = [1, 2, 3, 4, 5];
44.   }
45. }

Nel codice riportato, creiamo StarRatingComponent con un selettore di ‘app-star-rating’. Il modello del componente contiene un elemento <div> con il nome della classe star-rating. All’interno del div di valutazione a stelle, usiamo ngFor per iterare su una serie di stelle e visualizzarle in base alla valutazione fornita. La valutazione viene passata come proprietà @Input().

All’interno del ciclo ngFor, applichiamo la classe completa alle stelle che hanno un indice inferiore al valore di valutazione, indicando una stella piena. Applichiamo la classe anche alla stella con un indice pari al valore floor del rating e un valore decimale diverso da zero, che indica una mezza stella.

 

5. Crea una finestra di pop-up servendoti di @Component(), @Input(), ng-content, fadeInOutAnimation, ngIf, (click), of(), delay(), pipe(), and unsubscribe().

 1. import { Component, Input, OnDestroy } from '@angular/core';
 2. import { Observable, of, Subscription } from 'rxjs';
 3. import { delay, tap } from 'rxjs/operators';
 4.  
 5. @Component({
 6.   selector: 'app-popup',
 7.   template: `
 8.     <div class="popup" *ngIf="showPopup" [@fadeInOutAnimation]>
 9.       <div class="popup-content">
10.         <ng-content></ng-content>
11.       </div>
12.     </div>
13.   `,
14.   styles: [`
15.     .popup {
16.       position: fixed;
17.       top: 50%;
18.       left: 50%;
19.       transform: translate(-50%, -50%);
20.       background-color: #fff;
21.       padding: 20px;
22.       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
23.       border-radius: 4px;
24.       z-index: 999;
25.     }
26.  
27.     .popup-content {
28.       text-align: center;
29.     }
30.   `],
31.   animations: [
32.     fadeInOutAnimation()
33.   ]
34. })
35. export class PopupComponent implements OnDestroy {
36.   @Input() showPopup: boolean;
37.   private subscription: Subscription;
38.  
39.   constructor() { }
40.  
41.   ngOnDestroy() {
42.     this.unsubscribe();
43.   }
44.  
45.   private unsubscribe() {
46.     if (this.subscription && !this.subscription.closed) {
47.       this.subscription.unsubscribe();
48.     }
49.   }
50. }

In questo ultimo esercizio un po’ più complesso, il modello del componente contiene un elemento <div> con il nome della classe popup che rappresenta il contenitore popup. All’interno del div popup, utilizziamo ngIf per visualizzare in modo condizionale il popup in base all’input showPopup.

Il contenuto del pop-up viene proiettato utilizzando ng-content all’interno di un <div> con il nome della classe popup-content. Applichiamo anche un’animazione chiamata fadeInOutAnimation per sfumare dolcemente il pop-up in entrata e in uscita.

La classe PopupComponent implementa l’interfaccia OnDestroy per garantire una corretta pulizia quando il componente viene distrutto. Abbiamo una variabile subscription privata di tipo Subscription per tenere traccia e annullare l’iscrizione a qualsiasi abbonamento in corso.

 

Il potenziale di Angular 2 è enorme, sta a te capire come sfruttarlo al meglio. Questi esercizi servono per migliorare la tua comprensione globale del framework e cercare di spingerti oltre quelli che magari sono i tuoi limiti, comprendendo il funzionamento basilare di questo strumento molto utile. Se vuoi saperne di più su Angular framework, non perderti la nostra guida ad Angular in italiano! 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
La programmazione JavaScript ha subito un forte cambiamento con l’introduzione di Node.js, che è subito diventato un requisito fondamentale nello sviluppo di un’app in linguaggio JavaScript lato …
Qualsiasi programmatore informatico che si rispetti, ne abbiamo parlato tante volte, possiede una buona conoscenza dello strumento GitHub. Ad oggi, risulta essere un requisito spesso e volentieri nece…
Il frontend è una parte fondamentale dello sviluppo di siti web. Il ruolo dello sviluppatore front end è, ad oggi, una figura sempre più ricercata e diffusa, grazie all’ampio mercato che il web d…

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.