Zur Übersicht

Angular Kickstarter: Grundlagen für Angular

Alle technischen Grundlagen, um mit der Angular Entwicklung zu starten

Was ist Angular?

Angular ist ein JS Frontend Applikations-Framework.

Mehr unter: angular.io

Voraussetzungen

Um mit der Angular Entwicklung zu beginnen, wird Folgendes vorausgesetzt:

  1. Node.js
  2. Angular CLI

Was ist Node.JS

Eine Clientseitige JS Runtime, die JavaScript ausführen kann. Diese Scripts haben im Gegensatz zum JavaScript im Browser Zugriff auf die Hardware und unter Anderem auf das File System.

https://nodejs.org/en/

Angular CLI

Ein CLI ist ein Command Line Interface. Mit diesem kann man in einem Terminal Befehle ausführen.

Das Angular CLI ist ein Node.js-Programm und stellt Operationen rund um Angular zur Verfügung, wie das Erstellen eines neuen Projekts (ng new my-awesome-project) oder Generieren von Code, der oft benötigt wird (ng generate component my-component).

https://cli.angular.io/

Installation von Node.js

Auf https://nodejs.org/en/download/ gehen und den gewünschten Installer für das jeweilige Betriebssystem herunterladen und ausführen.

Oder die Installation für Homebrew nutzer:

brew install node

Installation von Angular CLI

Das Angular CLI ist ein Node-Programm und wird deshalb auch über Node direkt installiert.

Dafür gibt es den Node Package Manager, welcher mit Node.js ausgeliefert wird. Dieser steht nach der Installation unter dem Befehl npm zur Verfügung.

Mit diesem Befehl wird das Angular CLI Systemweit installiert:

npm install -g @angular/cli

Danach steht ein neuer Befehl, das Angular CLI, zur Verfügung: ng

Anlegen eines neuen Angular Projekts

Dazu öffnet man ein Terminal und navigiert in den gewünschten Überordner, wo das Projekt erstellt werden soll.

Dann gibt man Folgendes ein:

ng new my-first-angular-project

Dieser Befehl startet den Erstellungsprozess einer neuen Angular Instanz.

Dabei wird man gefragt, welche CSS “Sprache” (Precompiler) man bevorzugt. Hier wähle ich SCSS aus.

Bei der Frage, ob man den Angular Router verwenden möchte, kann man je nach Bedarf Ja oder Nein wählen. Ich würde Ja empfehlen, da man sehr oft einen Router in Projekten benötigt.

Der Router dient zur Navigation zwischen Seiten innerhalb der Applikation.

Starten der Applikation

Nun navigiert man in den Ordner der Angular App und führt dort ng serve aus.

Das startet einen temporären Entwicklungsserver auf der Adresse http://localhost:4200. Dieser hört automatisch auf Änderungen in Dateien und lädt die Applikation automatisch neu.

Und jetzt?

Jetzt könnt ihr loslegen eure Angular Applikation zu entwickeln. Ich empfehle dazu die offizielle Dokumentation von Angular: https://angular.io/start

Feedback