Lassen Sie uns wissen, was es Neues gibt

Die Spekulationen sind vorbei. Googles neues JavaScript Framework Angular 6 ist da. Während des Starts der vorherigen Version von Angular 5 im November 2017 hatte Google mit den Vorbereitungen für die Veröffentlichung des neuen Angular 6 begonnen. Daher wird es wahrscheinlich zu sehen sein, welche wesentlichen Änderungen in dieser neuen Version eingeführt wurden.

Angular 6 hat mehr Wert auf die Toolchain als auf das zugrunde liegende Framework gelegt, was die Verwendung von Angular einfacher und schneller macht.

Wenn Sie mit den Framework-Paketen wie @ angle / core, @ angle / common, @ angle / compiler usw., dem Angular Material einschließlich CDK und der Angular CLI fortfahren, werden die Schlüsselversionen synchronisiert.

Die Änderungen tragen zu einer eindeutigen Kreuzkompatibilität bei. Die Small- und Patch-Releases werden jedoch entsprechend den Anforderungen der Projekte zur Verfügung gestellt.

RxJS v6

Mit dem Start von Angular 6 haben die Entwickler Zugriff auf RxJS 6. Sie müssen jedoch Ihre Anwendung aktualisieren. Tatsächlich wurde die Version 6 viele Wochen zuvor gestartet und mit verschiedenen wichtigen Änderungen eingeführt, einschließlich des Abwärtskompatibilitätspakets rxjs-compatible, mit dem die Anwendungen reibungslos ausgeführt werden können.

Darüber hinaus hat RxJS auch die Methode zum Importieren von Dingen geändert. Lassen Sie uns dies anhand eines Beispiels analysieren:

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe(
map(n => n * n)
);

In der früheren Version wurde die Art und Weise des Importierens jedoch wie folgt geschrieben

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe(
map(n => n * n)
);

Tatsächlich hatte RxJS 5.5 die Pipeline-Betreiber vorgestellt. Abgesehen davon müssen Sie beim Upgrade auf Angular 6.0 die vollständigen Dokumente durchgehen, die vom Angular-Team geschrieben wurden. Es enthält auch einen Satz von vier neuen tslint-Regeln, die besser als rxjs-tslint bekannt sind.

Winkelmaterial + CDK-Komponenten

Eines der wichtigsten Highlights des Angular 6 war die neue Baumkomponente, mit der die hierarchischen Daten dargestellt werden. Das Team Angular gibt an, dass nach den Mustern aus der Datentabellenkomponente die CDK-Häuser und Kernbaumanweisungen einschließlich des Angular-Materials die gleiche Erfahrung mit Materialdesign-Stilen bieten.

Außerdem wurden die neuen Abzeichen zusammen mit den Komponenten des unteren Blattes veröffentlicht. Das Abzeichen ist nützlich, um wichtige Informationen wie die ungelesenen Elemente anzuzeigen, während die Komponenten im unteren Bereich die spezifischen, auf Mobilgeräte ausgerichteten Dialoge vom unteren Standpunkt aus anzeigen, die eine Liste von Optionen darstellen, gefolgt von Aktionen.

Kein Zweifel, dass das Paket @ angle / cdk / overlay heute als eine der effektivsten Infrastrukturen in CDK identifiziert wurde.

des Updates

ng update wurde als neuer CLI-Befehl bezeichnet, mit dem Sie Ihre Projektabhängigkeiten auf die neuesten Versionen aktualisieren können, einschließlich der Kernpakete in den Abhängigkeiten und devDependencies zusammen mit der CLI. Aufgrund der rekursiven Aktion werden auch die Abhängigkeiten einschließlich zone.js, rxjs und typescript automatisch aktualisiert.

Ansonsten werden auch die Skripte mit Hilfe von Schaltplänen aktualisiert. Beachten Sie jedoch, dass, wenn eine der Abhängigkeiten das ng-Aktualisierungsschema anbietet, die Codes in der Regel automatisch aktualisiert werden, wenn die Änderungen erforderlich sind.

Ein Schaltplan wird als Paket bezeichnet, das hauptsächlich die Aufgaben für die Entwickler enthält, z. B. das Entwickeln von Codes oder das Aktualisieren des Codes. Die klassischen Aufgaben von Angular CLI sind im Paket @ schematics / angle verfügbar. Es wurden jedoch einige weitere neue Funktionen hinzugefügt, z. B. das @ schematics / package-update.

Als solche gibt es vier Hauptaufgaben, die von Schaltplänen angeboten werden, einschließlich:

  • @ angle / cli zum Aktualisieren der CLI
  • @ angle-devkit zum Aktualisieren des DevKit
  • @angular zum Aktualisieren von Angular-Paketen
  • Alles zum Aktualisieren eines völlig sofortigen Updates

Wenn Sie jedoch nur die Angular-Pakete und nicht die CLI-Version aktualisieren möchten, müssen Sie zuerst den Schaltplan installieren.

yarn add --dev @schematics/package-update

Fügen Sie dann ein Schaltplanskript in Ihre package.json ein

"scripts": {
"ng": "ng",
"schematics": "schematics"
// ...
},

Als nächstes müssen Sie den Befehl ausführen

yarn schematics @schematics/package-update:@angular

Und dies aktualisiert schließlich die Angular-Pakete.

Es wird erwartet, dass das Angular-Team in den kommenden Monaten einige weitere Bibliotheken und Pakete in die ng updateSchematics aufnehmen wird. Darüber hinaus soll das Komponententeam der Unternehmensbibliothek ng update verwenden, um Änderungen vorzunehmen und den Entwicklern Zeit zu sparen.

von hinzufügen

Neben dem ng-Update gibt es noch einen weiteren CLI-Befehl namens ng add , mit dem Sie einem Projekt problemlos neue Möglichkeiten hinzufügen können. Um neue Abhängigkeiten herunterzuladen, muss ein Paketmanager unterstützt und die Schaltpläne oder Installationsskripts implementiert werden, um Änderungen im Projekt zu konfigurieren und weitere Abhängigkeiten wie Polyfills oder gerüstpaketspezifischen Initialisierungscode hinzuzufügen.

Daher können Sie nach einigen Beispielen für eine neue Anwendung Ausschau halten:

  • Mit ng add @ angle / pwa können die Anwendungen nach dem Hinzufügen des App-Manifests und des Service Workers in PWA konvertiert werden
  • Die Verwendung von ng add @ angle / material hilft bei der Installation und Einrichtung von Angular Material einschließlich des Themas. Sie können auch eine neue Starterkomponente in ng generate registrieren
  • Mit ng add @ ng-bootstrap / schematics können Sie den ng-bootstrap zu Ihrer Anwendung hinzufügen
  • Das ng add @ clr / angle @ next wird zum Installieren und Einrichten von Clarity in VMWare verwendet.
  • In ng add @ angle / elements müssen Sie die Polyfill document-register-element.js und Abhängigkeiten für Angular Elements hinzufügen

Elemente

Das Angular-Team hat die ersten Angular-Elemente mit dem Ziel gestartet, Angular-Komponenten mit der vorhandenen Angular-Anwendung zu booten. Sie müssen sie nur als benutzerdefinierte Elemente registrieren.

In angular.io wird es häufig als Content-Management-System verwendet, mit dem Entwickler aktiv über eingebettetes HTML booten können und Angular-Komponenten nicht manuell gebootet werden müssen.

Baumschüttelbare Anbieter

Wenn ein Entwickler Module in das JavaScript-Framework importiert oder exportiert, bleiben einige der Codes übrig, die nicht verwendet werden. Nun, dies ist im Hinblick auf das JavaScript-Framework als Tree Shaking oder Dead Code Elimination bekannt.

Die nicht verwendeten Module werden nicht in das Bundle aufgenommen. Und um genau zu sein, wurde die neue Methode mit der Absicht eingeführt, das Schütteln von Bäumen in der Anwendung zu verbessern.

Jetzt müssen Sie sich mit Hilfe des neuen Attributs requireIn direkt im Dekorator @Injectable () registrieren. Das Stammverzeichnis oder ein anderes Modul der Anwendung wird akzeptiert. Wenn root verwendet wird, wird das injizierbare Element als Singleton in der Anwendung registriert.

In ähnlicher Weise durch Verwendung von Bereitgestellt; UsersModule, das injizierbare Element, wird als Anbieter des UsersModule registriert, das nicht zum Anbieter des Moduls hinzugefügt wurde.

@Injectable({
providedIn: 'root'
})
export class UserService {
}

Tatsächlich wird es nicht nur den Bibliotheksentwicklern empfohlen, sondern auch den App-Entwicklern, die ein Injectable registrieren können. Darüber hinaus registriert es ein InjectionToken direkt bei BereitgestelltemIn.

export const baseUrl = new InjectionToken<string>('baseUrl', {
providedIn: 'root',
factory: () => 'http://localhost:8080/'
});

Dies erleichtert das Testen von Einheiten. Der UserService muss nur vorausgesetzt verwendenIn: ‘root’:

beforeEach(() => TestBed.configureTestingModule({}));

Winkelmaterial-Starterkomponenten

Wenn Sie einer vorhandenen Anwendung Material hinzufügen müssen, ist es eine gute Option, den Befehl ng add @ angle / material auszuführen. Dies würde Ihnen drei neue Starterkomponenten bieten. Es enthält:

  • Material Sidenav
  • Material Dashboard und
  • Materialdatentabelle

Im ersten Fall erhalten Sie eine Starterkomponente mit einer Symbolleiste mit dem Namen der App und der Seitennavigation. Die reaktionsfähige Komponente basiert auf Haltepunkten.

Beispielsweise:
Wenn Sie den Befehl ng generate @ angle / material: material-nav –name = my-nav ausführen, erhalten Sie die Starterkomponente als material-nav

In der zweiten Option können Sie eine Starter-Dashboard-Komponente erstellen, die aus einer lebendigen Rasterliste von Karten besteht. Beispiel: ng generate @ angle / material: material-dashboard –name = my-dashboard generiert material-dashboard.

In der dritten Instanz können Sie eine Starterdatentabellenkomponente erstellen, deren Datenquelle für die Paginierung und Sortierung vorkonfiguriert ist.

Der Befehl ng generate @ angle / material: material-table –name = my-table liefert Ihnen die Materialtabelle der Starterkomponente.

Änderungen in Animationen

Die Polyfill für Webanimationen wird nicht mehr benötigt, da das Angular-Team die Implementierung von Animationen aktualisiert hat. Das einzige Mal, wenn Sie Polyfill nicht entfernen müssen, ist, wenn Sie AnimationBuilder verwenden.

Sobald die Polyfüllung aus der Anwendung entfernt wurde, können Sie ungefähr 47 KB Bundle-Größe einsparen. Dies verbessert auch Ihre Animationsleistung in Safari. Wenn ein Browser die element.animate-API jedoch nicht unterstützt, zieht sich Angular 6 in CSS-Frames zurück.

Bibliotheksunterstützung

Das Anbieten von Unterstützung für die Entwicklung und Erstellung von Bibliotheken war ein lobenswertes Merkmal von CLI. Schauen wir uns diesen Befehl an:
der Bibliothek generieren

Mit diesem Befehl können Sie ein Bibliotheksprojekt im CLI-Arbeitsbereich erstellen und anschließend weitere Konfigurationen und Tests durchführen.

CLI-Arbeitsbereiche

Die Version 6 von Angular CLI bietet umfassende Unterstützung für Arbeitsbereiche, die mehrere Projekte enthalten, einschließlich Anwendungen und Bibliotheken. Derzeit müssen Sie für die Projektkonfiguration und -erstellung von angular-cli.json zu angular.json wechseln. Der Arbeitsbereich enthält Projekte, Projekte enthalten Ziele und Ziele können Konfigurationen enthalten.

Updates zu Ivy

Das Angular-Team hat das neue Konzept von Ivy auf der ng-conf vorgestellt. Es ist die neueste Rendering-Pipeline. Derzeit befindet es sich noch im Entwicklungsprozess und wurde daher nicht mit Angular Version 6.0 veröffentlicht. Sie werden die Vorschau-Version kennenlernen, sobald sie fertig ist. Also bleibt gespannt.

Langzeitunterstützung (LTS)

Zuvor hatte das Angular-Team die Entwickler darüber informiert, dass sie ihre langfristige Support-Linie nur für Version 4 und Version 6 erweitern würden, um den Prozess der Aktualisierung eines Projekts auf ein anderes zu vereinfachen und komplizierten Projekten mehr Zeit für eine bessere Planung zu geben .

Jetzt wurde jedoch beschlossen, die Unterstützung ab Version 4 auf alle wichtigen Versionen auszudehnen.

Upgrade auf Angular 6.0 – Kennen Sie die drei einfachen Schritte

Wenn Sie also Ihr JavaScript Framework auf die neueste Version 6.0 aktualisieren möchten, befolgen Sie bitte die drei einfachen Schritte. Besuchen Sie natürlich die offizielle Website und befolgen Sie die Richtlinien.

  • Der erste Schritt ist das Aktualisieren von @ angle / cli
  • Aktualisieren Sie als Nächstes die anderen Framework-Pakete und
  • Zuletzt aktualisieren Sie andere Abhängigkeiten

Fazit

Nachdem Angular 6.0 bereits verfügbar ist, sollten sowohl die Webentwickler als auch die App-Entwickler schnell umfassend über die neueste Version von JavaScript Framework informiert werden. Das Angular-Team hat sein Bestes getan, um es mit neuen Funktionen und wichtigen Verbesserungen zu laden.

Sie müssen jedoch immer noch über Ivy in Kontakt bleiben, da es noch nicht veröffentlicht wurde. Maximieren Sie also die Vorteile, um außergewöhnliche Anwendungen zu erstellen, die die Aufmerksamkeit der Zielgruppen auf sich ziehen.

Similar Posts

Leave a Reply