Angular 7.0 – Was ist neu an seinem neuen Avatar?

Die Stärke eines Gebäudes liegt in seinen Betonpfeilern. So ist das Framework für eine Webanwendung. Ein Software-Framework bietet eine Standardmethode zum Entwerfen, Erstellen und Bereitstellen von Anwendungen. In einer Welt der Java-Plattformen war das Javascript-Framework das meistgeäußerte Schlagwort, bis Angular an Bedeutung gewann.
Sehen wir uns nun einige hervorstechende Merkmale von Angular an.

• Angular ist ein Open-Source-Javascript-Framework, das sich in das verwandelt hat, was jetzt „Typescript“ genannt wird.
• Codegenerierung und -entwicklung sind im Vergleich zu einem (Javascript) JS-Code schnell.
• Die Befehlszeilen-Eingabeaufforderung (CLI) enthält Befehle zum schnelleren Erstellen von Anwendungen.
• Der Kodex ist gut organisiert, da er Komponenten verwendet und somit die Produktivität verbessert
• Eine Direktive ist eine dynamische Funktion, die Variablen, if-Anweisungen und Schleifen in HTML verarbeitet
• Angular ist plattformübergreifend und somit unabhängig von Browser und Betriebssystem
• Angular CLI wird mit Testwerkzeugen geliefert, die für Unit-Tests hilfreich sind

Lernen Sie Software-Engineering-Kurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

AngularJS – Ein Vorläufer von Angular

AngularJS war das erste Produkt in der 2009 von Google eingeführten Angular-Serie. Es ist ein Client-seitiges oder ein Front-End-Framework. Das bedeutet, dass der Code im Browser des Benutzers ausgeführt wird und nicht auf dem Webserver. AngularJS wurde rein in Javascript geschrieben. Dies wurde entwickelt, um die Anwendungslogik zu entkoppeln, war jedoch der einzige einigermaßen erfolgreiche und gepflasterte Weg für Angular mit seinem aktuellen Avatar 7.0.
Ist AngularJS die richtige Wahl für Ihre nächste Entwicklung mobiler Apps?

Angular 7.0-Framework

Lassen Sie uns kurz die Bausteine ​​von Angular verstehen:

1. Modul : Untergliedert die Hauptbildschirme der Anwendung grundsätzlich logisch. Wenn es beispielsweise eine Warenkorbseite gibt, möchte man vielleicht ein Warenkorbmodul haben.
2. Komponente : Dies ist ein Abschnitt der Benutzeroberfläche und eine „Klasse“ wie in der objektorientierten Programmierung. Dies ist der grundlegende Baustein der Benutzeroberfläche (UI). Die Komponentenklasse enthält die Kernlogik für die Seite.
   Komponenten bestehen aus:
   1. Vorlage : Eine Vorlage ist in HTML geschrieben oder es können HTML-Dateien sein. Es kann dynamische Eigenschaften wie Variablen haben und die Verwendung von 'if-Bedingungen' ist mit Direktiven möglich.
   2. Klasse : Ist der Code für die Anwendung. Der Code ist in Typescript geschrieben. Typoskript ist eine Obermenge von Javascript. Typoskript ist eine „statische“ Typsprache, in der Variablen mit definierten Typen deklariert werden. Daher werden Fehler bei der Kompilierung des Programms abgefangen und nicht zur Laufzeit. Angular-Klassen können auch in Javascript geschrieben werden. Komponenten haben Dateneigenschaften und Methoden.
   3. Metadaten : Um zu identifizieren, dass die Klasse eine Angular-Komponente ist, verwendet man Metadaten. Metadaten können mit einer Decorator-Deklaration an Typescript angehängt werden.
      Lassen Sie uns eine einfache Komponente in Angular durchgehen.
      

       Importiere {Komponente} aus ''@angular/core'' ; Hier wird das Komponentenpaket aus der Angular-Kernbibliothek importiert.
      @component ({ (dies ist eine Decorator-Deklaration)
      Selektor : 'myapplication' …(.dies ist das benutzerdefinierte HTML-Tag, das wir zum Einfügen der Komponente verwenden. )
      Vorlage: '<h1> Hallo {(Name)}</h1> (Name ist eine Variable)
      })
      export class AppComponent{ (Dies ist die Komponentenklasse und 'name' ist eine Eigenschaft in der Klasse)
      name = 'Winkelgerüst';
      }
      <Körper>
      <myapplication>Hier wird eine Beispiel-App-Komponente geladen..</myapplication>
      </body>

   4. Datenbindung : Ein Prozess, der die Kommunikation zwischen der Komponente und der Ansicht ermöglicht. Daten werden also von der Komponente an die Ansicht und umgekehrt übergeben. Es gibt vier Arten der Datenbindung. Bei der Interpolation und Eigenschaftsbindung werden die Daten von der Komponente an die Ansicht gesendet, und bei der Ereignisbindung werden die Daten von der Ansicht oder der Vorlage an die Komponente gesendet. Bei der Zwei-Wege-Bindung werden die Daten in beide Richtungen übertragen.
   5. Service : Dies ist eine Klasse, die für wiederverwendbaren Code geschrieben wurde, dh Code, auf den von mehreren Komponenten aus zugegriffen werden kann. Diese Klassen senden Daten und Funktionen über Komponenten hinweg. Dienstklassen können auch Daten aus einer Datenbank oder einer js/JSON-Datei abrufen. Wenn man eine Service-Klasse verwendet, sieht der Code organisiert und fragmentiert aus.
   6. Direktive : Das Anpassen von HTML-Attributen zum Erweitern der Leistungsfähigkeit von HTML ist eine Direktive. ngIf, ngFor, ngModel sind Direktiven. ngModel ist dafür zuständig, die Ansicht in das Modell einzubinden, was andere Direktiven wie input, textarea oder Select erfordern.
      Hier ist ein Stück Code, das zeigt, wie ngmodel funktioniert.
      
      

       <div ng-app="" ng-init="firstName='John'">
      <p>Geben Sie einen Namen in das Eingabefeld ein:</p>
      <p>Name: <input type="text" ng-model="firstName"></p>
      <p>Du hast geschrieben: {{ firstName }}</p>
      </div>
      

      firstName wurde also mit „John“ initialisiert, und wenn man einen neuen Wert in das Textfeld eingibt, enthält firstName den neu eingegebenen Namen.

   7. Abhängigkeitsinjektion (DI) : Klassen benötigen Objekte, um eine bestimmte Funktion auszuführen. Anstatt die Objekte jedes Mal in der Klasse zu erstellen, erhält die Klasse die Objekte (Abhängigkeiten) von externen Quellen. Im DI-Framework sind die folgenden Schritte zu befolgen:
      1. Erstellen Sie eine Serviceklasse, z. Mitarbeiterdaten
      2. Registrieren Sie diese Serviceklasse beim Injector. Ein Injector ist ein Container, der alle Abhängigkeitsklassen enthält
      3. Deklarieren Sie die Employeedata-Klasse als Abhängigkeit in der Klasse, die sie benötigt, z. EmployeeList-Klasse

Versionen von Angular

Nach AngularJS wurde Angular 2 veröffentlicht, das eine vollständige Neufassung von AngularJS war. Komponenten wurden von Angular 2 hinzugefügt. Angular 2 war nicht abwärtskompatibel. Angular besteht aus einer Reihe von Paketen und das Router-Paket in Angular 3 war nicht synchron. Daher wechselte das Angular-Team zu Angular 4, das mit allen Korrekturen und Funktionen mit Abwärtskompatibilität zu Angular 2 veröffentlicht wurde. Anschließend wurden Angular 5, Angular 6 veröffentlicht und die neueste Version ist jetzt Angular 7 .

Was ist neu in Angular 7.0?

1. CLI -Eingabeaufforderungen: Eine Änderung in der Angular-Befehlszeileneingabeaufforderung besteht darin, dass die CLI den Benutzer auffordert, die Funktionen auszuwählen, während die allgemeinen Befehle ausgeführt werden. Features wie Angular Routing oder das Format des Stylesheets und vieles mehr sind frei wählbar. In den vorherigen Versionen von Angular musste man sich die Optionen merken und sie an der Eingabeaufforderung eingeben.
2. Anwendungsleistung :
   1. Häufige Fehler:
      In dieser Version analysierte und entfernte das Angle-Team einige häufige Fehler der Entwickler, wie z. B. das Polyfill „Reflect-Metadata“, das in die Produktion aufgenommen wurde, was eigentlich nur in der Entwicklung benötigt wird.
      
   2. Bundle-Budgets:
      Um die Leistung der Anwendung zu verbessern, werden standardmäßige Bundle-Budgets in angle.JSON definiert. Die Entwickler werden nun gewarnt, wenn die Größe des Anwendungspakets eine Grenze von 5 MB überschreitet und wenn das ursprüngliche Paket 2 MB überschreitet. Diese Werte können in der JSON-Datei nach Bedarf geändert werden.
      
3. Angular Material und das CDK: Das Angular Component Development Kit (CDK) wurde aus dem Angular Material (UI für Bibliotheken) erstellt. Die beiden neuen Funktionen, die im CDK hinzugefügt wurden, sind
   1. Virtuelles Scrollen:
      Um nur den sichtbaren Teil auf dem Bildschirm zu laden, bietet das Paket <cdk-virtual-scroll-viewport> Helfer für Direktiven, die auf Scroll-Ereignisse reagieren. Es werden also nur die Elemente gerendert, die auf den Bildschirm passen. Wenn ein Benutzer durch die Liste scrollt, lädt und entlädt das DOM die Elemente dynamisch basierend auf der Anzeigegröße.
      
   2. Drag-and-Drop-Unterstützung:
      Das @angular/cdk/drag-drop-Modul unterstützt die freie Drag-and-Drop-Funktion eines Elements, die Neuordnung von Elementen in einer Liste, das Verschieben von Elementen in einer Liste und so weiter. Dies geschieht mit Hilfe der Direktiven cdkDropList und cdkDrag.
      
4. Angular 7.0 hat seine Abhängigkeiten aktualisiert, um Typescript 3.1, RxJS 6.3 und Node 10 zu unterstützen .
5. Verbesserte Zugänglichkeit von Selects: Das native „select“ hat einige Leistungs-, Zugänglichkeits- und Benutzerfreundlichkeitsvorteile, daher ist die Verwendung eines nativen select-Elements innerhalb eines „mat-form-field“ eine neue Funktion in Angular 7.0.
6. Winkelelemente: Eine kleine Änderung, aber neu in Angular 7
   „ Angular Elements unterstützt jetzt die Inhaltsprojektion unter Verwendung von Webstandards für benutzerdefinierte Elemente .“ — Das sagt Stephen Fluin, Angular.
7. Zusammenarbeit mit Partnern: Das Angular-Team hat daran gearbeitet, mit Community-Projekten zusammenzuarbeiten, die kürzlich gestartet wurden. Eines davon ist Angular Console. Angular Console ist eine Benutzeroberfläche für Angular CLI. Es ist gut für Anfänger und Experten, da es viel einfacher ist als Eingabeaufforderungen. Es gibt verschiedene UI-Versionen für Windows und Mac OS .

Die meisten Änderungen in Angular 7.0 beziehen sich auf Leistungsverbesserungen und Fehlerbehebungen. Daher ist es die bisher sicherste Version und die Migration von früheren Versionen ist einfach. Ivy ist die neue kommende Rendering-Engine, an der das Angular-Team arbeitet. Lasst uns bis dahin abwarten und beobachten. Lernen Sie weiter !

Wenn Sie mehr über die Full-Stack-Softwareentwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Softwareentwicklung von upGrad & IIIT-B an – Spezialisierung auf Full-Stack-Entwicklung, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenges Training bietet, 9+ Projekte und Aufgaben, IIIT-B-Alumni-Status, praktische praktische Schlusssteinprojekte und Jobunterstützung bei Top-Unternehmen.