Home / Uncategorized / Anwendungsstruktur und Best Practices in Angular

Wir haben viele Webanwendungen mit kontinuierlichen Releases und Funktionsverbesserungen. Mit einer solchen Feature-Geschwindigkeit würde es für das Team zu einer Herausforderung werden, die Dinge auf die beste Weise zu erreichen. Angular, von Google als Rewrite von AngularJS entwickelt, ist das leistungsstärkste Framework zum Erstellen dynamischer Programmierstrukturen. Die Hauptbausteine von Angular sind Module, Komponenten, Metadaten, Vorlagen, Datenbindung, Services, Direktiven und Abhängigkeitsinjektion.

Angular CLI

Die Angular CLI ist ein Befehlszeilenschnittstellentool, das zum Initialisieren, Entwickeln, Einrichten, Warten und sogar Testen sowie Debuggen von Angular-Anwendungen verwendet wird.

● ng new – Um eine Anwendung zu erstellen, die bereits funktioniert
● ng generate – Um Komponenten, Routen, Services und Pipes mit einem einfachen Befehl mit Testshells zu generieren.
● ng serve – Um Ihre App während der Entwicklung lokal zu testen.
● ng test –  Um Ihre Komponententests oder End-to-End-Tests auszuführen
● ng lint – Um Ihren Code zum Leuchten zu etablieren
● ng add @angular/pwa –  So richten Sie den Angular-Service-Worker ein

Modulstruktur

Die modulare Struktur von Angular ordnet den Code in verschiedene Module an, so dass alle Dienste und Komponenten bei der Erstellung in separate Gruppen unterteilt werden.
In der Angular-Codierung können Sie Funktionen in wiederverwendbare Codeteile aufteilen.

Dateien und Ordner

Namenskonventionen sind für die Wartbarkeit und Lesbarkeit enorm wichtig und helfen dabei, den Inhalt auf einen Blick konsistent zu finden.

➔ File naming

Der offizielle Angular-Styleguide ist ziemlich einfach und bietet die beste Möglichkeit, die Dateien zu benennen, die die Bausteine von Angular enthalten.

● Komponenten sollten Suffix component.ts enthalten;
● Pipes sollten den Suffix . pipe.ts enthalten
● Guards sollten den Suffix . guard.ts enthalten;
● Interceptor sollten den Suffix . interceptor.ts enthalten;
● Module sollten den Suffix . module.ts enthalten;
  
Routing-Module sollten mit dem Suffix -routing.module.ts versehen werden; Andere Dateien sollten entsprechend ihrer Funktion benannt werden, z. B. sollte eine Datei, die Dienstprogrammfilterfunktionen enthält, in einer Datei mit dem Namen filtering.ts gespeichert werden.
 In einem UTILS-Ordner auf SRC-Ebene 

➔ Dateibenennung

Der offizielle Angular-Styleguide ist ziemlich einfach und bietet die beste Möglichkeit, die Dateien zu benennen, die die Bausteine von Angular enthalten.

Angular Coding-Praktiken

Codierungsstandards sind die Methoden zur Programmierung der Software. In Angular-Anwendungen können bestimmte Codierungsstile für die beste Benutzererfahrung befolgt werden.
Hier sind einige Regeln, die wir befolgen müssen, damit unser Projekt dem Standard-Angular-Styleguide entspricht:

● Pro Datei darf der Code das Limit von 400 Zeilen nicht überschreiten
● Pro Funktion darf der Code 75 Zeilen nicht überschreiten
● Verwenden Sie ein benutzerdefiniertes Präfix, um Elementnamenskonflikte mit Komponenten in anderen Apps und mit nativen HTML-Elementen zu verhindern.
● Wenn die Werte der Variablen intakt sind, deklarieren Sie dies mit const
● Namen von Eigenschaften und Methoden sollten in Kleinbuchstaben des Kamels stehen
● Lassen Sie immer eine leere Zeile zwischen Importen und Modulen wie Drittanbieter- und Anwendungsimporten und Drittanbietermodulen und benutzerdefinierten Modulen
● Wir sollten unsere Schnittstellen nicht mit dem Anfangsbuchstaben I benennen, wie wir es in einigen Programmiersprachen tun. 

Wenn Sie Ihren eigenen Webshop aufbauen möchten oder Fragen zu E-Commerce-Entwicklungsplattformen oder Apps haben, lesen Sie unsere Blogbeiträge für Shopify und Shopware. Unser engagiertes Outsourcing-Team kann Ihr Mitarbeiter im E-Commerce sein. Üben Sie Inhalte aus.

Arrange a free consultation now!