Überblick über die AngularJS-Architektur

AngularJS ist ein Framework, das entwickelt wurde, um die Fähigkeiten von HTML von einer einfachen statischen Sprache zu einer dynamischeren clientseitigen datenintuitiven Sprache zu erweitern. AngularJS ist 100% JavaScript. Es hilft beim Schreiben eines besser verwalteten clientseitigen Codes. Es gibt dem Entwickler mehr Code-Kontrolle und Datenmanipulationsmöglichkeiten auf der Client-Seite. Um dies zu erreichen, verfügt AngularJS über ein geeignetes Entwurfsmuster. Dies wird als MVC-Muster bezeichnet. Im nächsten Abschnitt erfahren Sie mehr darüber. In diesem Thema lernen wir die AngularJS-Architektur kennen .

Die Architektur

AngularJS basiert auf dem MVC-Entwurfsmuster. Die Prinzipien der MVC-Architektur sind in AngularJS sehr gut integriert. Man hätte wissen können, dass MVC eine robuste Architektur für viele serverseitige Sprachen ist. AngularJS hat das MVC-Muster auch auf der Clientseite zusammengeführt.

MVC - Modell, Ansicht, Steuerung

MVC-Muster steht für Model View Controller-Muster.

  • Modell

Es ist die unterste Ebene der Architektur. Es ist für die Aufbewahrung und Pflege der Anwendungsdaten verantwortlich. Die Daten bleiben während des gesamten Lebenszyklus der Seite und manchmal sogar zwischen den Seiten erhalten. Das Modell aktualisiert sich selbst basierend auf den Anweisungen, die vom Controller empfangen wurden.

  • Aussicht

Eine Ansicht ist die Vorderseite der Anwendung. Es ist die Präsentationsschicht der Architektur, die für die Anzeige der Daten für den Benutzer verantwortlich ist. Es enthält den vollständigen Code für die Benutzeroberflächenseiten in einer beliebigen browserkompatiblen Sprache, normalerweise HTML. Die Ansicht wird von der jeweiligen Steuerung ausgelöst. Eine Ansicht sendet basierend auf der Benutzerinteraktion mit der Anwendung Anforderungen an ihren Controller. Der Controller generiert dann die Ansicht basierend auf der vom Server empfangenen Antwort neu.

  • Regler

Ein Controller ist das verarbeitende Gehirn hinter der Ansicht und dem Modell. Sie treffen die Entscheidungen, um die Ansicht und das Modell zu generieren, neu zu generieren oder zu zerstören. Alle Geschäftsvorgänge und Codelogiken werden in den Controller geschrieben. (Einige Entwickler bevorzugen es, die Geschäftslogik im Modell selbst zu schreiben.) Der Controller ist auch dafür verantwortlich, Anforderungen an den Server zu senden und eine Antwort zu erhalten. Anschließend werden die Ansicht und das Modell basierend auf der Antwort aktualisiert. Kurz gesagt, der Controller steuert alles.

Die MVC-Architektur kann durch das folgende Bild grafisch dargestellt werden.

MVC ist robust, weil es auf dem Softwareentwicklungsprinzip der Separation of Concerns basiert. Es gibt mehrere Controller, die bestimmte Datensätze bedienen und die jeweiligen Ansichten und Modelle verwalten. Die Anwendungslogik ist somit von der Benutzerschnittstellenschicht getrennt.

MVC in AngularJS

Hier ging es um MVC und seine Prinzipien. Wie werden diese Prinzipien in AngularJS implementiert? Lass es uns verstehen.

  • Gültigkeitsbereich - Gültigkeitsbereich ist das Modell, das die Anwendungsdaten enthält. Bereichsvariablen werden an das DOM angehängt, und auf die Variableneigenschaften wird über Bindungen zugegriffen.
  • HTML mit Datenbindung - Die Ansicht in AngularJS ist kein reguläres HTML. Es ist ein datengebundenes HTML. Durch die Datenbindung werden dynamische Daten in HTML-Tags gerendert. Auf diese Weise aktualisiert das Modell das DOM regelmäßig.
  • ngController - Die Direktive ngController ist für die Zusammenarbeit zwischen Modell, Ansicht und Geschäftslogik verantwortlich. Die in der ngController-Direktive angegebene Controller-Klasse steuert den Bereich und die Ansicht.

Konzeptionelle Übersicht

Okay, jetzt verstehen wir, dass AngularJS auf der MVC-Architektur basiert. Ist das alles? Ist sonst nichts im Spiel? Natürlich gibt es.

Es gibt einige wichtige Konzepte, die man verstehen muss, um das Verhalten von AngularJS-Anwendungen zu verstehen. Verstehen wir sie.

  • Vorlagen

Vorlagen sind die HTML-Elemente sowie AngularJS-spezifische Elemente und Attribute. Die Dynamik in AngularJS-Anwendungen wird durch die Kombination der Vorlage mit Daten aus dem Modell und der Steuerung erreicht.

  • Richtlinien

Anweisungen sind Attribute oder Elemente, die eine wiederverwendbare DOM-Komponente darstellen. Direktiven bearbeiten direkt das zugrunde liegende HTML-DOM, um die dynamische Ansicht zu rendern. Dies entlastet den Entwickler von der Sorge um native HTML-Elemente und -Attribute.

  • Bidirektionale Datenbindung

AngularJS synchronisiert automatisch Daten zwischen dem Modell und der Ansicht durch Datenbindung. Das Modell wird als einzige Wahrheitsquelle für Ihre Anwendungsdaten betrachtet. Die Ansicht ist zu jeder Zeit eine Projektion des Modells. Sobald sich das Modell ändert, ändert sich die Ansicht und umgekehrt. Dies wird als bidirektionale Bindung bezeichnet. Dies wird durch die Live-Kompilierung der Vorlage im Browser erreicht.

  • Routing

AngularJS-Anwendungen Da es sich um Single-Page-Anwendungen (SPA) handelt, liegt ein großer Schwerpunkt auf dem Routing zwischen den Seiten. AngularJS verfügt über einen robusten Routing-Mechanismus, mit dem URLs aus der Liste der Routen abgeglichen werden, die in dem der Komponente zugeordneten Router angegeben sind. Dies bedeutet, dass immer dann, wenn ein Browser eine URL anfordert, eine zugeordnete untergeordnete Komponente und keine ganze Seite gerendert wird.

  • Dienstleistungen

Eine Steuerung ist mit einer Ansicht gekoppelt. Dies bedeutet, dass es eine gute Praxis ist, nur den Code in den Controller zu schreiben, der für seine Ansicht logisch nützlich ist. Die ansichtsunabhängige Logik kann an einen anderen Ort verschoben werden, sodass sie auch von anderen Controllern wiederverwendet werden kann.

Hier kommen die Services in Aktion. Services trennen die wiederverwendbare Geschäftslogik von der Ansichtslogik. Die sichtspezifische Logik befindet sich dann in den spezifischen Controllern, während die gemeinsame Geschäftslogik von allen Controllern gemeinsam genutzt wird.

Als allgemeine Faustregel wird Code für den Zugriff auf die Back-End-Daten auch in Services geschrieben.

  • Abhängigkeitsspritze

Wie steuern wir nach dem Verschieben der ansichtsunabhängigen Logik an einen freigegebenen Speicherort die Berechtigungen für den Zugriff auf die freigegebenen Dienste? Dies erfolgt über Dependency Injection (DI). Abhängigkeitsinjektion ist ein Software-Entwurfsmuster, das behandelt, wie Objekte erstellt werden und wie sie ihre Abhängigkeiten erfassen. Alles in AngularJS, von Direktiven über Controller bis hin zu Diensten und so ziemlich alles, ist über DI verdrahtet.

Wissenswertes zur AngularJS-Architektur

AngularJS wurde wegen der spitzen Klammern in HTML-Tags als AngularJS bezeichnet. Das Projekt wurde entwickelt, um HTML dynamischer und datenfreundlicher zu gestalten. Daher haben die Entwickler beschlossen, es nach den eckigen Klammern in HTML zu benennen.

Fazit - AngularJS-Architektur

Der Artikel behandelt alle wichtigen Konzepte der AngularJS-Architektur. Dies ist ein guter Einstieg, um die Funktionsweise verschiedener Elemente Ihrer AngularJS-Anwendung zu verstehen. Der nächste Schritt ist die Erstellung einer voll funktionsfähigen AngularJS-Anwendung mit mehreren Controllern, die auch Daten aus dem Backend abruft. Auf diese Weise können Sie die Konzepte von AngularJS in die Praxis umsetzen.

Empfohlene Artikel

Dies ist eine Anleitung zur AngularJS-Architektur. Hier diskutieren wir die Architektur, MVC in anglejs und Conceptual Overview. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -

  1. Karriere in AngularJS
  2. Fragen in Vorstellungsgesprächen bei AngularJS
  3. Was ist Backbone.js?
  4. Data Mining-Software

Kategorie:

Software-Entwicklung