AngularJS Grundkurs

Model-Modul erstellen

Testen Sie unsere 2007 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Model ist Hauptbestandteil einer MVC-Applikation. Es speichert Daten und stellt diese innerhalb einer Applikation zur Verfügung. Dieses Video zeigt die Vorgehensweise bei der Erstellung eines Model-Moduls.
08:44

Transkript

AngularJS ist ein MVC Framework. Das heißt, mit AngularJS sind wir in der Lage Applikationen nach dem MVC Pattern, dem Modul-View-Controller Pattern zu realisieren. Eines der Hauptbestandteile einer MVC-Applikation ist natürlich das Modell. Das Modell dient dazu, um Daten zu speichern und dann entsprechend innerhalb der Applikation zur Verfügung zu stellen und dementsprechend dann mit den Daten arbeiten zu können. Was ich jetzt hier in diesem kleinen Sample hier gemacht habe, ist im Grunde genommen so was Ähnliches wie ein Pseudomodell. Ich habe hier ein Modul entwickelt namens values und in diesem Modul habe ich einmal eine Variable headline und einmal die Konstante myConst definiert. Dieses values Modul habe ich in meinem Applikationsmodul app per Abhängigkeit hier hinzugefügt und konnte dann entsprechend mit headline und myConst dann weiterarbeiten. Schöner wäre es natürlich, wenn zunächst einmal das values, das ich hier definiert habe, etwas wäre, was losgelöster ist. Losgelöster zum einen von der Datei. Das heißt, dass ich wirklich sagen kann, in dieser Datei befindet sich die Applikationslogik und in dieser Datei die Modellogik und zum anderen wäre es natürlich auch schöner gewesen, wenn das Modell selber eine Klasseninstanz wäre von einem Singleton, indem neben den Variablen, die ich dort definiere, auch Logiken enthalten sind, die modelspezifisch sind, beispielsweise Filterung von Daten oder Formatierung von Daten oder ähnliche Konstrukte, die innerhalb eines Models immer wieder wichtig sein können. Um das zu machen, möchte ich auch sehr gerne einmal zeigen, welche Praxis ich für gewöhnlich in solchen Situationen verwende. Also erstens ich differenziere die Dateien. Das heißt, ich löse Applikations- und Modelllogik. Zweitens erzeuge ich eine Klasse, die dann quasi das Model selber repräsentiert. Das heißt, nicht mehr nur das Modul repräsentiert quasi das Model, sondern eine Instanz einer Klasse repräsentiert das Model, dass dann quasi nur Bestandteil eines Moduls ist, das ich per dependency injection dann auch jederzeit anwenden kann. Lasst uns also damit loslegen. Ich beginne damit, dass ich einmal diese Datei zusätzlich speichere als ModelModule. In dem ModelModule selber wird es nur modelspezifische Daten geben, wogegen im Applikationsmodul nur Applikationslogiken drinnen sind. Weiterhin erzeuge ich jetzt zur besseren Strukturierung ausschließlich einen Unterordner model, wo ich dann weiß, dass dann alle modelrelevanten Klassen dann in diesem Unterordner zu finden sind und in meiner index.html selber sorge ich natürlich dafür, dass nicht nur mein MainModul entsprechend geladen wird, sondern natürlich auch das ModelModul. Da habe ich aber jetzt gerade was angestellt. Wunderbar, da haben wir es dann. Das heißt, wir laden das ModelModul und wir laden das MainModul. Innerhalb des ModelModul haben wir gesagt, dass wir gerne eine Instanz einer Klasse verwenden wollen als Modell und nicht nur das einzelne Modul. Das hört sich wahnsinnig kompliziert an, bedeutet aber nichts anderes als, dass ich innerhalb eines Moduls nicht nur eine Variable und eine Konstante definieren kann, sondern beispielsweise auch mittels der Methode factory dafür sorgen kann, dass ich quasi eine Klasse definiere, die dann automatisch mittels des factory patterns erzeugt und wiedergegeben wird, sobald ich dann anstelle eines Variablennamen oder eines Konstantennamen den Namen dieser Klasse, die ich mit dem factory dann entsprechend verbunden habe, dann aufrufe. Bedeutet, ich kann hier beispielsweise sagen, dass ich mit dem Model dann kommunizieren möchte und dieses Model soll dann eine Instanz von Model zurückgeben. Diese Instanz von Model ist dann dadurch, dass sie mit dem factory definiert worden ist, auch ein Singleton. Das heißt, ich muss mir nie Gedanken machen, dass mehrere Instanzen davon erzeugt werden, sondern wie es sich für ein Model gehört, gibt es nur eine einzige Instanz davon. Diese Instanz erzeugt sich, wie gesagt, über die Klasse Model, die ich jetzt noch hier anlegen muss. Hier kann ich auch automatisch in den Parametern, die ich in dieser Klasse definiere oder in dem Konstrukt definiere auch gleich dependency injection machen, sodass ich Angular spezifische Elemente hier bereits einbinden kann. So beispielsweise ein Log, dass mir sicherstellt, dass diese Instanz wirklich nur einmal erzeugt wurde, new Instance of Model. Zusätzlich möchte ich hier Werte und Variablen zurückgeben oder besser gesagt Funktionen zur Verfügung stellen, die dann modelspezifisch sind. Eine Beispielfunktion mache ich hier schnell, getSampleData von Typ function, return Hello World als String. Jetzt möchte ich dann noch zusätzlich dafür sorgen, dass ich das Model selber in die Variable model speichere, aber als Modul dann entsprechend app.model als Keyword verwende für die Injection dann später meinem Hauptmodul, das ich hier ersetze logischerweise. Jetzt möchte ich einfach sagen, dass ich mit dem Model kommunizieren möchte. Also setze ich im run eine dependency injection ein, indem ich sage, ich möchte hier mit dem Model arbeiten. Das, was mit dem Model passieren soll, ist beispielsweise, dass ich hier statt dem Wert fertig einfach von dem Model das getSampleData mir ausgeben lasse. Mache ich hier ein Refresh, sehen wir dann das Hello World an dieser Stelle und das, was passiert ist folgendes. Dadurch dass ich das Model hier per Abhängigkeit definiere kann ich auch ohne Probleme natürlich auf die Eigenschaft Model zurückgreifen, welches eine Instanz der Klasse Model ist, die als Singleton zurückgegeben wird. Jetzt kann ich noch zusätzlich dafür sorgen, dass ich natürlich hier auf die anderen Werte zugreife. So kann ich beispielsweise headline per dependancy injection noch hinzufügen und natürlich myConst und bin dann beispielsweise hier in der Lage hier einen Wert zu setzen getValue mache ich jetzt einfach, function. Dieses getValue soll nichts anderes machen, als dann entsprechend den Wert hier zurückzugeben, return, headline. Das Gleiche kann ich natürlich auch als set ersetzen, setValue. Als value nehme ich dann entsprechend den Parameter val. Jetzt mache ich nichts anderes als headline = val zu setzen und kann dann noch zusätzlich getConst verwenden, damit ich eine Konstante zurückbekommen kann oder eben die Konstante zurückbekommen kann. Mache hier ein return myConst. Kann dann also jetzt hier in meinem eigentlichen Aufruf der run Methode die dependancy injection für headline und für Konstante entsprechend wegnehmen. Denn ich bin jetzt hier in der Lage einfach zu sagen, dass ich hier von meinem Model getValue haben möchte, um die headline zu bekommen und getConst, um dann entsprechend die Konstante zu bekommen und wenn ich das aktualisiere, seht Ihr, dass das noch alles wunderbar funktioniert und das ist das Tolle, wenn ich das Ganze innerhalb einer Klasseinstanz hier verwende. Ich bin jetzt hier in der Lage einfach mit setValue einfach den Wert schnell zu überschreiben. Speichere das. Mache ein Refresh und Ihr seht, dass dann wunderbar hier in dieser Singleton Instanz mittels setValue dafür gesorgt wurde, dass der initiierte headline Wert, der hier initialdefiniert wurde dann überschrieben wurde und dieser indizierte Wert wurde dann entsprechend über getValue dann wieder zurückgerufen und dann entsprechend hier dargestellt. Theoretisch wären wir auch in der Lage gewesen diese Modelinstanz statt mit factory mit service zu erstellen. Das heißt, wenn ich das jetzt hier einmal auskommentiere, werdet Ihr sehen, dass es im Grunde genommen identisch funktioniert. Das Ganze, was Ihr Euch nur gewöhnen solltet, ist es ein bisschen einen philosophischen Ansatz verwendet. Also diese service Geschichten beispielsweise tatsächlich nur um servicerelevante Elemente zu programmieren, wie beispielsweise Datenbindungen, Daten holen, Business Logiken und Ähnliches und die factory verwendet für Singleton wie beispielsweise für Modelle und Ähnliches. In diesem Video haben wir also ein kurzes Best Practice kennengelernt, wie entsprechend ein Model AngularJS spezifisch erzeugt werden kann.

AngularJS Grundkurs

Arbeiten Sie sich in AngularJS, einem JavaScript-Framework von Google, ein und sehen Sie, wie Sie mit MVC-Design-Pattern und Dependency Injection im HTML-Umfeld arbeiten können.

3 Std. 43 min (44 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!