Angular Architektur Grundlagen
Lernkartei zur Vorbereitung für die IPA.
Lernkartei zur Vorbereitung für die IPA.
Fichier Détails
| Cartes-fiches | 45 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Apprentissage |
| Crée / Actualisé | 21.07.2019 / 24.02.2024 |
| Lien de web |
https://card2brain.ch/box/20190721_angular_architektur_grundlagen
|
| Intégrer |
<iframe src="https://card2brain.ch/box/20190721_angular_architektur_grundlagen/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Was ist Angular?
Angular ist ...
- ein Framework
- eine Plattform
- dafür da um Clientapplikationen in HTML und TypeScript zu bauen.
Was sind die Grundbausteine einer Angular-Anwendung?
NgModules
(Diese bieten einen Kompilierungskontext für Components)
Wofür ist das root module da?
Es ermöglicht das Bootstrapping -> App initialisieren und starten
Worüber werden die Views definiert?
Über die Components
Wofür sind Components da?
Components sind die Haupt-Bauelemente einer Angular Applikation.
Sie unterteilen die Applikation in möglichst unabhängige Einzelteile.
Was sind Services?
- 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.
Was sind die Vorteile von Services?
- Grosse Anwendungen können in viele kleine sinnvolle Einheiten aufgeteilt werden.
- View und Business-Logik wird getrennt.
- Erhöht Erweiterbarkeit und Wartbarkeit der Anwendung
Wofür sind Klassen-Decorators da?
- 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()
- z.B.
Was bezwecken die Metadaten von Components?
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.
Welche drei Bindings gibt es?
Was ist ECMA-Script?
Das ist eine Scriptsprachen-Standard. Auch Grundlage von Java-Script und so auch Typescript
Wie erzeugt man mittels Konsole ein Angular-Projekt?
ng new projekt-name
Was macht das File .editorconfig auf der höchsten Ebene der Projektstruktur?
Das ist eine Konfigurationsdatei für Texteditoren. Hier kann man allgemeine Codestyles definieren (z.B. Anzahl Einrückungen im Code)
Was ist das File angular.json auf der höchsten Ebene der Projektstruktur?
Das ist die Konfigurationsdatei von Angular CLI
Was ist das File package.json auf der höchsten Ebene der Projektstruktur?
Das ist die Konfigurationsdatei von npm
Was ist das File tsconfig.json auf der höchsten Ebene der Projektstruktur?
Eine von drei Konifurationsdateien für den TypeScript-Compiler. Diese wird von Texteditoren mit Typescript-Unterstützung benutzt.
Was ist das File tsconfig.app.json innerhalb des src Ordners der Projektstruktur?
Konfigurationsdatei für den TypeScript-Compiler. diese wird beim Bauen der Anwendung ergänzend zur Datei tsconfig.json benutzt.
Was ist das File tsconfig.spec.json innerhalb des src Ordners der Projektstruktur?
Konfigurationsdatei für den TypeScript-Compiler. Diese wird, beim Ausführen der Unit-Tests, ergänzend zu den tsconfig.json benutzt.
Was kann man in der Datei namens angular.json machen?
In dieser Datei befinden sich einige Optionen, die das Verhalten von Angular CLI und seine Kommandos steuern. Mithilfe dieser Optionen kann man Angular CLI anpassen.
Was passiert, wenn man in der Konsole den Befhel ng build eingiebt?
Die Anwendung wird gebaut und das Ergebnis wird in das dist-Verzeichnis geschrieben.
Was ist AOT?
Steht für Ahead Of Time Compiler.
Was macht der AOT?
Er konvertiert den Angular HTML und Typescirpt-Code in der Erstellungsphase in JavaScript-Code bevor der Browser diesen Code herunterlädt und ausführt.
Welche zwei Möglichkeiten zur Kompilierung gibt es?
JIT Just-in-Time: Kompiliert die App zur Laufzeit im Browser
AOT Ahead-of-Time: kompiliert die App zum Zeitpunkt der Erstellung
Warum sollte man ein Property im ts-File das im HTML genutzt wird nicht auf private setzen?
AOT kann das Property nicht mehr finden. (Achtung, mit JIT gibt es noch keine Probleme, also nicht merkbar beim Programmierprozess)
Wie sind die Dateinamen in Angular allgemein aufgebaut?
Name der Funktionalität des Bausteins, Punkt, Typ des Bausteins (component, module), Punkt Filendung (ts, html, scss)
(In Klammern nur Beispiele)
Was sind Angular-Module?
Angular-Module helfen beim Gliedern einer Webanwendung in verschiedene Funktionsblöcke. Alle Bausteine, die lögisch zu einem Funktionsbock gehören, werden mit dem entsprechenden Modul registriert.
Angular-Moduel kapseln Komponenten, Pipes und Direktiven.
Technisch gesehen ist ein Angular-Modul (wie auch alle anderen Angular-Bautsteine) eine Klasse. Was die Klasse zu einem Angular-Modul macht, ist die Nutzung von NgModule-Decorators. Diese definieren Metadaten, die Angular zur Laufzeit benötigt, um die Anwendung zu inizialisieren.
Was sind Decorators?
Decorators sind spezielle Funktionen, die für Klassen und ihre Eigenschaften, Methoden und Parameter genutzt werden können.
Sie werden zur Laufzeit aufgerufen und können zum Beispiel die Funktionalität der Klasse erweitern.
In Angular werden Decorators verwendet, um Angular-Bausteine zu konfigurieren und um Metadaten zu definieren. Einen Decorator erkennt man an dem @-Symbol welches vor dem Namen des Decorators steht.
Was ist hier falsch?
Es wurde Code zwischen den Decorator und die Klassendefinition geschrieben. Dies gibt zur Laufzeit eine Exception
Woher kommen die Decorators?
Alle Decorators von Angular sind Teil des @angular/core-npm- Pakets
Welches Modul muss in jeder Angular-Applikation ganz sicher einmal importiert werden?
Das BrowserModule.
Das BrowserModule ist Teil des @angular(platform-browser -npm-Paktetes und muss in jeder Angular-Webanwendung importiert werden.
Es tellt Funktionalitäten bereit, um mit dem Browser zu interagieren.
Deises Angular-Modul darf nur einmal importiert werden.
Es wird meistens im Haupt-Angular-Modul app.module.ts importiert.
Was kann man in der Eigenschaft, also dem declerations -Array des NgModule-Decorators angeben?
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.
Was kann man in der Eigenschaft, also dem providers-Array des NgModule-Decorators angeben?
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.
Was kann man in der Eigenschaft, also dem exports-Array des NgModule-Decorators angeben?
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.
Was was hat es für eine Auswirkung, wenn man ein anderes Modul in dem export-Array eines NgModule-Decorators angiebt?
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.
Was kann man in der Eigenschaft, also dem imports-Array des NgModule-Decorators angeben?
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.
Was kann man in der Eigenschaft, also dem bootstrap-Array des NgModule-Decorators angeben?
Hier wird die Hauptkomponente der Anwendung definiert. Diese Eigenschaft wird nur in der Haupt-Angular-Modul benutzt. Die Hauptkomponente ist die Wurzel des Komponentenbaumes.
Was ist eine SPA?
- 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.
Was ist REST und wo benutzt es in einer Angular Applikation?
Kennst du was anderes als REST?
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.
Was kannst über MVC sagen?
- 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
Was ist Typescript
- 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
