Angular strukturiert 1/2 – workspace

Umfangreiche Angular Projekte bestehen in aller Regel aus sehr vielen Komponenten und Service-Klassen die in eine sinnvolle Struktur gebracht werden müssen. Darüber hinaus macht es auch aus Performance Gründen Sinn die eigene Anwendung zu unterteilen. Im ersten Teil werfen wir einen Blick auf die Organisation mittels Workspace.

In allen unseren Projekten werden wir den ein oder anderen Service Implementieren oder Komponenten ausprägen die nicht nur für das vorliegende Projekt interessant sind, sondern auch für anderen unternehmenseigene Projekte. Eine solche eigene Basis-Bibliothek lässt sich natürlich als eigenständiges NPM-Packet entwickeln und über ein internes Node-Repository ausliefern. Insbesondere zur frühen Entwicklungszeit, wenn sich noch viel in den Bibliotheken tut verkompliziert dieses Vorgehen aber die Bereitstellung und Verwendung. Eine Alternative (die sich aber später ebenfalls problemlos als NPM-Paket veröffentlichen lässt) ist seit der Version 6 in Angular-CLI vorhanden: „Libraries“ .

Die Grundidee ist einfach: ein einzelnes Angular-Projekt  (workspace)  dient als Basis für die Entwicklung unserer Anwendungen und Bibliotheken. Für jede Bibliothek ( library) oder Anwendung( application ) werden über entsprechende CLI-Befehle eigenständige Bestandteile generiert. Hier das grundsätzliche Vorgehen mittels Angular-CLI Befehle:

1.  ng new [workspacename]

Optional kann hier die Option: –create-application=false gewählt werden um die Demo-Anwendung nicht initialisieren zu lassen

2. ng generate library [name-1] –prefix=[prefix]

Eine erste Bibliothek, die wir später in unseren Projekten verwenden können. Hier entwickeln wir die gemeinsamen Komponenten und Services.

3. ng build [name-1]

Bibliothek bauen, optional kann hier auch das Flag –watch aktiviert werden um bei Änderungen den Build-Prozess zu triggern

4. ng generate application [name-2]

Eine Anwendung generieren. Hier arbeiten wir wie gewohnt, können aber auf die Services/Komponenten unserer Library zugreifen (nicht vergessen das Utils-Module zu importieren)

5. ng serve [name-2]

Entwicklungs-Server starten für definierte Anwendung…

Sowohl die Bibliotheken, als auch die einzelnen Anwendungen können später ganz autonom verteilt oder deployt werden. Im zweiten Teil werfen wir einen Blick auf die strukturierung mittels NgModule.

Bis dahin:

https://github.com/GEDOPLAN/anuglar-modulesD

Über Dominik Mathmann
Dominik Mathmann arbeitet als Berater, Entwickler und Trainer bei der GEDOPLAN GmbH. Auf Basis seiner langjährigen Erfahrung in der Implementierung von Java-EE-Anwendungen leitet er Seminare, hält Vorträge und unterstützt Kunden bei der Konzeption und Realisierung von Webanwendungen vom Backend bis zum Frontend. Sein derzeitiger Schwerpunkt liegt dabei auf der Entwicklung von JSF-Anwendungen. Er sieht die stärker werdende Position von JavaScript-Frameworks jedoch positiv und beschäftigt sich darüber hinaus mit Webframeworks wie Angular.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

%d Bloggern gefällt das: