Ein erstes Programm
Bevor wir mit der eigentlich Applikation durchstarten, schauen wir uns das Grundgerüst einer Applikation mit AngularJS an. Das Beispiel dazu kannst du online ausprobieren oder lokal speichern. Wenn du es lokal abspeichern möchtest, erstelle ein neues Verzeichnis mit beliebigem Namen und eine Datei index.html, in der du den folgenden Quellcode abspeicherst. Rufe die Datei danach im Browser auf. Online-Version »
«(code/ng-app/index.html)
Wenn du die Datei im Browser aufrufst, wirst du feststellen, dass jede Textänderung im Eingabefeld eine sofortige Veränderung in der Ausgabe bewirkt.
Wie funktioniert’s?
Im HTML-Template findest du drei Erweiterungen, die von AngularJS stammen. ng-app, ng-model und {{name}}.
Mit ng-app startet die Magie von AngularJS. Intern wartet AngularJS bis der DOM geladen ist und sucht dann nach dem Attribut ng-app. Dabei kann es an jeder beliebigen Stelle stehen und muss sich nicht im Tag <html> befinden. Statt einer Main-Methode, sorgt ng-app für die Initialisierung.
Zusammen mit der Initialisierung wird etwas erzeugt, was sich Scope nennt. In unserem Fall das erste Scope und somit $rootScope genannt. Scopes dienen als Vermittlungsschicht zwischen View und Controller. Wenn Variablen auf dem Scope erzeugt/verändert werden, wird dies den Elementen auf dem View des Scopes mitgeteilt. An dieser Stelle siehst du, was bidirektionales Databinding konkret bedeutet.
Anmerkung: Variablen werden dynamisch erstellt und müssen nicht vorher auf dem Scope definiert werden.
Wenn du nun weißt, dass Scopes als Vermittlungsschicht dienen, sind ng-model und {{name}} einfach zu erklären. ng-model bindet in diesem Fall den Wert von name an das Eingabefeld. {{name}} gibt an dieser Stelle des Templates name aus und ändert sich entsprechend, wenn sich name ändert.
Wo gehört ng-app hin? Wenn du eine reine AngularJS-Applikation schreibst, in das <html>-Tag. Wenn du einzelne Seiten einer bestehenden Applikation erweitern möchtest, in ein <div>-Tag innerhalb von <body>.
