Angular Architektur Grundlagen

Hier werden alle vom Modul geladenen, bzw zum Modul gehörenden Komponenten, Direktiven und Pipes deklariert. 

Ohne diesen Schritt, würde Angular nichts von der Existenz der Komponente, der Direktive oder des Pipes wissen. 

Hier werden Providers registriert. Hauptsächlich werden Providers benötigt, wenn man mit Services arbeitet. Providers, die hier registriert sind, stehen der ganzen Anwendung zur Verfügung. 

Hier werden Komponenten, Direktiven und Pipes angegeben, die anderen Angular-Modulen zur Verfügung stehen sollen. Mit diesem Array kann man auch andere Angular-Module exportieren.

Jedes Angular-Modul, das dieses Angular-Modul importiert hat nicht nur Zugriff auf die Exports dieses Moduls sondern auch auf die Exports von Angular-Modulen, die dieses Angular-Modul exportiert. 

Dieses Array beinhaltet alle Angular-Module, von denen dieses Angular-Modul abhängt. Das können externe Antular-Module sein, die zum Beispiel von Angular zur Verfügung gestellt werden (z.B. BrowserModule) oder Ihre eigenen Angular-Module.

Alle Angular-Bausteine, die von der importierten Angular-Modulen exporitert werden, stehen in diesem Angular-Modul zur Verfügung. 

Hier wird die Hauptkomponente der Anwendung definiert. Diese Eigenschaft wird nur in der Haupt-Angular-Modul benutzt. Die Hauptkomponente ist die Wurzel des Komponentenbaumes. 

• Die Abkürung steht für Single Page Application.
• Sobald der ganze Code im Browser geladen ist, kann die Applikation ohne Server funktionieren
• Für CRUD an ein Backend sind weiterhin Requests an einen Server nötig
• URL's werden durch Javascript simuliert (client side routing). Ein zentraler Code sorgt dafür, dass die View mit neuem Inhalt aufbereitet (gerendered) wird.

Rest steht für Representational State Transfer und wird als primäre Schnittstellen-Architektur in Angular eingesetzt. Der HTTP Client von Angular kann aus der JSON Antwort direkt ein Objekt generieren. Also wird es hauptsächlich in den Services eingesetzt, welche den Austausch von Daten an ein Backend übernehmen.

Es gibt auch noch SOAP (Simple Object Access Protocol) welches als Antwort nur XML liefert. Dieses kann in einer Angular Applikation nur mit zusätzlichen Bibliotheken benutzt werden.

• MVC ist ein Architektur Paradigm
• MVC steht für Model View Control
• Model repräsentation der Daten und des Verhaltens
• Control dient als logische Zwischenschicht -> nimmt Änderungen im Model vor
• View zeigt Daten an und nimmt Daten vom Benuzter entgegen

• Wurde von Microsoft entwickelt
• Auf Basis von ES2015
• Ist ein Superset von Javascript
• Ergänzt ES 2015 um zusätzliche Funktionen
  • Typen (Typen Annotations, Klassen sind Typen, Interfaces)
  • Enums, Tuples, Namespaces
  • Decorators
  • Möglichkeiten auf Klassen (property deklarationen, parameter properties, access modifiers (private, public, protected)
• Wird zu javascript transpiliert
• Einige Vorteile von Typescript sind heute durch ECMA Script 2016 zurück in Javascript geflossen

Strukturelle Direktiven sind verantwortlich für das HTML Layout. Sie verändern die DOM Struktur, indem sie typischerweise etwas hinzufügen, entfernen oder verändern.

• *ngIf -> wenn zutreffend, wird das DOM ergänzt, ansonsten wird es gelöscht / nicht angezeigt
• *ngFor -> typsicherweise für die Darstellung von Listen. Iteriert durch die Objekte
• [ngSwitch] -> mehrfach Bedingungen. Jedes zutreffende wird dem DOM hinzugefügt

• Komponente kontrollieren nur ihre eigene View und Daten
• Komponente haben eine öffentliche Schnittstelle -> @Input und @Output
• Komponente haben einen definierten lebenszyklus (lifecycle hooks sind eine Abfolge dessen)
• Eine Angular Applikation besteht aus einem Baum von Komponenten -> sie können voneinander abhängen

Template driven Forms

• Angular erstellt ein Form Model aufgrund des templates (html)
• Angular stellt diese Möglichkeit über das FormsModule bereit
• Das FormsModule stellt über Direktiven diverse Möglichkeiten bereit (ngModel, ngModelGroup, ngForm, ngSubmit...)
• Am häufigsten wird wohl [(ngModel)] für ein einfaches twoWay Binding verwendet

Reactive Forms

• Das Formular wird explizit im Code modeliert und das UI bindet dieses Model
• Angular stellt diese Möglichkeit über das ReactiveFormsModule bereit
• über Direktiven können form-elemente auf ein form-model gebunden werden (formControl, formGroup)

Damit kann ein Observable direkt im HTML abonniert werden. Ist gerade beim Beziehen von Daten ab einem Service eine sehr einfache Methode.

Der Hauptvorteil liegt darin, dass das Abo automatisch und korrekt beendet wird, wenn die Komponente beendet wird.

Attribut Direktiven verändern optische Elemente, lassen das DOM aber wie es ist. Daher das HTML wird nicht in der Stuktur verändert.

Du benutzt sie, indem du sie einfach dem entsprechenden HTML-Element ergänzt. Beispielsweise

<p meineDirektive>

Werden zusätzlich Daten an die Direktive übergeben, schreibst du nebst der Direktive noch den Namen des @Input-Properties mit dem zu übergebenden Wert.

<p meineDirektive [farbe]=" 'orange' ">

NgModules

(Diese bieten einen Kompilierungskontext für Components)

Es ermöglicht das Bootstrapping -> App initialisieren und starten

Über die Components

Components sind die Haupt-Bauelemente einer Angular Applikation.

Sie unterteilen die Applikation in möglichst unabhängige Einzelteile. 

• Services sind JavaScript Objekte welche sich über Dependency Injection in andere Anwendungskomponenten einbinden lassen. 
• Services bieten bestimmte Funktionen, die nicht direkt mit der Ansicht zusammenhängen. 
• Oft werden sie hauptsächlich fürs CRUD mit externen Schtittstellen benutzt. 

• Grosse Anwendungen können in viele kleine sinnvolle Einheiten aufgeteilt werden. 
• View und Business-Logik wird getrennt. 
• Erhöht Erweiterbarkeit und Wartbarkeit der Anwendung

• Sie kennzeichnen Angular-Klassentypen
• Sie stellen Medadaten bereit und teilen Angular so mit, wie die Klasse verwendet werden soll. 
  • z.B.
    • @Component()
    • @Directive()
    • @Pipe()
    • @Injectable()
    • @NgModule()

Die Metadaten bieten weitere Vorgaben wie sich der Component während der Laufzeit zu verhalten hat und verknüpfen die Component

1. mit einer Vorlage (template). Das Template definiert die Ansicht. 

2. mit styles scss/css

sowie 3. mit weiteren Optionen wie viewDetection, interpolation, animations uv,m. 

Das ist eine Scriptsprachen-Standard. Auch Grundlage von Java-Script und so auch Typescript 

ng new projekt-name

Das ist eine Konfigurationsdatei für Texteditoren. Hier kann man allgemeine Codestyles definieren (z.B. Anzahl Einrückungen im Code)

Das ist die Konfigurationsdatei von Angular CLI

Das ist die Konfigurationsdatei von npm