Erstellen und Ausführen eines Angular-Projekts

Was ist Angular?

Angular ist ein von Google gepflegtes Open-Source-Frontend-Framework zur Erstellung dynamischer Single-Page-Anwendungen (SPA). Es basiert auf TypeScript und bietet eine Vielzahl von Werkzeugen und Funktionalitäten, die Entwicklern ermöglichen, effizient komplexe Anwendungen zu erstellen. Das Kernkonzept von Angular basiert auf Komponenten und Modularität, was den Code übersichtlicher und wartbarer macht.

Hauptmerkmale und Vorteile von Angular

• Komponentenbasiert: Benutzeroberflächen werden mittels Komponenten aufgebaut, was den Code modularer und wiederverwendbarer macht.
• Zwei-Wege-Datenbindung: Synchronisiert automatisch Datenmodelle und Ansichten, wodurch die Datenverwaltung vereinfacht wird.
• Abhängigkeitsinjektion: Erhöht die Testbarkeit und Wartbarkeit des Codes durch Mechanismen zur Abhängigkeitsinjektion.
• Leistungsstarkes CLI-Tool: Angular bietet ein robustes Befehlszeilenwerkzeug (Angular CLI), das die Erstellung, Entwicklung und den Aufbau von Projekten vereinfacht.
• Integrierte Routing- und Formularverarbeitung: Bietet leistungsstarke Routing- und Formularverarbeitungsfunktionen, die das Erstellen von Single-Page-Anwendungen erleichtern.

Mit Angular können Entwickler moderne, reaktionsschnelle Webanwendungen effizienter erstellen.

Erstellen und Ausführen eines Angular-Projekts mit ServBay

In diesem Artikel werden wir die von ServBay bereitgestellte Node.js-Umgebung nutzen, um ein Angular-Projekt zu erstellen und auszuführen. Wir werden die 'Hosting'-Funktion von ServBay nutzen, um den Webserver einzurichten und über Reverse Proxy und statischen Dateiservice auf das Projekt zuzugreifen.

Erstellen eines Angular-Projekts

1. Projekt initialisieren

   Stellen Sie sicher, dass Sie die von ServBay bereitgestellte Node.js-Umgebung installiert haben. Installieren Sie dann das Angular CLI global mit folgendem Befehl:

   npm install -g @angular/cli

   Erstellen Sie ein neues Angular-Projekt im vorgeschlagenen Website-Stammverzeichnis von ServBay /Applications/ServBay/www:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Geben Sie den Projektnamen ein (empfohlen servbay-angular-app) und wählen Sie die gewünschten Optionen:

   ? Möchten Sie Angular-Routing hinzufügen? Ja
   ? Welches Stylesheet-Format möchten Sie verwenden? CSS

2. Abhängigkeiten installieren

   Wechseln Sie in das Projektverzeichnis und installieren Sie die Abhängigkeiten:

   cd servbay-angular-app
   npm install

Ändern des Ausgabeinhalts des Angular-Projekts

1. Ändern der Datei src/app/app.component.html

   Öffnen Sie die Datei src/app/app.component.html und ändern Sie den Inhalt, damit die Webseite "Hello ServBay!" anzeigt:

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

In den Entwicklungsmodus wechseln

1. Entwicklungsserver ausführen

   Starten Sie den Entwicklungsserver und geben Sie den Port (z.B. 8585) an:

   ng serve --port 8585

   Dies startet einen lokalen Entwicklungsserver und öffnet den Port 8585.

2. ServBay-Host-Reverse-Proxy konfigurieren

   Nutzen Sie die 'Hosting'-Funktion von ServBay Zugang zum Entwicklungsserver über Reverse Proxy zu erhalten. Fügen Sie in den 'Hosting'-Einstellungen von ServBay einen neuen Reverse Proxy hinzu:

   • Name: Meine erste Angular-Entwicklungsseite
   • Domain: servbay-angular-test.dev
   • Host-Typ: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Detaillierte Anweisungen finden Sie unter eine Nodejs-Entwicklungsseite hinzufügen.

3. Entwicklungsmodus aufrufen

   Öffnen Sie den Browser und besuchen Sie https://servbay-angular-test.dev, um das Projekt in Echtzeit zu sehen. Dank der Unterstützung von ServBay für benutzerdefinierte Domains und kostenlose SSL-Zertifikate, können Sie erhöhte Sicherheit genießen.

Produktionsversion erstellen

1. Produktionsversion erstellen

   Nach Abschluss der Entwicklung erstellen Sie die Produktionsversion mit folgendem Befehl:

   ng build --prod

   Nachdem der Build abgeschlossen ist, befinden sich die generierten statischen Dateien im Verzeichnis dist/servbay-angular-app.

2. Statischen Dateiservice einrichten

   Nutzen Sie die 'Hosting'-Funktion von ServBay zur Bereitstellung der Produktionsversion über den statischen Dateiservice. Fügen Sie in den 'Hosting'-Einstellungen von ServBay eine neue statische Website hinzu:

   • Name: Meine erste Angular-Produktionsseite
   • Domain: servbay-angular-test.prod
   • Host-Typ: Statisch
   • Website-Stammverzeichnis: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Produktionsmodus aufrufen

   Öffnen Sie den Browser und besuchen Sie https://servbay-angular-test.prod, um die erstellte Produktionsversion anzusehen. Mit benutzerdefinierten Domains und kostenlosen SSL-Zertifikaten von ServBay wird Ihre Website sicherer und vertrauenswürdiger.

Durch die oben genannten Schritte haben Sie erfolgreich ein Angular-Projekt erstellt und ausgeführt und dabei die von ServBay bereitgestellten Funktionen zur Verwaltung und zum Zugriff auf Ihr Projekt genutzt.