AngularJS - Modulen

Hallo, zukünftige Programmierer! Heute tauchen wir in die Welt der AngularJS-Module ein. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Sie Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Lassen Sie uns gemeinsam diese aufregende Reise antreten!

AngularJS - Modules

Was sind AngularJS-Module?

Stellen Sie sich vor, Sie bauen eine riesige Lego-Struktur. Anstatt alles auf einmal zu bauen, würden Sie wahrscheinlich kleinere, handhabbare Teile erstellen, die Sie später kombinieren können. Genau das machen Module in AngularJS!

Module in AngularJS sind Behälter für verschiedene Teile Ihrer Anwendung. Sie helfen Ihnen, Ihren Code zu organisieren, was ihn einfacher zu warten und zu verstehen macht. Denken Sie daran als ordentlich beschriftete Kisten, in denen Sie verschiedene Funktionalitäten Ihrer App lagern.

Anwendungsmodul

Das Anwendungsmodul ist wie die Hauptkiste, die alle anderen Kisten enthält. Es ist der Ort, an dem Ihre AngularJS-Anwendung beginnt. Lassen Sie uns unser erstes Anwendungsmodul erstellen:

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

Hier ist, was in dieser Zeile passiert:

angular.module() ist eine Funktion, die ein neues Modul erstellt.
'myApp' ist der Name, den wir unserem Modul geben.
Das leere Array [] ist der Ort, an dem wir eventuelle Abhängigkeiten unseres Moduls auflisten würden (das werden wir später besprechen).

Controller-Modul

Nun, da wir unsere Hauptkiste (Anwendungsmodul) haben, lassen Sie uns einige kleinere Kisten hineinlegen. Eine davon ist das Controller-Modul. Controller in AngularJS verwalten die Daten Ihrer Anwendung. So können Sie einen Controller erstellen:

myApp.controller('MyController', function($scope) {
$scope.message = "Hallo, AngularJS!";
});

Lassen Sie uns das auseinandernehmen:

myApp.controller() fügt einen neuen Controller zu unserem myApp-Modul hinzu.
'MyController' ist der Name, den wir diesem Controller geben.
Die Funktion definiert, was dieser Controller macht.
$scope ist ein besonderes Objekt, das dem Controller ermöglicht, mit der Ansicht (HTML) zu kommunizieren.

Module verwenden

Nun, da wir unsere Module erstellt haben, wie verwenden wir sie actually? Es ist einfacher, als Sie denken! Sie müssen sie nur in Ihrem HTML referenzieren. So geht's:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine AngularJS-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Beachten Sie einige wichtige Punkte hier:

ng-app="myApp" tells AngularJS, dass dies, wo unsere App lebt.
ng-controller="MyController" wendet unseren Controller auf den Körper an.
{{message}} wird die Nachricht anzeigen, die wir in unserem Controller definiert haben.

Beispiel

Lassen Sie uns alles mit einem etwas komplexeren Beispiel zusammenbringen. Wir erstellen eine einfache Todo-Listen-Anwendung:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Lerne AngularJS', done: false},
{text: 'Baue eine App', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Und hier ist der entsprechende HTML-Code:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Todo-Liste</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>Todo-Liste</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Füge eine neue Todo hinzu">
<input type="submit" value="Hinzufügen">
</form>
<script src="app.js"></script>
</body>
</html>

Ausgabe

Wenn Sie diesen Code ausführen, sehen Sie eine einfache Todo-Listen-Anwendung. Sie können neue Todos hinzufügen und sie abhaken, wenn Sie sie erledigt haben. Die Magie geschieht durch die Interaktion zwischen unseren Modulen (definiert in app.js) und unserem HTML.

Schlussfolgerung

Und das ist es! Wir sind durch die Welt der AngularJS-Module gereist, von der grundlegenden Idee bis hin zu einer funktionierenden Todo-Listen-Anwendung. Denken Sie daran, Module sind wie Lego-Steine - sie helfen Ihnen, komplexe Strukturen schrittweise zu bauen. Während Sie Ihre AngularJS-Abenteuer fortsetzen, werden Sie noch mehr Möglichkeiten entdecken, Module zur Erstellung leistungsfähiger, effizienter Webanwendungen zu nutzen.

Weiter üben, bleibe neugierig und vor allem, haben Sie Spaß beim Programmieren! Wer weiß? Die nächste revolutionäre App könnte gerade an Ihren Fingerspitzen liegen!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - HTML DOM

Nächstes Tutorial:

AngularJS - Formulare