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!
