Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application de Traduction

Bonjour là-bas, future superstar du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS et apprendre à créer une application de traduction. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai votre guide amical, et nous avancerons pas à pas. À la fin de ce tutoriel, vous aurez une petite application sympa qui peut traduire du texte entre différentes langues. Ça c'est génial, non ?

AngularJS - Translate Application

Qu'est-ce qu'AngularJS ?

Avant de plonger dans notre application de traduction, penchons-nous un moment sur ce qu'est AngularJS. Imaginez que vous construisez une maison. AngularJS est comme le cadre qui vous aide à organiser et structurer votre maison efficacement. C'est un puissant framework JavaScript qui rend plus facile la création d'applications web dynamiques.

Configuration deNotre Projet

Étape 1 : Inclure AngularJS

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

<!DOCTYPE html>
<html>
<head>
<title>Mon Super Traducteur</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Nous ajouterons le contenu de notre application ici -->
</body>
</html>

Cette ligne de code est comme inviter AngularJS à notre fête. Elle dit à notre navigateur de charger la bibliothèque AngularJS afin que nous puissions utiliser ses superpuissances.

Étape 2 : Créer Notre Module App

Maintenant, créons notre application AngularJS. Nous allons le faire en ajoutant une balise script à la fin de notre corps :

<body ng-app="translatorApp">
<!-- Contenu de l'application ici -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

Ici, nous disons à AngularJS : "Hey, nous voulons créer une application appelée 'translatorApp'." L'attribut ng-app dans la balise body est comme mettre un nom sur notre application pour que AngularJS sache où vit notre application.

Construction deNotre Traducteur

Étape 3 : Créer un Contrôleur

Dans AngularJS, les contrôleurs sont comme les cerveaux de notre opération. Ils gèrent les données et le comportement de notre application. Créons-en un :

<script>
var app = angular.module('translatorApp', []);

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// Nous ajouterons notre logique de traduction ici
$scope.outputText = "Traduction en cours...";
};
});
</script>

Ce contrôleur configure deux variables (inputText et outputText) et une fonction translate. Pensez à ces variables comme des conteneurs pour notre entrée, notre sortie et le processus magique de traduction.

Étape 4 : Créer l'Interface Utilisateur

Maintenant, créons une interface simple pour notre traducteur :

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Mon Super Traducteur</h1>
<textarea ng-model="inputText" placeholder="Entrez le texte à traduire"></textarea>
<button ng-click="translate()">Traduire</button>
<p>{{ outputText }}</p>
</div>

<!-- Balises script ici -->
</body>

Reprenons cela :

  • Nous utilisons ng-controller pour connecter notre HTML à notre contrôleur.
  • ng-model="inputText" lie la zone de texte à notre variable inputText.
  • ng-click="translate()" dit à AngularJS d'exécuter notre fonction translate lorsque le bouton est cliqué.
  • {{ outputText }} affiche la valeur de outputText.

Ajout de la Fonctionnalité de Traduction

Étape 5 : Intégrer un API de Traduction

Pour que notre traducteur fonctionne vraiment, nous devons utiliser un service de traduction. Pour cet exemple, nous allons utiliser l'API de traduction gratuite MyMemory. Nous devons faire une requête HTTP, donc ajoutons le service $http à notre contrôleur :

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "Oups ! Quelque chose s'est mal passé.";
});
};
});

Ce contrôleur mis à jour inclut maintenant la sélection de la langue et fait une requête à l'API de traduction lorsque la fonction translate est appelée.

Étape 6 : Mettre à Jour l'Interface Utilisateur

Mettons à jour notre HTML pour inclure la sélection de la langue :

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Mon Super Traducteur</h1>
<select ng-model="fromLang">
<option value="en">Anglais</option>
<option value="es">Espagnol</option>
<option value="fr">Français</option>
</select>
<select ng-model="toLang">
<option value="en">Anglais</option>
<option value="es">Espagnol</option>
<option value="fr">Français</option>
</select>
<textarea ng-model="inputText" placeholder="Entrez le texte à traduire"></textarea>
<button ng-click="translate()">Traduire</button>
<p>{{ outputText }}</p>
</div>

<!-- Balises script ici -->
</body>

Conclusion

Félicitations ! Vous venez de construire une application de traduction simple mais fonctionnelle avec AngularJS. Voici un résumé rapide de ce que nous avons appris :

  1. Nous avons configuré une application AngularJS
  2. Nous avons créé un contrôleur pour gérer le comportement de notre application
  3. Nous avons construit une interface utilisateur en utilisant des directives AngularJS
  4. Nous avons intégré un API de traduction pour fournir une fonctionnalité réelle

N'oubliez pas, apprendre à coder est un voyage. Ne vous inquiétez pas si certaines parties semblent confuses au départ - avec la pratique, tout deviendra plus clair. Continuez à expérimenter, continuez à apprendre, et avant que vous ne vous en rendiez compte, vous serez en train de construire des applications encore plus complexes et passionnantes !

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

Concept Description Exemple
Module Conteneur pour l'application angular.module('translatorApp', [])
Contrôleur Gère le comportement de l'application app.controller('TranslatorController', function($scope) {...})
Scope Connecte le contrôleur à la vue $scope.inputText = ''
Directives Étends HTML ng-app, ng-controller, ng-model, ng-click
Expressions Affiche des valeurs {{ outputText }}

Bonne programmation, et que vos aventures de traduction soient exemptes de bugs et pleines d'apprentissage !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Application Panier
Tutoriel suivant:
AngularJS - Application de graphique