Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application Météo

Bonjour à tous, futurs superstars du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant pour créer une application météo käyttäen AngularJS. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai votre guide amical à travers cette aventure, tout comme j'ai été pour des centaines d'étudiants au fil des ans. Alors, mettons nos manches et plongeons dedans !

AngularJS - Weather Application

Qu'est-ce qu'AngularJS ?

Avant de commencer à construire notre application météo, parlons un peu d'AngularJS. Imaginez que vous construisez une maison. AngularJS est comme le squelette de cette maison - il fournit la structure et le support pour votre application web. C'est un puissant framework JavaScript qui nous aide à créer des applications à page unique dynamiques avec facilité.

Configuration deNotre Projet

Étape 1 : Inclure AngularJS

Premierement, nous devons inclure AngularJS dans notre projet. Nous allons le faire en ajoutant une balise script à notre fichier HTML :

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Mon Application Météo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Notre application ira ici -->
<script src="app.js"></script>
</body>
</html>

Voyez ce ng-app="weatherApp" dans la balise <html> ? Cela dit à AngularJS : "Hey, c'est là que vit notre application !"

Étape 2 : Créer Notre App

Maintenant, créons notre fichier app.js :

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

Cette ligne, c'est comme dire : "Salut, AngularJS ! Veuillez créer une nouvelle application appelée 'weatherApp'." Simple, non ?

Construction deNotre Application Météo

Étape 3 : Créer un Contrôleur

Dans AngularJS, les contrôleurs sont où nous mettons le comportement de notre application. Créons-en un :

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;
});
};
});

Whaou, c'est beaucoup ! Décomposons cela :

  1. Nous créons un contrôleur appelé 'WeatherController'.
  2. $scope est comment nous passons des données entre notre contrôleur et notre vue.
  3. $http est la manière d'AngularJS de faire des requêtes HTTP.
  4. Nous créons une fonction appelée getWeather qui va fetcher les données météo lorsque called.

Étape 4 : Créer Notre Vue

Maintenant, mettons à jour notre HTML pour utiliser notre contrôleur :

<body ng-controller="WeatherController">
<h1>Application Météo</h1>
<input type="text" ng-model="city" placeholder="Entrez le nom de la ville">
<button ng-click="getWeather()">Obtenir la Météo</button>

<div ng-if="weather.main">
<h2>Météo à {{weather.name}}</h2>
<p>Température : {{weather.main.temp}}°C</p>
<p>Description : {{weather.weather[0].description}}</p>
</div>
</body>

Voici ce qui se passe :

  1. ng-controller="WeatherController" connecte notre vue à notre contrôleur.
  2. ng-model="city" lie l'input à notre variable $scope.city.
  3. ng-click="getWeather()" appelle notre fonction getWeather lorsque le bouton est cliqué.
  4. ng-if="weather.main" n'affiche les informations météo que si nous avons fetché des données.
  5. {{}} est comment nous affichons les données de notre $scope dans la vue.

Rendre Ça Joli

Étape 5 : Ajouter un Peu de Style

Ajoutons un peu de CSS pour rendre notre application jolie :

<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>

Mettre Tout Ensemble

Voici notre fichier index.html complet :

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Mon Application Météo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS de l'Étape 5 va ici */
</style>
</head>
<body ng-controller="WeatherController">
<h1>Application Météo</h1>
<input type="text" ng-model="city" placeholder="Entrez le nom de la ville">
<button ng-click="getWeather()">Obtenir la Météo</button>

<div ng-if="weather.main">
<h2>Météo à {{weather.name}}</h2>
<p>Température : {{weather.main.temp}}°C</p>
<p>Description : {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

Et voici notre fichier app.js complet :

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;
});
};
});

Conclusion

Et voilà, les amis ! Nous avons construit une application météo simple mais fonctionnelle käyttäen AngularJS. Souvenez-vous, apprendre à coder, c'est comme apprendre une nouvelle langue - cela prend de la pratique et de la patience. Ne soyez pas découragés si vous ne comprenez pas tout de suite. Continuez à expérimenter, continuez à coder, et surtout, continuez à vous amuser !

Voici un tableau récapitulatif des principaux concepts AngularJS que nous avons utilisés :

Concept Description
ng-app Définit l'élément racine d'une application AngularJS
ng-controller Définit le contrôleur pour une section de l'application
ng-model Lie un input à une variable dans le scope
ng-click Définit un événement de clic
ng-if Conditionnellement rend un élément
{{}} Affiche les données du scope dans la vue
$scope Passe les données entre le contrôleur et la vue
$http Fait des requêtes HTTP

Bonne programmation à tous ! Souvenez-vous, chaque expert était autrefois un débutant. Continuez à vous entraîner, et avant de savoir, vous serez à construire des applications incroyables. Maintenant, allaitez et conquérez le monde du codage !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Partage d'application
Tutoriel suivant:
AngularJS - Application de minuteur