AngularJS - Applicazione Meteo

Ciao a tutti, futuri superstelle del coding! Oggi ci imbarcheremo in un viaggio emozionante per creare un'applicazione meteo utilizzando AngularJS. Non preoccupatevi se non avete mai scritto una riga di codice prima – sarò il vostro guida amichevole in questa avventura, proprio come ho fatto per innumerevoli studenti negli anni della mia insegnanza. Allora, mettiamo le maniche su e tuffiamoci!

AngularJS - Weather Application

Cos'è AngularJS?

Prima di iniziare a costruire la nostra app meteo, parliamo di AngularJS. Immagina di costruire una casa. AngularJS è come la struttura di quella casa – fornisce la struttura e il supporto per la tua applicazione web. È un potente framework JavaScript che ci aiuta a creare applicazioni a pagina singola dinamiche con facilità.

Configurazione del Nostro Progetto

Passo 1: Includere AngularJS

Prima di tutto, dobbiamo includere AngularJS nel nostro progetto. Lo faremo aggiungendo un tag script al nostro file HTML:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>La Mia App Meteo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- La nostra app andrà qui -->
<script src="app.js"></script>
</body>
</html>

Vedi quello ng-app="weatherApp" nel tag <html>? Sta dicendo ad AngularJS, "Ecco dove risiede la nostra app!"

Passo 2: Creare La Nostra App

Ora, creiamo il nostro file app.js:

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

Questa riga è come dire, "Ciao, AngularJS! Per favore, crea una nuova app chiamata 'weatherApp'." Semplice, vero?

Costruire La Nostra App Meteo

Passo 3: Creare Un Controller

In AngularJS, i controller sono dove mettiamo il comportamento della nostra app. Creiamo uno:

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Wow, è molto! Scomponiamo:

Stiamo creando un controller chiamato 'WeatherController'.
$scope è come passiamo i dati tra il controller e la vista.
$http è il modo di AngularJS per fare richieste HTTP.
Stiamo creando una funzione chiamata getWeather che fetcherà i dati meteo quando chiamata.

Passo 4: Creare La Nostra Vista

Ora, aggiorniamo il nostro HTML per utilizzare il nostro controller:

<body ng-controller="WeatherController">
<h1>App Meteo</h1>
<input type="text" ng-model="city" placeholder="Inserisci il nome della città">
<button ng-click="getWeather()">Ottieni Meteo</button>

<div ng-if="weather.main">
<h2>Meteo a {{weather.name}}</h2>
<p>Temperatura: {{weather.main.temp}}°C</p>
<p>Descrizione: {{weather.weather[0].description}}</p>
</div>
</body>

Ecco cosa sta succedendo:

ng-controller="WeatherController" connette la nostra vista al nostro controller.
ng-model="city" lega l'input alla variabile $scope.city.
ng-click="getWeather()" chiama la nostra funzione getWeather quando il pulsante viene cliccato.
ng-if="weather.main" mostra solo le informazioni meteo se abbiamo fetched i dati.
{{}} è come mostriamo i dati dal $scope nella vista.

Rendere Tutto Più Bello

Passo 5: Aggiungere Qualche Stile

Aggiungiamo un po' di CSS per rendere la nostra app più gradevole:

<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input, button {
font-size: 16px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>

Mettere Tutto Insieme

Ecco il nostro file index.html completo:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>La Mia App Meteo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS da Passo 5 qui */
</style>
</head>
<body ng-controller="WeatherController">
<h1>App Meteo</h1>
<input type="text" ng-model="city" placeholder="Inserisci il nome della città">
<button ng-click="getWeather()">Ottieni Meteo</button>

<div ng-if="weather.main">
<h2>Meteo a {{weather.name}}</h2>
<p>Temperatura: {{weather.main.temp}}°C</p>
<p>Descrizione: {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

Ecco il nostro file app.js completo:

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

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Conclusione

Eccoci, ragazzi! Abbiamo creato una semplice ma funzionale app meteo utilizzando AngularJS. Ricorda, imparare a codificare è come imparare una nuova lingua – richiede pratica e pazienza. Non ti scoraggiare se non capisci tutto subito. Continua a sperimentare, a codificare e, soprattutto, a divertirti!

Ecco una tabella che riassume i principali concetti di AngularJS che abbiamo utilizzato:

Concetto	Descrizione
ng-app	Definisce l'elemento radice di un'applicazione AngularJS
ng-controller	Definisce il controller per una sezione dell'applicazione
ng-model	Lega un input a una variabile nello scope
ng-click	Definisce un evento di clic
ng-if	Rende un elemento condizionalmente
{{}}	Mostra i dati dallo scope nella vista
$scope	Passa i dati tra il controller e la vista
$http	Fa richieste HTTP

Buon codice a tutti! Ricorda, ogni esperto era una volta un principiante. Continua a provare, e prima di sapere, sarai costruire applicazioni straordinarie. Ora, vai avanti e conquista il mondo del coding!

Credits: Image by storyset

Tutorial precedente:

AngularJS - Condivisione Applicazione

Prossimo tutorial:

AngularJS - Applicazione Timer