Verständnis der Komponentenarchitektur: Wiederbelebung einer Winkel -App

Dieses Tutorial zeigt, wie eine monolithische Winkelanwendung in eine modularere Komponentenarchitektur neu gestaltet werden kann. Wir werden eine einzelne Komponente in kleinere, wiederverwendbare Komponenten unterteilen und die Wartbarkeit und das Verständnis verbessern.

Schlüsselverbesserungen:

• Verbessertes Wartbarkeit: in kleinere Komponenten refactoring erleichtert Code verständlich, modifizieren und debuggen.
• Wiederverwendbarkeit: Kleinere Komponenten können über verschiedene Teile der Anwendung wiederverwendet werden.
• klarere Struktur: Ein strukturierter Komponentenbaum verbessert die Gesamtorganisation und die Lesbarkeit des Codes.
• intelligente und dumme Komponenten: Der Ansatz verwendet "intelligente" Komponenten (Daten verwalten und logisch) und "dumme" Komponenten (Handhabung der Präsentation) und fördert eine saubere Trennung von Bedenken.
• Effiziente Kommunikation: Komponenten kommunizieren effektiv mit benutzerdefinierten Ereignissen und Eigenschaftsbindungen, wodurch eine enge Kopplung vermieden wird.
• Skalierbarkeit: Verschieben des TodoDataService -Anbieters in AppModule sorgt für die anwendungsweite Verfügbarkeit des Service, unterstützt zukünftiges Wachstum und faules Laden.
• Testbarkeit: Das modulare Design vereinfacht die Einheitstests.

Zusammenfassung von Teil 1:

Teil 1 Deckt das Einrichten der Todo -Anwendung mit der Angular -CLI, erstellt eine Todo -Klasse, einen TodoDataService -Dienst und verwendet AppComponent für die Benutzeroberfläche. Die Architektur der Anwendung war eine einzige, große AppComponent.

refactoring in Teil 2:

Dieser Teil Refactors AppComponent durch Erstellen:

• TodoListHeaderComponent: Handles erstellen neue Todos.
• TodoListComponent: Zeigt die Liste der Todos an.
• TodoListItemComponent: Zeigt ein einzelnes Todoelement an.
• TodoListFooterComponent: Zeigt die Anzahl der verbleibenden Todos an.

Lernziele:

• Architektur der Winkelkomponenten verstehen.
• Verwenden von Eigenschaftsbindungen zum Übergeben von Daten in Komponenten.
• Verwenden von Ereignishörern, um Ereignisse zu verarbeiten, die von Komponenten emittiert werden.
• Vorteile kleinerer, wiederverwendbarer Komponenten.
• Der Unterschied zwischen intelligenten und dummen Komponenten.

Erste Schritte:

1. Installieren Sie die neueste Winkel -Cli: npm install -g @angular/cli@latest (oder verwenden Sie npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest, um eine frühere Version zu entfernen).
2. klonen Sie das Repository: git clone git@github.com:sitepoint-editors/angular-todo-app.git
3. Abhängigkeiten installieren: cd angular-todo-app; npm install
4. Kasse Teil 1: git checkout part-1
5. Führen Sie die App aus: ng serve

Die ursprüngliche AppComponent:

Das Original AppComponent enthielt die gesamte Logik und die Benutzeroberfläche der Anwendung in einer einzelnen Komponente, was nicht ideal für die Wartbarkeit ist.

Erstellen neuer Komponenten:

Die Tutorial beschreibt die Erstellung jeder neuen Komponente unter Verwendung der Angular CLI (ng generate component <component-name></component-name>), wobei relevante HTML und Logik von AppComponent zu den neuen Komponenten verschoben werden. Es betont die Verwendung von @Input() und @Output() Dekoratoren für die Datenbindung und Ereignishandhabung, wodurch die neuen Komponenten "dumm" und wiederverwendbar werden.

Bewegung TodoDataService:

Der Anbieter TodoDataService wird von AppComponent nach AppModule verschoben, um die anwendungsweite Zugänglichkeit zu gewährleisten.

Zusammenfassung:

Dieser Teil refaktiert die Anwendung erfolgreich und zeigt Best Practices in der Architektur der Winkelkomponenten. Der nächste Teil wird eine REST -API integrieren. Der gesamte Code ist auf GitHub verfügbar. Der Artikel enthält auch einen FAQ -Abschnitt, der Schlüsselkonzepte in der Architektur der Winkelkomponenten behandelt.

Das obige ist der detaillierte Inhalt vonVerständnis der Komponentenarchitektur: Wiederbelebung einer Winkel -App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!