AngularJS - Ansichten: Ein Anfängerguide
Hallo da drüben, zukünftige Programmierer! Heute tauchen wir in die aufregende Welt der AngularJS-Ansichten ein. Machen Sie sich keine Sorgen, wenn Sie vorher noch nie eine Zeile Code geschrieben haben - ich werde Ihr freundlicher Guide auf dieser Reise sein, genau wie ich es für unzählige Schüler in den letzten Jahren getan habe. Also holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und los geht's!
Was sind Ansichten in AngularJS?
Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Ansichten in AngularJS sind. Stellen Sie sich Ansichten als die "Gesichtszüge" Ihrer Anwendung vor - sie sind das, was der Benutzer sieht und mit dem er interagiert. In AngularJS sind Ansichten im Wesentlichen HTML-Vorlagen, die Daten anzeigen und auf Benutzeraktionen reagieren.
Nun, lassen Sie uns die Werkzeuge erkunden, die AngularJS uns zur Verfügung stellt, um mit Ansichten zu arbeiten.
Die ng-view Direktive: Ihr Fenster zu dynamischen Inhalten
Was ist ng-view?
Die ng-view Direktive ist wie ein spezielles Fenster in Ihrer AngularJS-Anwendung. Es ist der Ort, an dem Ihre Anwendung verschiedene Inhalte basierend auf der aktuellen Route (oder URL) anzeigt, ohne dass die gesamte Seite neu geladen werden muss. Cool, oder?
Wie man ng-view verwendet
Die Verwendung von ng-view ist so einfach wie das Hinzufügen zu einem Element in Ihrem HTML. Hier ist ein Beispiel:
<div ng-view></div>Das ist alles! Diese Division wird nun als Behälter dienen, in dem AngularJS verschiedene Ansichten basierend auf der aktuellen Route lädt.
Ein realweltliches Beispiel
Nehmen wir an, wir bauen eine einfache Website für einen Buchladen. Unsere Hauptseite könnte so aussehen:
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Mein cooler Buchladen</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Willkommen in meinem coolen Buchladen</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>In diesem Beispiel wird das <div ng-view></div> der Ort sein, an dem verschiedene Seiten unseres Buchladens (wie die Buchliste, yksame Buchdetails usw.) angezeigt werden.
Die ng-template Direktive: Ihr Bauplan für Ansichten
Was ist ng-template?
Wenn ng-view das Fenster ist, dann ist ng-template wie der Bauplan für das, was in diesem Fenster hineingehört. Es ermöglicht Ihnen, wiederverwendbare Vorlagen zu definieren, die AngularJS verwenden kann, um Ihre Ansichten zu füllen.
Wie man ng-template verwendet
Sie verwenden ng-template, indem Sie ihm eine ID geben, die Sie dann in Ihrer Routenkonfiguration referenzieren können. Hier ist ein einfaches Beispiel:
<script type="text/ng-template" id="book-list.html">
<h2>Unsere Bücher</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>Diese Vorlage definiert eine Liste von Büchern, die wir in unserer Ansicht anzeigen können.
Der $routeProvider Dienst: Ihr Verkehrsleiter
Was ist $routeProvider?
Der $routeProvider Dienst ist wie ein Verkehrsleiter für Ihre Anwendung. Er entscheidet, welche Ansicht basierend auf der aktuellen URL angezeigt werden soll.
Wie man $routeProvider verwendet
Sie konfigurieren $routeProvider normalerweise in der Konfigurationsphase Ihrer Anwendung. Hier ist ein Beispiel:
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Willkommen in unserem Buchladen!</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});In dieser Konfiguration:
- Wenn die URL nur '/' ist, wird eine Willkommensnachricht angezeigt.
- Wenn die URL '/books' ist, wird die 'book-list.html' Vorlage und der 'BookListController' verwendet.
- Für jede andere URL wird auf '/' weitergeleitet.
Ein vollständiges Beispiel
Lassen Sie uns alles zusammenbringen mit einem vollständigeren Beispiel unserer Buchladen-App:
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Mein cooler Buchladen</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Willkommen in meinem coolen Buchladen</h1>
<nav>
<a href="#!">Startseite</a>
<a href="#!books">Bücher</a>
</nav>
<div ng-view></div>
<script type="text/ng-template" id="book-list.html">
<h2>Unsere Bücher</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} von {{book.author}}</li>
</ul>
</script>
<script>
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Willkommen in unserem Buchladen!</h2><p>Stöbern Sie in unserer beeindruckenden Bücherkollektion.</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'To Kill a Mockingbird', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'Der groβe Gatsby', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>Was passiert hier?
- Wir richten eine grundlegende HTML-Struktur mit Links zum Navigieren zwischen Ansichten ein.
- Wir definieren eine Vorlage für unsere Buchliste mit
ng-template. - Wir konfigurieren unsere Routen mit
$routeProvider. - Wir erstellen einen Controller, um Daten für unsere Buchliste bereitzustellen.
Wenn Sie diese App ausführen und auf den "Bücher"-Link klicken, werden Sie eine Liste von Büchern im ng-view div sehen. Magie, oder?
Fazit
Und dort haben Sie es, Leute! Wir haben unsere ersten Schritte in die Welt der AngularJS-Ansichten unternommen. Wir haben ng-view, ng-template und $routeProvider gelernt und wie sie zusammenarbeiten, um dynamische, einseitige Anwendungen zu erstellen.
Denken Sie daran, das Lernen zu programmieren ist wie das Radfahren zu lernen - es mag am Anfang wackelig erscheinen, aber mit Übung werden Sie schnell davonfliegen. Weiter experimentieren, weiter lernen und vor allem: Spaß haben!
| Direktive/Dienst | Zweck | Beispielverwendung |
|---|---|---|
| ng-view | Definiert, wo die aktuelle Ansicht angezeigt wird | <div ng-view></div> |
| ng-template | Definiert wiederverwendbare Vorlagen | <script type="text/ng-template" id="template-name.html">...</script> |
| $routeProvider | Konfiguriert Routen für die Anwendung | $routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' }); |
Happy Coding, zukünftige AngularJS-Meister!
Credits: Image by storyset