Jeden Tag haben wir Ratschläge, Tricks oder nur ein nützliches Stück aus unserer Erfahrung mit Angular veröffentlicht. Diese Bewegung wurde von der Entwicklergemeinde sehr positiv aufgenommen und unterstützt.
Ich beschloss, einen Artikel über die zehn beliebtesten Tricks zu schreiben und die darin gezeigten Konzepte genauer zu erklären.
Lasst uns beginnen!
Tokenize globale Objekte!
Der beliebteste Tweet handelt von DI-Token globaler Objekte.
Im Frontend sind wir daran gewöhnt, dass es in der globalen Umgebung viele Objekte gibt. Wir verwenden Objekte wie Fenster, Dokument, Abrufmethode, Speicherort und erwarten nie, dass sie existieren.
In Angular Universal oder der Testumgebung in Jest gibt es beispielsweise keinen Browser, kein Fensterobjekt und kein DOM. Wenn Sie diese Entitäten über Token durch die Anwendung leiten, werden Sie nie Probleme haben, sie zu verwenden, zu ersetzen oder Ihren Code zu testen.
Vererbung von Observable oder Subject
Ich kenne viele Entwickler, die in ihren Anwendungen gute Dienste erstellen. Diese Dienste machen eine Sache gut. Und da wir RxJS im Angular-Ökosystem verwenden, können solche Dienste nur ein Feld mit einem Observable oder Subject enthalten, um Daten zu transformieren.
Solche Situationen können vereinfacht werden, indem Dienste von Observable oder Subject geerbt werden:
Steuerwert als ReplaySubject
Es kann Situationen geben, in denen es erforderlich ist, die valueChanges der reaktiven Steuerung zu abonnieren und den Stream von seinem aktuellen Wert aus zu starten. Jetzt müssen Sie das Rad nicht neu erfinden, sondern fügen sich einfach diese Hülle hinzu:
Verbesserung der App für hochauflösende Displays
Wussten Sie, dass Sie Benutzer mit hochauflösenden Bildschirmen problemlos verfolgen können?
Darüber hinaus können Sie mithilfe des nativen Medien-Tags und ohne zusätzlichen Aufwand sogar Medienelemente mit geeigneter Auflösung für solche Monitore bereitstellen:
Vergiss die Rohre nicht
Rohre sind ein großartiges Werkzeug, um im Stil des Angular-Gerüsts zu arbeiten. Sie ermöglichen es uns, innerhalb unserer Komponentenvorlagen deklarativ zu bleiben. Es ist traurig, dass einige Angular-Entwickler es vermeiden, eigene Pipes zu erstellen: Mit ihnen können Sie Daten in fast jeder Situation sauber transformieren.
Und hier ist ein Beispiel für eine universelle Pipe zur Datenkonvertierung:
Machen Sie Ihre Bananenschachtel
Diese Angular-Funktion hat viele Namen: Banana-in-a-Box, Zwei-Wege-Bindung oder nur Eingabe-Ausgabe. Dieser Ansatz findet sich normalerweise in Formularen, wenn mit [(ngModel)] gearbeitet wird. Aber wissen Sie, wie Sie dies für Ihre eigenen Komponenten implementieren können?
RxJS - die unbekannte Welt
Ich versuche immer, alle Parameter und Überladungen für die von mir verwendeten RxJS-Operatoren zu überprüfen. Grund: Viele von ihnen haben versteckte Optionen, mit denen Sie lernen können, wie Sie einige Streams schneller und einfacher schreiben können.
Darüber hinaus gibt es auch unbeliebte Operatoren. Sie kommen selten vor, können aber einige spezifische Probleme in einer Codezeile lösen, anstatt in einem riesigen und kniffligen Stream.
Eine dieser Entdeckungen war für mich beispielsweise die Vergleichsfunktion im Operator uniqueUntilChanged:
Und es gab auch einen so beliebten Tweet über RxJS. Ein kleiner Trick, um die Erweiterung Ihrer Komponenten zu vereinfachen:
Oder der Operator defaultIfEmpty, mit dem Sie nützliche Logik innerhalb einer Codezeile in den Stream einfügen können:
Sie können sogar Ihre eigene Alternative zu ngFor schreiben
Und noch eine letzte Sache: Angular hat eine spezielle Syntax für Direktivenselektoren wie ... von ... Sie können damit Ihre eigene ngFor für jede Ihrer Aufgaben erstellen.
Sie können beispielsweise schnell ngFor ausführen, um das Map-Objekt zu durchlaufen. Oder eine einfache Methode zum Durchlaufen eines Index von einer Zahl zur anderen:
Fazit
Angular ist groß und hat viel mehr Funktionen. Ich habe eine Reihe von Ideen für neue Tricks und Tricks aus unseren Best Practices, die ich mit der Community teilen möchte. Wenn Sie an neuen Tweets wie diesen interessiert sind, folgen Sie mir auf Twitter . Und noch einen schönen Tag!