Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Übersetzungsanwendung

Hallo da draußen, zukünftiger Codingsuperstar! Heute werden wir eine aufregende Reise in die Welt von AngularJS antreten und lernen, wie man eine Übersetzungsanwendung erstellt. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide sein, und wir werden Schritt für Schritt vorgehen. Am Ende dieses Tutorials wirst du eine coole kleine App haben, die Text in verschiedene Sprachen übersetzen kann. Wie genial ist das denn?

AngularJS - Translate Application

Was ist AngularJS?

Bevor wir uns unserer Übersetzungsanwendung widmen, lassen wir uns einen Moment Zeit nehmen, um zu verstehen, was AngularJS ist. Stell dir vor, du baust ein Haus. AngularJS ist wie das Gerüst, das dir hilft, dein Haus effizient zu organisieren und zu strukturieren. Es ist ein leistungsstarkes JavaScript-Framework, das es einfacher macht, dynamische Webanwendungen zu erstellen.

Einrichtung unseres Projekts

Schritt 1: AngularJS einbinden

Zuerst einmal müssen wir AngularJS in unser Projekt einbinden. Wir tun dies, indem wir einen Script-Tag in unsere HTML-Datei einfügen:

<!DOCTYPE html>
<html>
<head>
<title>Mein toller Übersetzer</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Hier fügen wir unseren App-Inhalt hinzu -->
</body>
</html>

Diese Zeile von Code ist wie das Einladen von AngularJS zu unserer Party. Sieweist unseren Browser an, die AngularJS-Bibliothek zu laden, damit wir ihre Superkräfte nutzen können.

Schritt 2: Unser App-Modul erstellen

Nun erstellen wir unsere AngularJS-App. Wir tun dies, indem wir einen Script-Tag am Ende unseres Body-Tags hinzufügen:

<body ng-app="translatorApp">
<!-- App-Inhalt hier -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

Hier sagen wir AngularJS, "Hey, wir möchten eine App namens 'translatorApp' erstellen." Das ng-app-Attribut im Body-Tag ist wie ein Namensschild für unsere App, damit AngularJS weiß, wo unsere App lebt.

Erstellung unseres Übersetzers

Schritt 3: Einen Controller erstellen

In AngularJS sind Controller wie das Gehirn unserer Operation. Sie verwalten die Daten und das Verhalten unserer App. Lassen wir uns einen erstellen:

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

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

$scope.translate = function() {
// Hier fügen wir unsere Übersetzungslologie hinzu
$scope.outputText = "Übersetzung wird durchgeführt...";
};
});
</script>

Dieser Controller initialisiert zwei Variablen (inputText und outputText) und eine translate-Funktion. Denke daran, dass diese wie Behälter für unsere Eingabe, Ausgabe und den magischen Übersetzungsprozess dienen.

Schritt 4: Die Benutzeroberfläche erstellen

Nun erstellen wir eine einfache Benutzeroberfläche für unseren Übersetzer:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Mein toller Übersetzer</h1>
<textarea ng-model="inputText" placeholder="Geben Sie hier den zu übersetzenden Text ein"></textarea>
<button ng-click="translate()">Übersetzen</button>
<p>{{ outputText }}</p>
</div>

<!-- Script-Tags hier -->
</body>

Lassen wir das auseinanderbrechen:

  • Wir verwenden ng-controller, um unser HTML mit unserem Controller zu verbinden.
  • ng-model="inputText" bindet das Textarea an unsere inputText-Variable.
  • ng-click="translate()" weist AngularJS an, unsere translate-Funktion auszuführen, wenn die Schaltfläche geklickt wird.
  • {{ outputText }} zeigt den Wert von outputText an.

Hinzufügen von Übersetzungsfunktionalität

Schritt 5: Integration eines Übersetzungsdienstes

Um unseren Übersetzer tatsächlich funktionieren zu lassen, müssen wir einen Übersetzungsdienst verwenden. Für dieses Beispiel verwenden wir den kostenlosen MyMemory Translation API. Wir müssen eine HTTP-Anfrage senden,also fügen wir den $http-Dienst zu unserem Controller hinzu:

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 = "Ups! Etwas ist schiefgelaufen.";
});
};
});

Dieser aktualisierte Controller enthält nun die Sprachauswahl und sendet eine Anfrage an den Übersetzungsdienst, wenn die Übersetzungsfunktion aufgerufen wird.

Schritt 6: Aktualisierung der Benutzeroberfläche

Lassen wir unsere HTML-Datei aktualisieren, um die Sprachauswahl hinzuzufügen:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Mein toller Übersetzer</h1>
<select ng-model="fromLang">
<option value="en">Englisch</option>
<option value="es">Spanisch</option>
<option value="fr">Französisch</option>
</select>
<select ng-model="toLang">
<option value="en">Englisch</option>
<option value="es">Spanisch</option>
<option value="fr">Französisch</option>
</select>
<textarea ng-model="inputText" placeholder="Geben Sie hier den zu übersetzenden Text ein"></textarea>
<button ng-click="translate()">Übersetzen</button>
<p>{{ outputText }}</p>
</div>

<!-- Script-Tags hier -->
</body>

Fazit

Glückwunsch! Du hast gerade eine einfache, aber funktionelle Übersetzungsanwendung mit AngularJS erstellt. Hier ist eine schnelle Zusammenfassung dessen, was wir gelernt haben:

  1. Wir haben eine AngularJS-Anwendung eingerichtet
  2. Wir haben einen Controller erstellt, um das Verhalten unserer App zu verwalten
  3. Wir haben eine Benutzeroberfläche mit AngularJS-Direktiven erstellt
  4. Wir haben einen Übersetzungsdienst integriert, um echte Funktionalität bereitzustellen

Denke daran, dass das Lernen von Code eine Reise ist. Keine Sorge, wenn einige Teile zuerst verwirrend erscheinen – mit Übung wird es alles Sinn ergeben. Bleibe neugierig, bleibe neugierig und lerne weiter, und bald wirst du noch komplexere und aufregendere Anwendungen erstellen!

Hier ist eine Tabelle, die die Hauptbegriffe summarisch darstellt, die wir in AngularJS verwendet haben:

Konzept Beschreibung Beispiel
Modul Behälter für die App angular.module('translatorApp', [])
Controller Verwalten des App-Verhaltens app.controller('TranslatorController', function($scope) {...})
Scope Verbindet Controller mit der Ansicht $scope.inputText = ''
Direktiven Erweitert HTML ng-app, ng-controller, ng-model, ng-click
Ausdrücke Zeigt Werte an {{ outputText }}

Frohes Coden und möge deine Übersetzungsabenteuer frei von Fehlern und voller Lernfreude sein!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Warenkorb-Anwendung
Nächstes Tutorial:
AngularJS - Chart-Anwendung