Angular

Was ist Angular?

Angular ist ein Frontend Framework. Das bedeutet, dass die Entwicklung und Funktionalität im Browser und nicht auf dem Server ausgeführt wird. Ursprünglich wurde es zur Unterstützung von Single-Page-Applikationen (SPAs) entwickelt. Die Konkurrenz unter Frontend Frameworks wurde aber immer grösser wurde, weshalb sich Angular weiterentwickelt hat mit erweiterte Funktionen, die wir heute kennen.

Google entwickelte und veröffentlichte im Jahr 2010 AngularJS, ein JavaScript-basiertes Open-Source-Framework für Webanwendungen. In späteren Versionen von Angular im Jahr 2016 wurde das „JS“ aus dem Namen gestrichen, da das Framework für die Entwicklung auf TypeScript gewechselt hat. Die Bezeichnung AngularJS bezieht sich also auf die erste Version von Angular, die JavaScript verwendet. In der Welt der Webentwicklung bezieht sich „Angular“ ohne das „JS“ im Allgemeinen auf alle späteren Versionen von Angular, die stattdessen auf TypeScript basieren, nämlich Angular 2 und Angular 4. Obwohl Angular inzwischen weit verbreitet ist, werden immer noch Updates für AngularJS veröffentlicht. In diesem Blog werde ich über Angular und nicht über das ältere AngularJS sprechen.

Angular Architektur

Die grundlegenden Blöcke, aus denen eine Angular-Anwendung besteht, heissen NgModules. Ein NgModule ist eine Klasse, die durch den @NgModule Dekorator gekennzeichnet ist. @NgModule nimmt eine Metadata Objekt, das beschreibt, wie das Template einer Komponente kompiliert werden soll. Es identifiziert die eigenen Komponenten des Moduls und macht einige von ihnen durch die exports-Eigenschaft öffentlich, so dass externe Komponenten sie verwenden können. @NgModule kann auch Service Providers für die Dependency Injection hinzufügen.

Module sind Container, in denen die Komponenten und Services einer Anwendung gespeichert werden. Die Komponenten sind die grundlegenden Bausteine von Webseiten in Angular. Sie enthalten einen visuellen Teil in HTML und einen funktionalen Teil in Typescript. Komponenten sind TypeScript-Klassen, die mit spezifischen Funktionen dekoriert sind. 

In Angular kann jedes Programm als ein hierarchischer Modulbaum betrachtet werden. Andere Module werden von einem Root Modul durch “Import” verlinkt. In Angular werden die Module als TypeScript-Klassen deklariert. Diese Klassen, die normalerweise leer sind, werden mit einer speziellen Funktion dekoriert. Es ist die Funktion @NgModule(), die nur ein Parameter hat. In diesem Parameter wird ein Objekt abgegeben. In den Eigenschaften dieses Objekts wird das Modul konfiguriert.

Angular Lazyloading

Wenn eine SPA (Single Page Application) erstellt wird, kann es sein, dass die Anzeige der Komponenten durch das Hinzufügen von Funktionen mehr Zeit in Anspruch nimmt.

Angular bietet ein LazyLoad-Modul, das ein träges Laden durchführen kann und so eingestellt werden kann, dass nur die notwendigen Dateien geladen werden. Es handelt sich dabei um einen Mechanismus zum Laden von Modulen, die zum Zeitpunkt des Routings aufgerufen werden, nicht zum Zeitpunkt des Anwendungsstarts. Ein Beispiel: Nehmen wir an, wir haben eine Website, die einen Anmeldebildschirm anzeigt, wenn wir sie aufrufen. Beim Zugriff auf den Anmeldebildschirm mit dem LazyLoad-Modul ist es möglich, nur die mit der Anmeldung verbundenen Daten zu lesen und andere Daten nach der Anmeldung zu laden. Dadurch wird die Menge der Inhalte, die zuerst geladen werden, reduziert, und das Laden der ersten Seite wird beschleunigt.