Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - Applicazione Grafico

Ciao, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di AngularJS e delle applicazioni grafico. Come il tuo amico insegnante di scienze informatiche del quartiere, sono entusiasta di guidarti in questa avventura. Non preoccuparti se sei nuovo alla programmazione - inizieremo dalle basi e progressivamente ci getteremo lì. Allora, prenditi una tazza di caffè (o la tua bevanda preferita) e tuffati!

AngularJS - Chart Application

Cos'è AngularJS?

Prima di creare grafici, capiremo cos'è AngularJS. Immagina di costruire una casa. AngularJS è come il telaio che ti aiuta a strutturare la tua casa in modo efficiente. È un framework open-source basato su JavaScript per le applicazioni web front-end che rende più facile creare applicazioni a pagina singola dinamiche.

Funzionalità Chiave di AngularJS

Funzionalità Descrizione
Due-vie Data Binding Sincronizza automaticamente i dati tra il modello e la vista
Iniezione Dipendenze Aiuta a rendere i componenti riutilizzabili, manutenibili e testabili
Direttive Permette di estendere HTML con attributi e elementi personalizzati
Template Utilizza HTML con markup speciale come template
Architettura MVC Segue il pattern Model-View-Controller per una migliore organizzazione

Configurazione della Nostra Applicazione Grafico

Ora che abbiamo una comprensione di base di AngularJS, configuriamo la nostra applicazione grafico. Useremo una libreria chiamata Chart.js insieme ad AngularJS per creare grafici bellissimi e reattivi.

Passo 1: Includere i File Necessari

Prima, dobbiamo includere AngularJS e Chart.js nel nostro file HTML. Aggiungi le seguenti righe nella sezione <head> del tuo HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

Passo 2: Creare il Modulo AngularJS

Ora, creiamo il nostro modulo AngularJS. Nel tuo file JavaScript, aggiungi:

var app = angular.module('chartApp', []);

Questa riga crea un modulo AngularJS chiamato 'chartApp'. Pensalo come se stessimo creando un nuovo libro di ricette per la nostra avventura di creazione di grafici!

Creazione del Nostro Primo Grafico

Emozionato di vedere della magia visiva? Creiamo il nostro primo grafico - un semplice grafico a barre che mostra la popolarità dei linguaggi di programmazione.

Passo 1: Configurare l'HTML

Nel tuo file HTML, aggiungi quanto segue:

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

Questo crea un elemento canvas dove il nostro grafico sarà disegnato. Le direttive ng-app e ng-controller collegano il nostro HTML alla nostra applicazione e controller AngularJS.

Passo 2: Creare il Controller

Nel tuo file JavaScript, aggiungi:

app.controller('ChartController', function($scope) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
datasets: [{
label: 'Popolarità dei Linguaggi di Programmazione',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});

Wow, tanto codice! Ma non preoccuparti, analizziamo:

  1. Creiamo un controller chiamato 'ChartController'.
  2. Otteniamo il contesto del nostro elemento canvas.
  3. Creiamo un nuovo oggetto Chart, specificando che è un grafico a barre.
  4. Forniamo dati per il grafico, inclusi etichette e set di dati.
  5. Impostiamo opzioni per il grafico, come l'inizio dell'asse y da zero.

Rendere il Nostro Grafico Dinamico

I grafici statici sono fantastici, ma i grafici dinamici sono ancora meglio! Modifichiamo il nostro grafico per utilizzare i dati dalla nostra portata AngularJS.

Passo 1: Aggiornare il Controller

Modifica il tuo controller per assomigliare a questo:

app.controller('ChartController', function($scope) {
$scope.languages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];
$scope.popularity = [12, 19, 3, 5, 2];

$scope.updateChart = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.languages,
datasets: [{
label: 'Popolarità dei Linguaggi di Programmazione',
data: $scope.popularity,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};

$scope.updateChart();
});

Qui, abbiamo spostato i nostri dati nelle variabili $scope e creato una funzione updateChart.

Passo 2: Aggiungere Input Utente

Aggiungiamo alcuni campi di input così gli utenti possono aggiornare i dati del grafico:

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
<div ng-repeat="language in languages">
{{language}}: <input type="number" ng-model="popularity[$index]" ng-change="updateChart()">
</div>
</div>

Ora, mentre cambi i numeri nei campi di input, il grafico si aggiornerà automaticamente!

Conclusione

Congratulazioni! Hai appena creato la tua prima applicazione grafico dinamica utilizzando AngularJS e Chart.js. Oggi abbiamo coperto molto, dai fondamentali di AngularJS alla creazione di grafici interattivi.

Ricorda, diventare competente in programmazione è come imparare a cucinare - richiede pratica, esperimenti e la volontà di imparare dagli errori. Quindi non aver paura di giocare con il codice, provare diversi tipi di grafici o aggiungere nuove funzionalità.

Nei miei anni di insegnamento, ho visto studenti passare da principianti a creatori di applicazioni straordinarie. Con perseveranza e curiosità, presto estarai a creare visualizzazioni dati complesse e bellissime!

Continua a programmare, continua a imparare e, soprattutto, divertiti! Fino alla prossima volta, happy charting!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Applicazione di Traduzione
Prossimo tutorial:
AngularJS - Applicazione Mappa