JavaScript-Fundamente für Single Page Apps, Teil 3

Angular und AngularJS

| Autor / Redakteur: Thomas Drilling / Stephan Augsten

Die Architektur von AngularJS im Überblick.
Die Architektur von AngularJS im Überblick. (Bild: Angular.io)

Angular ist von der Philosophie her ein vollständiges Framework und bietet Lösungen für nahezu sämtliche Aufgaben eines Frontent-Entwicklers. So kümmert sich die Open-Source-Software um Dinge wie die Validierung oder die Kommunikation mit dem Backend.

Im vorangegangenen Teil dieser Serie haben wir als Pro-Argument für React den Umstand angeführt, dass es kein vollständiges Framework ist. Dies kann natürlich auch anders sehen: In der Praxis ergibt es sich zwangsläufig, dass sich der React-Entwickler ein eigenes Portfolio an zusätzlichen Libraries zusammensucht, die genau jene Dinge erledigen, um die sich pures React nicht kümmert.

Da sich React-Entwickler zu Beginn eines Projektes vorher die passenden Bibliotheken suchen müssen, kann es zu dem negativen Effekt kommen, dass diese nach einem Update von React nicht mehr richtig funktionieren. Warum also nicht gleich zu einem vollwertigen Framework wie Angular greifen?

Angular und AngularJS

Angular ist in Version 2 und jünger prinzipiell ein Nachfolger des von Google entwickelten AngularJS (Angular 1.x). Da aber Angular komplett neu geschrieben wurde und nicht abwärtskompatibel mit AngularJS ist, hat man sich in Entwicklerkreisen – in denen AngularJS nach wie vor verwendet wird – auf die skizzierte Unterscheidung durch die Namensgebung verständigt. AngularJS ist folglich die „alte Version 1.x“, Angular die Neuentwicklung ab Version 2.0.

AngularJS (Angular 1) war bzw. ist ein Client-seitiges JavaScript-Webframework zum komfortablen Erstellen von Single-Page-Webanwendungen nach dem Model-View-ViewModel-Muster (MVVM). Es wurde im Jahr 2009 von Google entwickelt und unter der MIT-Open-Source-Lizenz der Community zur Verfügung gestellt. Das erheblich verbesserte und nicht abwärtskompatible Angular 2 erschien im September 2016; Angular 1 (Angular.JS) wird aber weiter gepflegt und liegt aktuell in Version 1.6.7 vor.

Was ist AngularJS?

Die Arbeitsweise von AngularJS stützt sich auf das Client-seitige Generieren von HTML-Ansichten. Ferner erweitert AngularJS das „Vokabular“ von HTML, womit im Rahmen des MVVM-Models die View-Ebene abgebildet wird, ohne dass Entwickler wie in JavaScript DOM-Manipulation per jQuery vornehmen müssen.

Ferner kümmert sich AngularJS um die Daten-Validierung im Kontext von Eingabeformularen und betrachtet diese quasi als funktionale Erweiterung von View. Dies setzt im Prinzip die Idee der HTML5-Form-Validation fort, wird aber bei AngularJS in Form einer vom Webbrowser-unabhängige JavaScript-Variante implementiert.

AngularJS bietet allerdings keine Funktionen zum Abbilden der Model-Ebene in Form von clientseitigen Entitäten, was bei anderen Frameworks zum Erstellen von Single-Page-Apps typischerweise zum Bereich der Daten-Validierung gehört. Bei Angular werden diese meist direkt in einem ViewModel abgelegt.

Im Gegensatz zu React erfolgt das Strukturieren von in AngularJS erstellen Web-Clients in Form von Modulen, View-Templates, Controllern, Scopes, Filtern und so genannten Providern (Factory, Service). Das Zusammenführen sämtlicher Komponenten übernimmt der sogenannte Dependency-Container von AngularJS.

Dies führt letztendlich zu einer lose gekoppelten Anwendung, die dann aus wiederverwendbaren Teilkomponenten besteht. Da AngularJS einen Mechanismus zur Datenbindung nach dem MVVM-Muster mitbringt, benötigen Entwickler keinen expliziten Programmcode zum Synchronisieren zwischen View und Anwendungslogik.

Auch Angular beschreibt Datenbindungen innerhalb der View deklarativ. Das zieht eine bidirektionale Änderungsverfolgung der Werte nach sich, was zum Teil erhebliche Auswirkungen auf die Performance von Single-Page-Apps hat. Technisch betrachtet läuft das so ab, dass sich AngularJS stets in einem Event-Loop befindet, um jegliche Änderung abfangen, bzw. auswerten und bei Bedarf die View aktualisieren zu können.

Inhalt des Artikels:

Kommentare werden geladen....

Kommentar zu diesem Artikel

Der Kommentar wird durch einen Redakteur geprüft und in Kürze freigeschaltet.

Anonym mitdiskutieren oder einloggen Anmelden

Avatar
Zur Wahrung unserer Interessen speichern wir zusätzlich zu den o.g. Informationen die IP-Adresse. Dies dient ausschließlich dem Zweck, dass Sie als Urheber des Kommentars identifiziert werden können. Rechtliche Grundlage ist die Wahrung berechtigter Interessen gem. Art 6 Abs 1 lit. f) DSGVO.
  1. Avatar
    Avatar
    Bearbeitet von am
    Bearbeitet von am
    1. Avatar
      Avatar
      Bearbeitet von am
      Bearbeitet von am

Kommentare werden geladen....

Kommentar melden

Melden Sie diesen Kommentar, wenn dieser nicht den Richtlinien entspricht.

Kommentar Freigeben

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

Freigabe entfernen

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

copyright

Dieser Beitrag ist urheberrechtlich geschützt. Sie wollen ihn für Ihre Zwecke verwenden? Infos finden Sie unter www.mycontentfactory.de (ID: 45189478 / Web Apps)