Alles, was Sie über Angular 7 wissen möchten

Es war das Frühjahr 2018, als Google im März die vorherige Version des Front-End-JavaScript-Frameworks Angular 6 veröffentlichte. Und da sich die Saison umgekehrt hat und das Jahr 2018 kurz vor dem Abschied steht, begrüßen wir Angular 7 im Oktober im Herbst.

Ja, die Nachrichten sind bestätigt und die nächste Version ist bereits mit vielen Änderungen, wichtigen Updates und neuen Funktionen eingetroffen.

Diesmal geht es jedoch hauptsächlich um die Verbesserungen der Plattformen mit Schwerpunkt auf Angular Material 7 und Angular CLI 7.

Google hat auch einige neue Funktionen wie CLI-Eingabeaufforderungen, Scrollen, Ziehen sowie Virtual and Drop usw. für die Toolkette hinzugefügt.

Daher müssen Sie gespannt sein, was mit Angular 7 neu auf dem Spiel steht. Lassen Sie uns also ohne weitere Verzögerung die möglichen Änderungen anzeigen.

Bevor Sie beginnen, sollten Sie darüber informiert werden, dass Sie das besuchen müssen, wenn Sie auf Angular 7 aktualisieren möchten offizielle Website, wo alle Informationen und Richtlinien zu den Updates angegeben sind.

Wenn Sie jedoch die Version 6 verwenden, erledigt das Ausführen des folgenden Befehls Ihre Aufgabe.

von update @ angle / cli @ angle / core

Und das Beste ist, dass die Entwickler positive Bewertungen zu den Updates für Version 7 abgegeben haben und sagen, dass dies viel schneller geht.

Tatsächlich meinen sie auch, dass viele Apps Updates in weniger als 10 Minuten erhalten. Das ist etwas Cooles und Erstaunliches.

CLI-Eingabeaufforderungen

Die CLI fordert die Benutzer auf, die allgemeinen Befehle auszuführen, z von neuen oder von add @ angle / material mit der Absicht, Hilfe für den Bau eines neuen Projekts mit SASS zu erhalten.

Abgesehen davon hat Google auch Schematics aufgenommen, um das Paket zu nutzen, in dem die Schematics veröffentlicht werden. Sie müssen nur hinzufügen x-prompt Schlüssel zu einer Schaltplansammlung. Sie können das neueste CLI-Update auch global mit dem folgenden Befehl installieren:

`npm install -g @ angle / cli @ latest`

Sobald dies abgeschlossen ist, können Sie eine neue App entwickeln. Sie müssen nur ng new eingeben und die Eingabetaste drücken.

Codierung

Anwendungsleistung

Google ist bestrebt, die Leistung der Anwendungen zu verbessern, und hat daher zunächst die im gesamten Ökosystem häufig auftretenden Fehler identifiziert. Es wurde die Tatsache analysiert, dass die Entwickler das hinzugefügt haben Reflect-Metadaten Polyfill-Produktion, die nur während des Entwicklungsprozesses hilft.

Um dieses Problem zu lösen und es für die Variante 7 zu aktualisieren, hat Google beschlossen, das zu beseitigen polyfills.ts Datei automatisch, sondern als Aufbau für die Erstellung einer Anwendung im JIT-Modus hinzugefügt. Die Polyfüllung wird standardmäßig aus Produktionsbuilds entfernt.

Tatsächlich hat Google auch einen lobenswerten Schritt unternommen, indem es Budgets für die neuen Apps eingerichtet hat. Die standardmäßigen neuen Projekte würden die Bundle-Budgets in der CLI nutzen.

Dies würde die Entwickler vorsichtig machen, falls sie das Budget mit der Bundle-Größe überschreiten. Die Standardwarnung wurde auf 2 MB und der Fehler auf 5 MB festgelegt.

Das Gute ist jedoch, dass Sie die Standardeinstellungen in der ändern können angle.json Datei. Die Entwickler müssen lediglich einige Angaben zum Budget machen und die bevorzugte Warn- und Fehlergröße festlegen.

"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]

Um die Größe des Bundles zu ermitteln, müssen Sie ng serv nur für die Angular-Anwendung ausführen.

mieten eckige Entwickler Banner

Winkelmaterial & das CDK

In diesem Jahr gab es ein großes Update im Material Design. Was ist der große Unterschied zur vorherigen Version? Nun, nichts als Sortierung, und Sie können nur eine kleine visuelle Unterscheidung erwarten, die die Materialdesign-Aktualisierungsspezifikationen hervorhebt. Tatsächlich würden die Entwickler auch geringfügige Änderungen bei der Aktualisierung des Materialdesigns sehen.

Es muss beachtet werden, dass das frisch enthaltene CDK die Vorteile von Virtual Scrolling und Drag & Drop erhalten würde. Sie müssen nur die importieren DragDropModule oder der ScrollingModule.

Virtuelles Scrollen

Das neu hinzugefügte CDK kann das virtuelle Scrollen durch Importieren von ScrollingModule nutzen.

Wenn wir Virtual Scrolling definieren müssen, werden die DOM-Elemente basierend auf den erkennbaren Aspekten der Liste geladen oder entladen. Dieses Mal hat Google die Geschwindigkeit der riesigen scrollbaren Listen beschleunigt.

<cdk-virtual-scroll-viewport itemSize="20">
<div *cdkVirtualFor="let dog of dogsArray">{{dog}}</div>
</cdk-virtual-scroll-viewport>

Sie können sogar den StackBlitz des Angular Materials entwickeln, um mit dem virtuellen Scrollen zurechtzukommen. Die in den DOM-Elementen vorgenommenen Änderungen können auch während des Bildlaufs angezeigt werden.

Bildlauf

Ziehen und loslassen

Das Drag & Drop wird vom CDK unterstützt und enthält Funktionen wie das automatische Rendern beim Verschieben von Elementen durch den Benutzer sowie die Hilfsmethoden für das Aufzeichnen oder Übertragen von Elementen in Listen wie z moveItemInArray und transferArrayItem.

ziehen und loslassen

Weitere Informationen zu Drag & Drop finden Sie hier Verknüpfung.

Bessere Zugänglichkeit von Selects

Das Angular-Team hat auch daran gearbeitet, die Zugänglichkeit der Selects in der Anwendung zu verbessern. Sie haben den Eingeborenen benutzt wählen Element in der Mattenformfeld. Die Leistung, Zugänglichkeit und Benutzerfreundlichkeit der nativen Auswahl wurde besser.

Das Team entschied sich jedoch eher dafür mat-select das bietet eine umfassende Kontrolle über die Präsentationsoptionen.

Winkelelemente

Mithilfe der Winkelelemente können Sie den Inhalt mithilfe der Webstandards für die benutzerdefinierten Elemente projizieren.

<my-custom-element>This content can be projected!</my-custom-element>

Partner startet

Laut dem Angular-Team ist einer der Hauptfaktoren für den Erfolg der Front-End-Entwicklung die zunehmende Anzahl der Community-Mitglieder.

Daher wurde weiter nach neuen Community-Projekten gesucht, die in jüngster Zeit vorgestellt wurden.

  • Angular Console: Dies ist eine Konsole, die Sie herunterladen und mit der Ausführung der Angular-Projekte auf den lokalen Computern beginnen können.
  • @ angle / fire: Es wurde als neuer Space auf npm eingeführt und ist die erste stabile Version für Angular.
  • NativeScript: Mit dieser Funktion können Winkelentwickler nur ein Projekt für das mit NativeScript installierte Web und Mobile erstellen.
  • StackBlitz: Google hat den StackBlitz außerdem mit dem Angular Language Service und Bearbeitungsfunktionen mit Registerkarten gestartet.

Aktualisierungen der Dokumentation

Das Team hat kontinuierlich daran gearbeitet, die Richtlinien und Referenzmaterialien zu verbessern, um den Entwicklern einen besseren Service zu bieten.

Die Aktualisierungen in Bezug auf die Dokumentation zu Angular sind ein solcher Schritt, einschließlich des Referenzmaterials für die Angular CLI.

Abhängigkeitsaktualisierungen

Nicht nur die Dokumentationsaktualisierungen, sondern auch die Abhängigkeiten wurden von Projekten von Drittanbietern aktualisiert. Dies beinhaltet die Unterstützung von TypeScript 3.1, das RxJS 6.3, und Knoten 10.

Wenn Sie jedoch Knoten 8 haben, erhalten Sie weiterhin Unterstützung. Für das neueste Update von TypeScript 3.1 ist es jetzt obligatorisch, TS 3.1 für Angular 7 zu verwenden.

Ivy Renderer

Laut offiziellen Informationen wurde Angulars neues Projekt und die Rendering-Pipeline Ivy der nächsten Generation mit der Veröffentlichung von Angular 7 nicht eingeführt, da das Team noch daran arbeitet. Der aktuelle Status ist, dass er sich im aktiven Bereitstellungsprozess befindet.

Die Abwärtskompatibilität der Anwendung wurde angegeben und wir würden bald die Opt-In-Vorschau von Ivy erhalten, sobald sie startbereit ist.

Wenn Sie nach einem Angular-Entwicklungsservice für Ihr Projekt suchen, kontaktieren Sie uns jetzt für Ihre geschäftlichen Anforderungen. Unsere Angular-Entwickler verfügen über umfangreiche Erfahrung in diesem Framework.

Update: Angular 8.0 ist da: Was erwartet Sie und wie können Sie ein Upgrade durchführen?

Similar Posts

Leave a Reply