AngularJS lernen – Teil 2 – AngularJS MVC

Werbung

AngularJS Logo - AngularJS MVC PatternIm ersten Teil der Tutorial Serie habe ich kurz angerissen was AngularJS ist und was ich damit machen kann. Im zweiten Teil geht um die Verwendung von AngularJS mit dem MVC Pattern. Genauer gesagt um View(V) und Controller(C). Das Model(M) wird im dritten Teil näher beleuchtet.

Auf der AngularJS Webseite wird empfohlen das MVC Design Pattern zu nutzen um Anwendungen zu entwickeln.

AngularJS MVC Pattern

Ich möchte hier auch nicht gross das MVC Pattern beschreiben. Das ist bereits auf anderen Seiten sehr ausführlich gemacht worden. Also werde ich nur kurz erläutern worum es dabei geht.

AngularJS Anwendungen werden aufgeteilt in Models(M), Views(V) und Controller(C). Contoller kümmern sich um die Beschaffung der Daten aus den Models und übergeben diese an die View. Models sorgen dabei für die Datenbeschaffung zum Beispiel aus einer Datenbank. Views sind für die eigentliche Ausgabe zuständig.

Werbung

Damit sind zwar noch nicht alle Aspekte des MVC Pattern beschrieben, aber grob zusammengefasst kann man das so stehen lassen.

AngularJS View

Die View in AngularJS wird durch das HTML repräsentiert. Ich greife hier das Beispiel aus dem ersten Teil wieder auf.

AngularJS Module

Die normale View wandle ich in ein AngularJS Modul um. Durch das Aufteilen in einzelne Module kann ich die Anwendung besser strukturieren. Dies geschieht durch setzen der Directive ng-app.

Mit der Directive ng-app kümmert sich AngularJS selbstständig um den Bootstrap der Anwendung. Dies kann auch manuell erfolgen, was einen etwas höheren Aufwand darstellt. Dies kann zum Beispiel sinnvoll sein um eine Meldung anzuzeigen, dass die Daten noch geladen werden.

AngularJS Controller

Jetzt füge ich noch den Controller in das Modul ein

Die Javascript Datei des Controllers muss jetzt noch ins HTML eingefügt werden.

Der Inhalt des Controllers sieht folgendermaßen aus:

In der View kann ich dann auf das Ergebnis zurückgreifen

Auch hier sollte {{ergebnis}} durch den berechneten Wert aus dem Controller ersetzt werden.

Im zweiten Teil habe ich das MVC Pattern in AngularJS vorgestellt und eine erste kleine Mini Anwendung entwickelt. Im nächsten Teil meines AngularJS Tutorials werde ich dann näher auf das Model eingehen.

Werbung
Hat dir der Beitrag gefallen? Dann würde ich mich sehr freuen, wenn du ihn weiterempfehlen würdest.Share on FacebookShare on Google+Tweet about this on Twitter

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.