Angular: Eine Reise eines der beliebtesten Front-End-Tools auf dem heutigen Arbeitsmarkt

Wie wir alle wissen, ist Angular das am meisten diskutierte Wort in der Frontend-Entwicklungswelt. Es hat in diesen Jahren eine große Popularität gewonnen. Angular wird zur Wahl vieler Frontend-Entwickler, und ich bin auch einer von ihnen.

In diesem Artikel werde ich hervorheben, wann Angular kam und wie schnell es zu einem Markt wurde. Alle sechs Monate kommt das Angular-Team mit der neuen Version von Angular, die es mit neuen Funktionen leistungsfähiger macht. Ich muss das eckige Team für ihre wunderbaren Bemühungen schätzen.

Nun, jetzt werden Sie vielleicht gespannt sein, wie es sich entwickelt hat und welche neuen Funktionen in verschiedenen Versionen hinzugefügt wurden. Jetzt ist das Warten vorbei. Lass uns anfangen!

Bevor ich fortfahre, möchte ich meine Leser wissen lassen, dass 'Angular 8' die neueste Version ist, die unser talentiertes Angular-Team veröffentlicht hat.

Geburt des Helden (AngularJS) - 2010

Im Jahr 2010 fand die Geburt des heutigen Markthelden statt. Es wurde als 'AngularJS' bekannt.

AngularJS ist ein Javascript-Framework, das von Google entwickelt wurde. Es wird verwendet, um Single Page Application (SPA) zu erstellen. Warten! Ich hoffe du weißt was SPA ist. Wenn nicht, fragen Sie Google danach und kehren Sie dann zurück, da dies einer der schönsten Ansätze ist, die Angular verwendet. Hier ist jedoch eine kurze Einführung in SPA (diejenigen, die es wissen, können Sie überspringen):

SPA oder Single Page Application ist eine Anwendung, bei der alles auf einmal heruntergeladen wird. Der gesamte erforderliche Code wird auf einmal heruntergeladen. Im Gegensatz zur mehrseitigen App müssen Sie nicht bei jedem Treffer eine Webseite vom Server anfordern und die Seite laden. In SPA wird die Datei index.html einmal mit dem gesamten Inhalt heruntergeladen. Bei jeder URL-Änderung lädt die vorhandene Webseite den anspruchsvollen Inhalt dynamisch. Dieser Ansatz bietet eine bessere Benutzeroberfläche beim Wechseln zwischen verschiedenen Seiten und vermittelt Ihnen ein Gefühl für die App.

Das war's mit SPA. Ich hoffe, es gibt Ihnen ein kurzes Bild davon. Kommen wir zum ursprünglichen Thema.

Mit AngularJS können Entwickler Webanwendungen schneller entwickeln. Es wird ein clientseitiges Rendering verwendet - eine Technik, bei der das Rendern des Inhalts vom Client (Browser) übernommen wird. Nun, ich werde nicht ins Detail gehen, was die Vor- und Nachteile dieser Technik sind, aber das Hauptanliegen bei dieser Technik ist SEO. Dieses Rendering, das Angular verwendet, ist schlecht in SEO. Warten! Denken Sie nicht, dass Winkel schlecht ist. Es gibt einen sehr beliebten Bollywood-Dialog - "Bild abhi baki hai bloß dost (Film ist noch übrig, mein Freund)". Ich denke, dieser Dialog passt zur aktuellen Situation. Ich werde diskutieren, warum ich das gesagt habe.

Jetzt sollten wir uns auf die Funktionen von AngularJS konzentrieren. Hier sind einige :

1) Datenbindung  - automatische Synchronisation zwischen Modell und Ansicht.

2) Abhängigkeitsinjektionssystem  - Ein Entwurfsmuster, in dem das System die abhängigen Objekte beim Erstellen des Objekts bereitstellt.

3) Umfang  - das kümmert sich um Controller und Ansicht.

4) Dienste  - zum Austausch von Informationen zwischen verschiedenen Teilen der Anwendung.

5) Direktiven  - Es gibt HTML Super Power. Zum Beispiel ng-model, ng-app.

6) Controller  - Herzstück der Anwendung, in der sich die Logik befindet.

7) Vorlage  - Ansicht, die Informationen mit unserem Controller und Modell liefert.

Diese Liste ist lang. Ich werde nicht näher auf AngularJS eingehen, aber bei AngularJS sind Controller das Herzstück der Anwendung. Nun, AngularJS wurde mit vielen Funktionen für die Entwicklung einer leistungsstarken Webanwendung geliefert, die jedoch irgendwann fehlschlugen, z. B. große Bundle-Größe, Leistungsprobleme, SEO-Probleme und Probleme mit der Code-Wartbarkeit. Dies bedeutet jedoch nicht, dass es sich um einen Totalausfall handelt. Datenbindung, Abhängigkeitsinjektionskonzepte sind Erfolg von Winkel. Daher können wir sagen, dass es halb Misserfolg und halb Erfolg ist.

Die Unvollkommenheit in AngularJS veranlasste das Angular-Team, das gesamte Framework von Grund auf neu zu schreiben. Eine derart große Änderung in der neuen Version eines Frameworks / einer Bibliothek wurde auf dem Markt nie erlebt. Die neue Version von Angular unterscheidet sich grundlegend von AngularJS. Wie ist es anders? Lassen Sie uns verstehen, indem wir in unser nächstes Unterthema eintauchen.

Winkel 2–2016

Die spätere Version von AngularJS kam 2016 auf den Markt. Damals war sie nicht mehr als AngularJS bekannt. Es hat einen Namen "Angular". Die Angular 1.x-Version ist als AngularJS bekannt. Eine spätere Version nach 2.x ist als Angular bekannt. Als ich auf meiner Reise zur Webentwicklung auf diese beiden Wörter stieß. Ich dachte buchstäblich, dass dies zwei verschiedene Frameworks sind und nach einer Recherche erfuhr ich, dass Angular eine aktualisierte Version von AngularJS ist. Ich hoffe, meine Leser hätten es nicht missverstanden.

Angular 2 kam mit drastischen Änderungen auf den Markt. Die größte Änderung war die Einführung von Typescript. Typescript ist eine Obermenge von Javascript mit zusätzlichen Funktionen, wie es den stark typisierten Oops-Konzepten folgt. Programmierer, die aus der objektorientierten Welt kommen, finden es im Gegensatz zu Javascript vertrauter.

Komponenten sind das Herzstück der eckigen 2+ Welt. Angular führte verschiedene Pakete ein, um grundlegende und wichtige Funktionen zu erreichen, wie das Routing-Paket zum einfachen Definieren von Routen, das http-Paket zum Abrufen von Daten vom Server, das Animationspaket für Animationen usw.

Angular 2 bietet auch ein Direktivenkonzept wie AngularJS. Direktiven verleihen unserem HTML-Code Superkräfte wie * ngFor, * ngIf (strukturelle Direktive) macht unser HTML dynamisch, während Attribut-Direktiven wie ngModel (für die bidirektionale Datenbindung) ngStyle für das Erscheinungsbild und Verhalten unseres DOM sorgen.

Ein weiteres Merkmal, das sich im Winkel nicht ändert, ist das DI-System. Wie angleJS liefert das DI-System die abhängigen Objekte (Abhängigkeiten) an die Komponente.

Warten! Ich habe vergessen, Ihnen von einer wunderbaren helfenden Hand zu erzählen, die eckig und eckig ist. Es ist eine großartige Hilfe, die uns hilft, unsere Anwendung schneller zu entwickeln, beispielsweise zum Generieren von Komponenten. Verwenden Sie einfach 'ng gc Komponentenname' ('g' wird generiert und 'c' ist Komponente). Dies ist eine weitere coole Funktion, die im Winkel hinzugefügt wurde.

Das ist nicht das Ende. Ich habe dir gesagt, dass der größte Nachteil von AngularJs ist, dass es schlecht in SEO ist und erinnere mich an den berühmten Dialog, den ich sagte. Sie werden in wenigen Minuten verstehen, warum ich das benutzt habe.

Es ist der größte Nachteil, dass angleJS schlecht in SEO ist. Wenn Sie die Seitenquelle anzeigen, können Sie sehen, dass nichts (kein HTML) dazu führt, dass Crawler die Website für nutzlos halten, dh ohne Informationen. Es ist sehr schmerzhaft, wenn Ihre Website möchte, dass Google Crawler sie indizieren und in der Google-Suche an die Spitze bringen, dies jedoch nicht erreichen konnten. Das Angular-Team hat sich darum gekümmert und Angular Universal eingeführt, das sich um die Suchmaschinenoptimierung Ihrer Angular-Website kümmert. Es verwendet serverseitiges Rendering, das wiederum das SEO-Problem löst.

Dies sind die Merkmale, mit denen Angular 2 auf den Markt kam.

Winkel 4 - März 2017

Nach dem Lesen des Unterthemas fragen Sie sich vielleicht, warum nicht Angular 3? Dies ist eine häufige Frage, die jedem in den Sinn kommen kann. Mach dir keine Sorgen! Ich werde Ihnen Bescheid geben. Der Grund, warum nicht Winkel 3 war, war das Router-Paket. Das Angular Router-Paket wurde bereits als v3 verteilt. Um Verwirrung zu vermeiden, hat Angular Team die Angular 4-Version veröffentlicht. Ich denke, jetzt können meine Leser springen, um die Merkmale von Winkel 4 zu verstehen.

Angular 4 wurde mit Fehlerkorrekturen und anderen neuen Funktionen und Verbesserungen geliefert. Die größte Verbesserung war die Bündelgröße. Sie reduzierten die Bündelgröße um 60%, was wiederum die Anwendung leichter machte und somit die Ladezeit der Anwendung verkürzte.

Das andere, was getan wurde, war im Animationspaket. Sie haben die Animationsfunktion in einem separaten Paket - @ angle / animations - herausgezogen.

Eine weitere Verbesserung betraf die Strukturrichtlinie. * ngIf kam mit else Teil in dieser Version.

Dies ist die kurze Einführung in die Merkmale von Winkel 4.

Winkel 5 - November 2017

Nach sechs Monaten kam das Angular-Team mit einer weiteren neuen Version, dh Angular 5. Diese Angular 5-Version enthielt erneut viele neue Funktionen, Verbesserungen und Fehlerbehebungen.

Das Hauptanliegen jeder Website ist die schnellere Ladezeit. Angular hat sich auch in dieser Version darum gekümmert. Um die Anwendungsleistung weiter zu verbessern, wurde der Build-Optimierer eingeführt. Es handelt sich um ein Tool, das eingeführt wurde, um kleine Bundles zu erstellen. Es verwendet die Baumschütteltechnik, um den toten Code aus der Anwendung zu entfernen.

Es wurden auch Compiler-Verbesserungen vorgenommen, die eine schnellere Neuerstellung der Anwendung ermöglichen.

Eine weitere Funktion, die eingeführt wurde, war der Status-Übertragungsschlüssel (TransferStateKey, der Teil des Plattform- / Browser-Pakets ist). Gut! Sie könnten denken, was es ist? Wann verwenden? Sie können die Schönheit dieser Funktion in Ihrer Anwendung nutzen, wenn Sie SSR verwenden. Ja, wenn Sie SSR implementiert haben, müssen Sie die Statusübertragungsschlüsselfunktion verwenden. Der Grund, warum ich dies gesagt habe, ist, dass wenn Sie SSR verwenden und Ihre Anwendung eine HTTP-Anfrage stellt (was durchaus üblich ist), diese Anfrage zweimal aufgerufen wird, dh eine auf dem Server und eine andere im Browser. Dies führt zu einem flackernden Problem (ich habe dieses flackernde Problem in meiner Anwendung durchlaufen, weil die HTTP-Anforderung zweimal aufgerufen wurde). Dank der Funktion zur Übertragung des Status. Mit dieser Funktion kann der Browser die Antwort einer HTTP-Anforderung verwenden, die auf dem Server ausgeführt wird.Es verwendet die Antwort, die der Server von einer HTTP-Anforderung erhält. Wie der Name schon sagt, überträgt der Server den Antwortstatus mit HTML an den Browser. Daher kann ein zweimaliger Treffer einer HTTP-Anforderung vermieden werden.

Eine weitere Verbesserung war das http-Client-Paket. In dieser Version wurde HTTPClientModule mit Verbesserungen wie der Verwendung dieses Moduls ausgestattet. Entwickler müssen die Antwort nicht mithilfe einer Karte analysieren. Der Parsing-Schritt ist nicht mehr erforderlich. Angenommen, es gibt eine Antwort vom Typ Nicht-JSON, dann können Sie diese Antwort mithilfe von responseType in Ihrer HTTP-Anforderung angeben.

Hier dreht sich alles um die Funktion von Winkel 5. Jetzt ist es an der Zeit, auf die Version mit Winkel 6 umzusteigen. Nach weiteren sechs Monaten kam Angular 6 mit mehr Leistung auf den Markt.

Winkel 6 - Mai 2018

Im Mai 2018 - kurz nach sechs Monaten - veröffentlichte Angular Team eine weitere Version von Angular - Angular 6. Diese Version enthielt auch viele neue Funktionen. Ich werde einige von ihnen auflisten.

In dieser Version wurde die Winkel-CLI aktualisiert. Neue Befehle wie ng update wurden eingeführt. Sie können es verwenden, um Ihre Winkelprojektabhängigkeiten auf den neuesten Stand zu bringen. Zum Beispiel:

ng update @ angle / core

Die andere Verbesserung, die durchgeführt wurde, war in der RxJS-Bibliothek, die als RxJS6 bezeichnet wurde. Die zwei wichtigen Änderungen waren:

  1. RxJS6 führte eine neue interne Paketstruktur ein.
  2. Verwendung von Operatoren.

Die neue interne Paketstruktur beinhaltet Änderungen beim Importieren von Paketen. Anstelle des zugehörigen Imports können wir hier auch den Einzelimport verwenden. Zum Beispiel :

{Observable} aus 'rxjs / Observable' importieren; {Subject} aus 'rxjs / Subject' importieren; 'rxjs / add / operator / map' importieren;

Nun mit rxjs6:

{Observable, Subject} aus 'rxjs' importieren; {map} aus 'rxjs / operator' importieren;

Die Verwendung des Operators wird auch in Winkel 6 geändert. Zum Beispiel:

Alte Version:

'rxjs / add / operator / map' importieren; this.http.get (url) .map ((response) => response.json)

Neue Version:

{map} aus 'rxjs / operator' importieren; this.http.get (url) .pipe (map ((data) => data * 2)

Ich hoffe, Sie haben die Änderungen erhalten, die in der RxJS-Bibliothek vorgenommen werden.

Eine weitere Änderung ist - angle-cli.json wird durch angle.json ersetzt. Diese Datei definiert die Konfiguration des Projekts wie Stile, Skripte, Tests, Erstellungsprozesse usw. In angular.json werden weitere Konfigurationsoptionen hinzugefügt, da mehrere Projekte konfiguriert werden können.

Die anderen Verbesserungen sind - ist jetzt statt verfügbar. Die Art und Weise, wie Dienste für die Verwendung wie in der vorherigen Version verfügbar gemacht werden, hat sich geändert. Wenn wir Dienste in der gesamten Anwendung oder in einer bestimmten Komponente verfügbar machen möchten, müssen wir sie im Provider-Array, in dieser Version jedoch in der Service-Datei selbst bereitstellen ist 'zur Verfügung gestellt' Metadaten, die dafür verfügbar sind. Dort können Sie die Verfügbarkeit von Diensten festlegen. Standardmäßig wird der Dienst auf Stammebene verfügbar gemacht.

Eine weitere Schönheit, die hinzugefügt wird, ist ein "Winkelelement" -Paket. Mit diesem Paket können Entwickler Ihre Winkelkomponente in einer anderen Umgebung (nicht eckigen Umgebung) wie Vue.js verwenden. Es ist eine weitere interessante Funktion, mit der Sie Ihre Winkelkomponente in einer anderen Umgebung verwenden können

Hier geht es um die Funktionen von Winkel 6, die ich gelernt habe. Nun werde ich die Funktion der letzten Version diskutieren - Angular 7

Winkel 7 - Oktober 2018

Im Oktober 2018 kam eine weitere Version mit mehr Schönheit auf den Markt.

Die Funktionen, die hinzugefügt wurden, waren CLI-Eingabeaufforderungen, virtuelles Scrollen, Ziehen und Ablegen und erneutes Bündeln der Größenreduzierung. In CLI-Eingabeaufforderungen werden Sie von angle-cli nach Optionen gefragt, z. B. wenn Sie eine neue Anwendung mit einem neuen Anwendungsnamen erstellen. CLI fragt Sie, ob Sie eine Routing-Datei hinzufügen möchten oder nicht und so weiter. In angular.json wurde außerdem eine Budget-Eigenschaft hinzugefügt, in der Sie Ihren maximalen und minimalen Budgetgrößenwert angeben können.

Hier geht es um das Merkmal von Winkel 7. Ich weiß, dass ich nicht alle anderen Merkmale von Winkel 7 angegeben habe, weil ich nicht auf diese Merkmale eingegangen bin. Daher ist es nicht angenehm, darüber zu sprechen. Wir wissen auch, dass die Angular 8-Version veröffentlicht wurde, aber aus dem gleichen Grund, weil ich nicht auf die Funktionen von Angular 8 eingegangen bin, habe ich nicht darüber geschrieben.

Hinweis für meine Leser: Ich habe möglicherweise viele Funktionen hinterlassen, aber mein Bestes gegeben, um kurz über die Funktionen verschiedener Versionen zu schreiben (es ist nicht möglich, alle Funktionen aufzulisten, aber ich habe alle Funktionen ausprobiert, die ich auf meiner Reise gelesen habe), aber ich Ich würde mich freuen, wenn meine Leser Kommentare zu den Funktionen abgeben können, die sie auf ihrer Lernreise gefunden haben.

Danke fürs Lesen.