Zum Inhalt

M294 Block 02

Inhalt

Angular aufbauen

Aufbau der Seite mit den Dateien

Komponenten importieren

Angular aufbauen

  • Schritt 1: Installation Node und NPM
  • Node komprimiert Code bevor er zum Browser gesendet wird
  • NPM installiert und managed Pakete, die Angular benötigt¨
  • Schritt 2: Installation Angular
  • npm install -g @angular/cli@latest
  • Schritt 3: Angular Projekt erstellen
  • ng new my-first-app --no-strict
  • Wählen Sie CSS aus und bei Server-Side Rendering können Sie Nein (N) sagen.
  • Wer git noch nicht installiert hat, bitte ebenfalls noch installieren.
  • Schritt 4: Entwicklungsserver starten
  • mit cd in den neuen Projektordner navigieren (cd my-first-app)
  • ng serve
  • Wer findet die Datei, wo der HTML Text der Startseite drinnensteht?
  • Schritt 5: Installation Boostrap und Verbindung mit App
  • npm install --save bootstrap@latest
  • Einbindung in angular.json

Wenn Sie Bootstrap in der angular.json Datei unter styles und scripts einfügen, sorgt Angular dafür, dass diese Dateien in das Haupt-HTML-Dokument (index.html) eingebunden werden. Dadurch stehen die Styles und Skripte global zur Verfügung und müssen nicht bei jeder Komponente neu eingefügt werden.

Aufbau der Seite mit den Dateien:

Hier ist eine kurze Übersicht:

  1. angular.json:

  2. Konfigurationsdatei für das gesamte Angular-Projekt. Hier werden globale Einstellungen wie Styles und Skripte definiert.

  3. package.json:

  4. Enthält Informationen über das Projekt und die Abhängigkeiten. Hier werden auch Skripte für den Build-Prozess definiert.

  5. src/ Verzeichnis:

  6. app/: Enthält die Hauptanwendungskomponenten und Module.

    • app.component.ts: Hauptkomponente der Anwendung.
    • app.module.ts: Hauptmodul der Anwendung, das alle Komponenten und Abhängigkeiten importiert.
  7. assets/: Verzeichnis für statische Dateien wie Bilder und Icons.
  8. environments/: Verzeichnis für Umgebungsdateien, z.B. environment.ts für Entwicklungsumgebungen und environment.prod.ts für Produktionsumgebungen.
  9. main.ts: Einstiegspunkt der Anwendung, der das Hauptmodul bootstrapped.
  10. index.html: Haupt-HTML-Datei der Anwendung.

  11. styles.css: Globale CSS-Datei für die Anwendung.

  12. e2e/ Verzeichnis:

  13. Enthält End-to-End-Tests für die Anwendung.

  14. node_modules/ Verzeichnis:

  15. Enthält alle installierten npm-Pakete und Abhängigkeiten.

Diese Struktur hilft dabei, den Code organisiert und modular zu halten, was die Wartung und Skalierbarkeit der Anwendung erleichtert.

Angular ist die nächste Version des Open-Source-Frameworks AngularJS. Die Code-Basis wurde komplett neu geschrieben und nutzt nun als Basis die Sprache TypeScript.  Der Fokus des Projektes hat sich von der Entwicklung eines Frameworks auf die Entwicklung einer ganzen Plattform für Webanwendungen erweitert. Aktuell arbeiten über 30 MitarbeiterInnen fest an dem Projekt und werden von hunderten Entwicklern aus der OpenSource-Community unterstützt.

  • Angular ist in Komponenten untereilt
  • Alles was Sie auf einer Angular App sehen ist Teil einer Komponente
  • Die Root-Komponente hält alle anderen Komponenten zusammen und heisst app-root. Die index.html greift auf die app-root zu.
  • Jede Komponente hat ein .html (Template) und ein .ts (Typescript) File. Meist auch ein .css (Style) File.
  • Bei Erstellung einer neuen Komponente muss diese im app.module.ts angemeldet werden.

Komponenten importieren

Neuen Komponenten erstellen

ng generate component {Name}