Angular Architecture Überblick
Inhaltsverzeichnis
Angular ist ein Eckpfeiler im Bereich der Softwareentwicklung. Es ist eine Plattform und ein Framework der neuen Generation für die Entwicklung interaktiver und dynamischer einseitiger Client-Anwendungen mit HTML und TypeScript. Die von Google entwickelte Plattform hat sich erfolgreich von AngularJs zu Angular 12 im Jahr 2021 entwickelt. Derzeit wird Angular von rund 44,3 % der Softwareentwickler für die Erstellung von benutzerfreundlichen Web-Apps gewählt. Die Popularität von Angular-Konzepten beruht in hohem Maße auf Angular Architecture, die eine Mischung aus bestimmten Grundkonzepten ist. Die grundlegenden Konzepte von Angular umfassen hauptsächlich mehrere Bibliotheken, sowohl in Form von Core als auch optional. In diesem Leitfaden werden wir zum besseren Verständnis tief in Angular-Muster und Angular Architecture eintauchen.
Angular Architecture Konzept
Das Erstellen einer Software-Anwendung war bis zur Einführung der Angular-Plattform kein Kinderspiel. In den letzten Jahren gewann Angular aus guten Gründen immense Popularität. Die tadellosen Haushaltsbeispiele für Angular-Apps sind Gmail, Youtube TV, Microsoft Office und Xbox. Kurz gesagt, Angular ist eine absolut vorteilhafte Quelle und eine Wahl von Top-Unternehmen. All das liegt an den Angular-Grundkonzepten und der Angular-Struktur.
Die Angular-Übersicht lässt sich mit ihren grundlegenden Konzepten – Module, Komponenten und Service – erklären. Jedes dieser Angular-Basiskonzepte weist darüber hinaus eigene Konzepte auf.
- Komponenten sind in Modulen organisiert und verfügen über Views, Templates, Datenbindung und Pipes.
- Module bestehen aus Root-Modulen und Feature-Modulen.
- Services wiederum umfassen Provider und Dependency Injection.
Angular hat den Ruf, eines der größten Frontend-Frameworks zu sein, das Anwendungen in HTML und TypeScript erstellt. Das Verständnis der grundlegenden Konzepte von Angular im Detail kann einem Anfänger helfen, die besten Praktiken der Angular Architectue auf höchstem Niveau zu verfolgen.
Interessante Projekte
Zuverlässige Arbeitgeber
Faire Vergütung
Grundlegende Bausteine von Angular-Anwendungen
Module
Module in der Angular Architecture oder NgModules ist ein Mechanismus zur Erstellung von Komponenten, Pipes, Direktiven und Diensten in einer Art und Weise, die bei der Erstellung von Anwendungen hilft, wenn sie mit anderen Modulen kombiniert werden. Die Kopfzeile, die Fußzeile, der rechte Abschnitt, die linke Seite und die Mitte fungieren als ein Teil des Moduls in der Angular-App-Architecture. Eines der wichtigsten Dinge, die es zu beachten gilt, ist – Angular NgModules sind ganz anders als JavaScript-Module, vielmehr ergänzen sie letztere. Der wesentliche Gedanke hinter Angular-Modulen ist die Förderung des Single-Responsibility-Prinzips in Angular-Patterns. Obwohl Module dazu gedacht sind, viele Aktivitäten auszuführen, besteht der Fokus dieses Kernelements darin, sich bei Angular-Bauten immer nur auf eine Sache zu konzentrieren.
Die gängigen Typen von Angular-Modulen in der Angular Architecture sind FormsModule, RouterModule und HttpClientModule. Das Root-Modul ist das wesentliche Modul, das es der Anwendung ermöglicht, zu booten oder sich selbst zu laden. Es wird auch als AppModule bezeichnet und muss innerhalb der Datei „app.module.ts“ registriert werden, falls ein Benutzer ein anderes benutzerdefiniertes Angular-Modul verwenden muss.
Bootstrapping einer Anwendung
Ein Benutzer sollte Angular mitteilen, welches das Root-Modul für das Bootstrapping einer Anwendung ist. Dies dient dazu, die Kompilierung im Browser durchzuführen, was auch als Just-in-Time-Kompilierung (JIT) bezeichnet wird. Zusätzlich ist die Durchführung der Kompilierung auch als Methode des Angular-Bauten-Workflows möglich. Dies wird als Ahead of Time (AOT)-Kompilierung bezeichnet und unterscheidet sich vom normalen Prozess des Bootstrappings einer Anwendung
Umfang von NgModules in Angular
Der Umfang von NgModules in der Angular-App-Architecture kann mit zwei Dingen erklärt werden:
- Deklarationen – Komponenten, Direktiven und Pipes befinden sich in einem lokalen Scope (private Sichtbarkeit) und sollten zu genau einem Modul gehören.
- Anbieter – Dienste befinden sich im globalen Bereich (öffentliche Sichtbarkeit). In diesem Modul ist eine Liste von Dependency-Injection-Providern verfügbar, die in Komponenten, Direktiven, Pipes oder Dienste injiziert werden können.
Components
Components sind die wesentlichen Angular-Bausteine der Anwendungsentwicklung. Die Angular-Übersicht der Komponenten lässt sich mit ihren vier Hauptbestandteilen ins Licht rücken. Diese sind eine HTML-Vorlage, eine TypeScript-Klasse, ein CSS-Selektor und optionale CSS-Stile. Die Components sind eine TypeScript-Klasse, die Views definiert. Views sind Sätze von Bildschirmelementen, die aus Components und Templates bestehen. Die Typen von Ansichten in der Angular-Struktur, die durch Components definiert werden, sind der Anwendungsstamm mit Navigationsfähigkeiten, eine Liste von Helden und der Helden-Editor. Die Felder und Methoden in Components unterstützen die Ansicht.
In jeder Angular-Anwendung gibt es mindestens eine Component – die Root-Component. Sie dient dazu, die Hierarchie der Components mit dem Document Object Model (DOM) der Seite zu verbinden. Im Großen und Ganzen definiert jede Component in der Angular-Struktur eine Klasse, die die Daten und Logik der Anwendung enthält. Der ‚@Component ( )‘-Dekorator bestimmt die Klasse als Component. Er legt auch component-spezifische Metadaten und Templates fest.
Wie erstellt man eine Komponente?
Die beiden Best Practices der Angular-Architecture für die Erstellung von Components sind die Verwendung von Angular CLI und die manuelle Vorgehensweise.
- Angular CLI
Angular CLI ist eine der einfachsten Möglichkeiten, eine Angular Component zu erstellen. Dazu muss der Entwickler über das Terminal-Fenster in das Verzeichnis navigieren, das die Anwendung enthält. Als nächstes wird der Befehl „ng generate component “ ausgeführt. wird der Name der neuen Komponente sein. Der Befehl erstellt standardmäßig einen Ordnernamen nach der Component, der Componentdatei, der Vorlagendatei, der CSS-Datei und der Testspezifikationsdatei.
- Manuelle Methode
Das Erstellen einer Component, dem grundlegenden Teil der Angular-App-Architecture, ist bei einer manuellen Vorgehensweise vergleichsweise langwierig. Navigieren Sie zunächst in das Angular-Projektverzeichnis. Nachdem Sie dort eine neue Datei erstellt haben, fügen Sie eine Import-Anweisung ‚“ import { Component } from ‚@angular/core‘; “ hinzu, gefolgt vom Hinzufügen des @Component-Dekorators. Die nächsten Schritte umfassen die Auswahl eines CSS-Selektors, die Definition der HTML-Vorlage, die Auswahl von Vorlagenstilen und das Hinzufügen einer Klassenanweisung.
Templates
Ein Template ist eine Angular Form von HTML-Schnipseln in der Angular Architecture, um Angular mitzuteilen, wie Components gerendert werden sollen. Es gibt hauptsächlich zwei Arten von Templates – Inline-Templates und Template-Dateien. Während das Inline-Template durch das Platzieren von HTML-Codes in schwarzen Häkchen definiert wird, wird die Template-Datei hingegen in einer separaten HTML-Datei definiert. Zurückgebunden an die Component als Teil der Angular Architecture, kombiniert das Template HTML mit Angular-Markup. Angular-Markup kann HTML basierend auf der Logik, dem Zustand und den DOM-Daten der Anwendung verändern. Templates in der Angular Component Architecture nutzen Data Binding zur Koordination von Anwendungs- und DOM-Daten. Dazu gehören Direktiven zur Bereitstellung von Programmlogik und Pipes zur Transformation der Daten, bevor sie angezeigt werden. Dies verbessert insbesondere die Benutzererfahrung.
Metadata
Metadaten sind ein Teil des Angular-Componentenmusters und die Regel für sie in der Angular-Component Architecture ist, dass sie einen @Component-Dekorator haben müssen. Das liegt daran, dass der Dekorator hier die Klasse sofort als Component-Klasse identifiziert und sie als Metadata bestimmt. Ohne das @Component-Tag wüssten die Metadaten als Teil der Angular-Struktur außerdem nicht, was sie mit der Component anfangen sollen, da nur das @Component-Tag die Templates mit den Components verbindet.
Die Hauptaufgabe von Metadaten in Angular-Bauten ist, dass sie Angular über das Vorhandensein von Bausteinen zur Erstellung der Component und ihrer Ansicht informieren. Kurz gesagt, Metadaten in der Angular-Component Struktur sind dazu gedacht, die Klasse zu dekorieren und ihr erwartetes Verhalten zu konfigurieren. Einige der nützlichen Felder innerhalb des Metadata-Tags sind –
- selector
Der CSS-Selektor als Teil des Angular-Musters hat die Aufgabe, eine Instanz einer bestimmten Component dort zu erstellen und einzufügen, wo das entsprechende Tag in der HTML-Vorlage gefunden wird. Dies ist das, was eine Component in HTML sein wird.
- templateurl
Dies ist die modul-relative Adresse des HTML-Templates der Component. Hier kann die relative Pfadangabe verwendet werden und HTML-Inline definiert werden.
- providers
Provider bezeichnen das Array von Diensten, die eine Klasse in Anspruch nimmt. Als ein in der Angular-Struktur deklariertes Objekt wird es zur Injektion in den construktor der component, der Direktiven und der anderen Klassen von Angular verwendet.
Daten Bindung
Datenbindung kann eine der Best Practices der Angular Architecture sein oder sagen wir, Frameworks zur Verbesserung der Qualität, indem Daten zwischen Component und Template fließen können. Ohne Datenbindung müsste ein Entwickler dafür verantwortlich sein, die Daten zwischen Template und Component mit Hilfe von benutzerdefiniertem Code zu schieben. Angular unterstützt Zwei-Wege-Datenbindung. Unter bidirektionaler Datenbindung versteht man einen Prozess, bei dem die Teile des Templates mit den Teilen der Component koordiniert werden. Ein Entwickler muss Binding-Markup hinzufügen, um Angular über die Verbindung beider Seiten zu informieren. Einfach ausgedrückt, spielt die Datenbindung in der Angular-App-Struktur eine große Rolle bei der Verbesserung der Kommunikation zwischen Template und Componente sowie zwischen Eltern- und Kind-Componenten.
Datenbindung im Konzept der Angular-Grundlagen kann in zwei Typen kategorisiert werden, nämlich Event-Bindung und Property-Bindung. Event Binding lässt Ereignisse in HTML/DOM Funktionen der Component auslösen. Property Binding setzt die aus Anwendungsdaten berechneten Werte in HTML.
Directives
Direktives sind die HTML-Attribute, die Angular anweisen, den Stil oder das Verhalten von DOM-Elementen zu ändern. Es handelt sich im Grunde um eine Klasse mit einem ‚@Directve ( )‘-Dekorator.
Die Component ist technisch gesehen eine Direktive mit einem Template. Es wäre also nicht falsch zu sagen, dass Direktiven die eigentlichen Bausteine von Angular sind. Es gibt zwei Arten von Direktiven – strukturelle und attributive. Ein Entwickler ist in der Lage, eine Reihe von Direktiven beider Typen zu definieren, indem er den ‚@Directive ( )‘-Dekorator verwendet.
- Strukturelle directives
Die Rolle der strukturellen Attribute in Angular-Mustern ist es, das Layout zu ändern. Dies geschieht durch Hinzufügen, Entfernen oder Ersetzen der DOM-Elemente.
- Attribut Directives
Attribut Direktives sind dazu gedacht, das Verhalten oder Aussehen von DOM-Elementen zu ändern. Sie sehen in den Vorlagen wie normale HTML-Attribute aus.
- Component Directives
Sie ist die Hauptform der Klasse, da sie Informationen darüber enthält, wie die Components zur Laufzeit verarbeitet und verwendet werden sollen. In Angular Modules sollte ein Benutzer Direktives genauso deklarieren wie im Fall von Components. Sie wird mit einem ‚@Component‘-Dekorator dekoriert.
Services
Services ist eine wiederverwendbare Component in den Angular Grundkonzepten der Architecture und Verarbeitung. Sie dient dem spezifischen Zweck, Geschäftslogik und Daten innerhalb verschiedener Components zu umfassen. Sie folgt einem reinen Verantwortungsprinzip und wird nur einmal während der Lebensdauer der Angular Architecture instanziiert. Diese schmale und wohldefinierte Klasse der Angular-Struktur enthält Methoden zur Pflege von Daten während der gesamten Verarbeitung einer Anwendung. Das unverzichtbare Ziel von Services ist es, Modelle, Daten, Funktionen und Geschäftslogik innerhalb verschiedener Components der Anwendung zu organisieren und gemeinsam zu nutzen. In Abwesenheit von Services würde ein Entwickler die Logik an den anderen Stellen nicht nutzen und es besteht die Notwendigkeit, die gesamte Logik in der jeweiligen Component neu zu kodieren. Da ein Entwickler zwei Kopien desselben Codes pflegen muss, wird der Umgang mit Angular-Bausteinen – Components – dann zu einer schwierigen Aufgabe.
Dependency Injection
Dependencies sind Objekte oder Dienste in Angular-Mustern, die eine Klasse benötigt, um die Funktionen auszuführen. Dependency Injection (DI) ist grundsätzlich ein Entwurfsmuster, bei dem Objekte an andere Objekte zur Erledigung von Aufgaben übergeben werden. DI bietet immense Vorteile bei der Bearbeitung der Angular-App-Struktur. Als Teil der Angular-Grundlagen ermöglicht DI der Klasse, Abhängigkeiten von externen Quellen anzufordern, anstatt sie zu erstellen. Außerdem teilt es die Aufgabe auf verschiedene Dienste auf. Der Injektor ist der wichtigste Mechanismus in der Angular-Struktur. Der Dekorator ‚@Injectable ( )‘ wird verwendet, um eine Instanz zu erzeugen und die Metadaten als Abhängigkeit in die Component zu injizieren. Außerdem wird der ‚@Injectable ( )‘-Dekorator auch verwendet, um zu erkennen, ob eine Componente oder eine andere Klasse eine Abhängigkeit enthält. Angular erzeugt während des Bootstrap-Prozesses einen Root-Injektor. Hier werden die zusätzlichen Injektoren benötigt, aber man muss keine Injektoren erstellen. Außerdem legt der Injektor auch Abhängigkeiten an und verwaltet die Container aller Instanzen. Das Erfassen und Anlegen von Abhängigkeiten durch den Injektor ist mit Hilfe von Providern möglich.
Hinweis: Ein Benutzer muss einen Provider beim Injektor der Anwendung registrieren, wenn eine Abhängigkeit in der App benötigt wird. Dadurch wird der Injektor angewiesen, den Provider für die Entwicklung neuer Abhängigkeitsinstanzen zu verwenden.
Schlussworte
Angular ist eine zuverlässige, produktive und einfach zu wartende Plattform für Entwickler, die dynamische Web- und Mobile-Apps entwickeln wollen. Allerdings sollte ein Entwickler mit allen Teilen, Rollen und Systemen der Angular Architecture gut vertraut sein, um seine Aufgabe erfüllen zu können. Die Angular Architecture ist zweifelsohne systemisch, wobei die Angular-Bausteine und Angular-Patterns in Unterklassen dafür vorgesehen sind, in bestimmten Phasen verantwortlich zu agieren. Components, Module und Dienste sind, wie gesagt, Angular-Grundlagen, die die Erstellung von Anwendungen einfach und produktiv machen.
