Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Chart-Anwendung

Hallo, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von AngularJS und Diagrammanwendungen. Als dein freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, dich durch dieses Abenteuer zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen mit den Grundlagen und arbeiten uns nach oben. Also hol dir eine Tasse Kaffee (oder dein Lieblingsgetränk) und tauchen wir ein!

AngularJS - Chart Application

Was ist AngularJS?

Bevor wir mit der Erstellung von Diagrammen beginnen, lassen Sie uns verstehen, was AngularJS ist. Stell dir vor, du baust ein Haus. AngularJS ist wie das Gerüst, das dir hilft, dein Haus effizient zu strukturieren. Es ist ein auf JavaScript basierendes Open-Source-Frontend-Webanwendungsrahmenwerk, das es einfacher macht, dynamische, einseitige Anwendungen zu erstellen.

Wichtige Funktionen von AngularJS

Funktion Beschreibung
Zweifach-Datenbindung Synchronisiert automatisch Daten zwischen Modell und Ansicht
Abhängigkeitseinjection Hilft dabei, Komponenten wiederverwendbar, wartbar und testbar zu machen
Direktiven Ermöglicht es dir, HTML mit benutzerdefinierten Attributen und Elementen zu erweitern
Vorlagen Verwendet HTML mit spezieller Markierung als Vorlagen
MVC-Architektur Folgt dem Model-View-Controller-Muster für bessere Organisation

Einrichtung unserer Diagrammanwendung

Nun, da wir eine grundlegende Vorstellung von AngularJS haben, lassen uns unsere Diagrammanwendung einrichten. Wir werden eine Bibliothek namens Chart.js zusammen mit AngularJS verwenden, um schöne, responsive Diagramme zu erstellen.

Schritt 1: Einfügen der notwendigen Dateien

Zuerst müssen wir AngularJS und Chart.js in unsere HTML-Datei einfügen. Füge die folgenden Zeilen in den <head>-Bereich deiner HTML-Datei ein:

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

Schritt 2: Erstellen des AngularJS-Moduls

Jetzt erstellen wir unser AngularJS-Modul. In deiner JavaScript-Datei fügst du hinzu:

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

Diese Zeile erstellt ein AngularJS-Modul namens 'chartApp'. Denke daran als das Erstellen eines neuen Kochbuchs für unsere Diagramm-Erstellung!

Erstellung unseres ersten Diagramms

begeister von der visuellen Magie? Lassen uns unser erstes Diagramm erstellen – ein einfaches Balkendiagramm, das die Beliebtheit von Programmiersprachen zeigt.

Schritt 1: Einrichtung der HTML

In deiner HTML-Datei fügst du folgendes hinzu:

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

Dies erstellt ein Canvas-Element, in das unser Diagramm gezeichnet wird. Die ng-app- und ng-controller-Direktiven verbinden unsere HTML mit unserer AngularJS-Anwendung und unserem Controller.

Schritt 2: Erstellen des Controllers

In deiner JavaScript-Datei fügst du hinzu:

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: 'Beliebtheit von Programmiersprachen',
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, das ist eine Menge Code! Aber keine Sorge, lassen wir es auseinanderbrechen:

  1. Wir erstellen einen Controller namens 'ChartController'.
  2. Wir holen den Kontext unseres Canvas-Elements.
  3. Wir erstellen ein neues Chart-Objekt und geben an, dass es ein Balkendiagramm ist.
  4. Wir stellen Daten für das Diagramm bereit, einschließlich Beschriftungen und Datensätze.
  5. Wir setzen Optionen für das Diagramm, wie z.B. den y-Achsenanfang bei Null.

Das Diagramm dynamisch machen

Statische Diagramme sind cool, aber dynamische Diagramme sind cooler! Lassen uns unser Diagramm so anpassen, dass es Daten aus unserem AngularJS-Scope verwendet.

Schritt 1: Aktualisierung des Controllers

Passe deinen Controller so an, dass er wie folgt aussieht:

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: 'Beliebtheit von Programmiersprachen',
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();
});

Hier haben wir unsere Daten in $scope-Variablen verschoben und eine updateChart-Funktion erstellt.

Schritt 2: Hinzufügen von Benutzereingaben

Lassen wir einige Eingabefelder hinzufügen, damit Benutzer die Diagrammdaten aktualisieren können:

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

Jetzt wird das Diagramm automatisch aktualisiert, wenn du die Zahlen in den Eingabefeldern änderst!

Fazit

Glückwunsch! Du hast gerade deine erste dynamische Diagrammanwendung mit AngularJS und Chart.js erstellt. Wir haben heute viel Boden coberter, von den Grundlagen von AngularJS bis hin zur Erstellung interaktiver Diagramme.

Denke daran, dass das Beherrschen des Programmierens wie das Kochen lernen ist – es erfordert Übung, Experimentieren und die Bereitschaft, aus Fehlern zu lernen. Also habe keine Angst, den Code zu spielen, verschiedene Diagrammtypen auszuprobieren oder neue Funktionen hinzuzufügen.

In meinen Jahren des Unterrichtens habe ich gesehen, wie Schüler von kompletten Anfängern zu tollen Anwendungen entwickelt haben. Mit Ausdauer und Neugier wirst du很快 in der Lage sein, komplexe, schöne Datenvisualisierungen zu erstellen!

Weiterschreiben, weiterlernen und vor allem: Spaß haben! Bis下次, fröhliches Diagramm erstellen!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Übersetzungsanwendung
Nächstes Tutorial:
AngularJS - Kartenanwendung