Angular Hello Worldhttps://www.springboot.ch/blog/angular/helloworld?&atomFri, 29 Mar 2024 10:37:45 +0000stack.ch
https://stack.ch/
60f9fd21-edb8-11ee-8c11-005056bb85fbSimtech AG - Blog - Angular Blog - Angular Hello World
https://www.springboot.ch/blog/angular/helloworld
60fa03ef-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Angular Hello World Blog
https://www.springboot.ch/blog/angular/helloworld
60fa0562-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000
https://www.springboot.ch/blog/angular/helloworld
60fa066f-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000AngularJS ist ein JavaScript-Framework welches von Google entwickelt wurde. Es zielt auf die Entwicklung von WebAnwendungen legt großen Wert auf Struktur und Qualität. Es war das erste Framework welches durch den Fokus auf Architektur, Testing und isolierte Komponenten im JavaScript-Bereich auch für grosse Enterprise Anwendungen geeignet war. Durch Methoden wie Dependency Injection und ein ausgereiftes Tooling ermöglicht es effiziente und wartbare Softwareentwicklung auf Basis von JavaScript. .Der Einstieg für Angular ist nicht trivial und bedingt sehr gute Kenntnisse von HTML, CSS und Javascript.Dieser Blog zeigt das Setup eine einfachen Hello World Angular Projektes.
https://www.springboot.ch/blog/angular/helloworld
60fa08bf-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Für die Entwicklung von Angular Anwendungen benötigen wir eine NodeJS Installation .Die exakte Anleitung hierzu findet man direkt unter dem Link https://nodejs.orgAm besten installieren Sie die LTS Version. Verifizeren Sie nach der Installation die NodeJS Version wie folgt über die Command Line Konsole:node --versionDie Anfrage sollte die installierte NodeJS Version anzeigen, z.B:v14.17.1
https://www.springboot.ch/blog/angular/helloworld
60fa0aed-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Das Angular-Team hat ein Command Line Tool (CLI) entwickelt, um das Bootstrap und die Entwicklung Ihrer Angular-Anwendungen zu vereinfachen. Da es den Entwicklungsprozess erheblich erleichtert, empfehlen wir dringend, es für die ersten Angular-Projekte zu verwenden. Die Angular CLI Installation erfolgt mit dem folgenden Command Line Befehl:npm install -g @angular/cliWir verifzieren die Angular CLI Installation mit dem folgenden Befehl:ng --versionDie Ausgabe zeigt detailliert die Angular Packages an:Angular CLI: 12.1.0
Node: 14.17.1
Package Manager: npm 6.14.13
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1201.0 (cli-only)
@angular-devkit/core 12.1.0 (cli-only)
@angular-devkit/schematics 12.1.0 (cli-only)
@schematics/angular 12.1.0 (cli-only)
https://www.springboot.ch/blog/angular/helloworld
60fa0e65-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Angular Anwendungen werden mit einem Text Editor programmiert. Es gibt verschiedene Tools, die für Angular-Entwickler entwickelt wurden, aber nur sehr wenige Tools helfen Entwicklern, Hier sind die Top 8 der Angular-Entwicklungs-IDE, mit der Sie herausragende Webprojekte erstellen können:Angular IDEWebstormVisual Studio CodeBracketsAtomSublime TextALM IDEAptana StudioWir empfehlen den Einsatz von Webstorm oder Visual Studio Code. Für diesen Blog verwenden wir Visual Studio Code.
https://www.springboot.ch/blog/angular/helloworld
60fa12a7-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Erstellen Sie einen Ordner für Ihre Anwendung am gewünschten Ort auf Ihrem System und öffnen Sie ihn in VSCode. Wir verwenden unter Windows den Pfad c:\angularblog.Öffnen Sie ein neues Terminal und wechseln Sie in den zuvor erstellten Pfad. Geben Sie den folgenden Befehl Angular CLI ein, um Ihren App-Ordner zu erstellen:ng new helloworldappWir beantworten alle Fragen mit der Taste (default).Die Angular Applikation wird erstellt und die Packages geladen. Am Schluss sollte die folgenden Dateistruktur enthalten sein:Der Folder enthält zugleich auch die Daten für das Git Repository, mit dem Parameter --skip-git wird solches nicht erstellt.Mehr Infos zum Befehl ng new finden Sie unter dem Link https://angular.io/cli/new.
https://www.springboot.ch/blog/angular/helloworld
60fa1a14-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Um die Anwendung auszuführen, ändern Sie das Verzeichnis in den erstellten Ordner und verwenden Sie den folgenden Befehl:ng serveÖffnen Sie nach der Ausführung Ihren Browser und navigieren Sie zu localhost:4200. Wenn eine andere Anwendung auf dieser Adresse läuft, können Sie den Befehl einfach ausführen:ng serve --portEs wird einen Port generieren, zu dem Sie navigieren können. Normalerweise sieht der Browser etwa so aus:
https://www.springboot.ch/blog/angular/helloworld
60fa2357-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Die laufende Demo dieser im Blog erstellten Anwendung finden Sie unter dem Link helloworldapp.Die Applikation wurde für die Distribution wie folgt gebuildet:ng buildDer Build erstellt die Anwendung im dist Verzeichnis, solches kann auf dem Web Server installiert und ausgeführt werden.
https://www.springboot.ch/blog/angular/helloworld
60fa2aed-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000Die Angular Hello World Application finden Sie unter dem Link helloworldapp.zip. Wenn Sie die Lösung lokal entpacken müssen Sie die node_modules via Command Line wie folgt installieren:npm installDas Script muss im Folder der helloworldapp ausgeführt werden. Danach können Sie die Anwendung wieder starten:ng serve
https://www.springboot.ch/blog/angular/helloworld
60fa32a9-edb8-11ee-8c11-005056bb85fbFri, 29 Mar 2024 10:37:45 +0000War dieser Blog für Sie wertvoll. Wir danken für jede Anregung und FeedbackÜber uns
https://www.springboot.ch/about
Fri, 29 Mar 2024 10:37:45 +000060fa3577-edb8-11ee-8c11-005056bb85fbAktuell
https://www.springboot.ch/
Fri, 29 Mar 2024 10:37:45 +000060fa361f-edb8-11ee-8c11-005056bb85fbAGB
https://www.springboot.ch/agb
Fri, 29 Mar 2024 10:37:45 +000060fa36be-edb8-11ee-8c11-005056bb85fbBildungswege
https://www.springboot.ch/bildungswege
Fri, 29 Mar 2024 10:37:45 +000060fa375d-edb8-11ee-8c11-005056bb85fbBlog
https://www.springboot.ch/blog
Fri, 29 Mar 2024 10:37:45 +000060fa37f6-edb8-11ee-8c11-005056bb85fbRufen Sie mich an
https://www.springboot.ch/callus
Fri, 29 Mar 2024 10:37:45 +000060fa3894-edb8-11ee-8c11-005056bb85fbCharts
https://www.springboot.ch/charts
Fri, 29 Mar 2024 10:37:45 +000060fa3953-edb8-11ee-8c11-005056bb85fbConsulting
https://www.springboot.ch/consulting
Fri, 29 Mar 2024 10:37:45 +000060fa39ff-edb8-11ee-8c11-005056bb85fbKontakt
https://www.springboot.ch/contact
Fri, 29 Mar 2024 10:37:45 +000060fa3abb-edb8-11ee-8c11-005056bb85fbAusbildung/Kurse
https://www.springboot.ch/education
Fri, 29 Mar 2024 10:37:45 +000060fa3e23-edb8-11ee-8c11-005056bb85fbSoftware Engineering
https://www.springboot.ch/engineering
Fri, 29 Mar 2024 10:37:45 +000060fa3f89-edb8-11ee-8c11-005056bb85fbFreelancer
https://www.springboot.ch/freelancer
Fri, 29 Mar 2024 10:37:45 +000060fa40d0-edb8-11ee-8c11-005056bb85fbImpressum
https://www.springboot.ch/impressum
Fri, 29 Mar 2024 10:37:45 +000060fa4246-edb8-11ee-8c11-005056bb85fbKursleiter
https://www.springboot.ch/kursleiter
Fri, 29 Mar 2024 10:37:45 +000060fa43c1-edb8-11ee-8c11-005056bb85fbNetzwerk
https://www.springboot.ch/network
Fri, 29 Mar 2024 10:37:45 +000060fa44eb-edb8-11ee-8c11-005056bb85fbReferenzen
https://www.springboot.ch/references
Fri, 29 Mar 2024 10:37:45 +000060fa4603-edb8-11ee-8c11-005056bb85fbSitemap
https://www.springboot.ch/sitemap
Fri, 29 Mar 2024 10:37:45 +000060fa493e-edb8-11ee-8c11-005056bb85fbTools
https://www.springboot.ch/tools
Fri, 29 Mar 2024 10:37:45 +000060fa4cfe-edb8-11ee-8c11-005056bb85fbVision
https://www.springboot.ch/vision
Fri, 29 Mar 2024 10:37:45 +000060fa4e96-edb8-11ee-8c11-005056bb85fb