Einstieg in Angular 4 und die Angular cli

18. May 2017 - Allgemein, AngularJS, TypeScript

Nun gibt es dann doch endlich mal einen Einstieg in Angular 2, nein in Angular 4. Ich weiß nicht, ob es nur mir so geht, oder ob Angular 2 noch an anderen vorbeigegangen ist. Laut heise ist Angular 2 im September 2016 erschienen. Nutzen konnte man es wahrscheinlich schon viel früher, aber sagen wir mal Angular 2 ist noch recht “neu”. Liegt vielleicht auch daran, dass ich erst mal Angular 1 kennen und auch lieben lernen musste und ich mich deshalb etwas vor Angular 2 gesträubt habe.

Nicht zuletzt deshalb, weil ich auch das drumherum etwas umständlich finde. Webpack, Typescript, 1000 node_modules. Nach gefühlten 2 Stunden git clonen, installen und konfigurieren hat man 250 Files in seinem Project, und die cmd ist immer noch voller Fehler. So kamen mir zumindest die letzten Wochen vor. Ich habe immer wieder versucht Angular 2 from the scratch aufzubauen, aber das ist irgendwie unmöglich. Damals konnte man noch eine JS Lib einbinden, und der Spaß ging los. Jetzt muss man erst mal wissen, dass es Typescript gibt und wie es ungefähr funktioniert.
Ich habe schon mal vor kurzem eine Einführung in Typescript verfasst und noch einen Artikel über Sublime Text 3 und Typescript. Man sollte für Typescript etwas OOP Kenntnisse haben, die ganzen Datentypen auseinander halten können, die sonst immer Javascript so “schön” selbst verwaltet hat.

Ich für meinen Teil habe es aufgegeben Angular 2, und jetzt Angular 4 from scratch aufzubauen. Nach vielen Tutorials habe ich heute die angular cli gefunden bzw ein Tutorial über Angular 4, welches richtig gut ist. Allgemein finde ich die Beiträge auf coursetro.com genial. Die Beiträge dort haben mir den Morgen auf jeden Fall etwas vereinfacht. Ich orientiere mich also etwas an der Beitragsreihe von coursetro. Ich werde aber meine selbst gemachten Erfahrungen ergänzen, wie jetzt auch schon bei der Installation der angular-cli.

Zum Installieren der Angular cli braucht man eine aktuelle(re) Version von node.js. Ich hatte Version 4.x und habe mir nun Version 7 runtergeladen. Fragt mich nicht, wie man node über die cmd aktualisiert. Ich habe über die node.js Seite eine neue Windows .exe runtergeladen und drüber installiert. Der Github Account der angular-cli ist super. Hier ist alles top erklärt.

Installieren könnt ihr die angular cli dann global mit dem folgenden Befehl:

npm install -g @angular/cli

Wenn ihr die Hilfsfunktion aufrufen könnt funktioniert eure cli.

ng help

Ab dem Zeitpunkt könnt ihr auch schon über ng Projekte anlegen und verwalten. Geht einfach in den Ordner, in den ihr euer Projekt installieren wollt und schreibt

ng new PROJECT-NAME

wechselt dann in euer neues Projekt

cd PROJECT-NAME

und macht ein build eurer application, bzw startet den Web Server

ng serve

Es ist hier leider nicht so, dass sich direkt ein neuer Tab öffnet mit dem entsprechenden Localhost. Ihr müsst also selbst http://localhost:4200/ aufrufen und seht dort dann eure Ausgabe. Die Ausgabe im Browser sollte so aussehen:

Update: mit einem –open am Ende öffnet sich direkt ein neuer Tab. Ihr könnt also einfach folgenden Befehl nutzen:

ng serve --open

 

app works!

Wie man in der Github Anleitung der angular cli sehen kann, könnt ihr den Port auch ändern. Das geht über den folgenden Befehl

ng serve --host 0.0.0.0 --port 4201

Ihr könnt jetzt aber auf jeden Fall euer Projekt einmal im Editor eures Vertrauens öffnen und selbst nachschauen, welche Dateien es so alles gibt.

Für den Anfang spannend sind glaube ich die Dateien innerhalb des Ordners src -> app und natürlich die index.html sowie die main.ts.

In der main.ts ist festgesetzt, dass das AppModule, welches in der app.component.ts erzeugt wird, als Bootstrapmodul geladen wird. Klang für mich am Anfang etwas befremdlich und auch jetzt muss ich immer noch erst einmal durch die Dateien zappen, bis ich wieder genau weiß, was wo und wann passiert.

Wir können aber glaube ich festhalten, dass die app.component.ts eine für uns erstmal recht wichtige Datei ist, welche wir etwas genauer untersuchen sollten.

In der Datei stellt man fest, dass oben erst einmal etwas importiert wird. Wer Sprachen wie Java kennt wird so etwas nicht unbedingt als befremdlich empfinden. Java ist nur glücklicherweise so cool und weißt einen darauf hin, dass man etwas importieren muss. Bei AngularJS habe ich das Gefühl, dass man stets wissen muss, dass man jetzt etwas neues einbinden bzw importieren muss.

Also wie auch immer. Zuerst müssen wie @angular/core importieren bzw es ist schon importiert.

import { Component } from '@angular/core';

Danach wird die erste Componente erzeugt. AngularJS ist sehr modular aufgebaut, was dazu führt, dass man einzelne Module und Componenten in andere Projekte recht einfach einbauen kann. Ist auch etwas übersichtlicher, wenn man später etwas im Code sucht. Auch wenn hier jede Componente 4 Dateien hat mit template und css datei.

Kurz zum Veranschaulichen, die app.component.ts sieht so aus bei mir und sollte auch bei euch so aussehen, wenn ihr euer Projekt über die angular-cli erstellt habt:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';
}

Hier sind wir auch schon direkt bei den Bestandteilen einer Component. Es gibt erst einmal einen selector, über den der ganze Spaß am Ende eingebunden werden kann. Durch das selector: ‘app-root’ können wir nun das HTML Tag <app-root> verwenden, wie es beispielsweise auch schon in der index.html gemacht wird.

Was am Ende in diesem HTML Tag angezeigt bzw ausgegeben wird, also wie unser eigentlicher HTML Code aussieht, dass bestimmen wir im template. Im Basisprojekt ist das template direkt in einer eigenen app.component.html ausgelagert, was optimal ist. Hier sieht man dann, dass dort die Variable title ausgegeben wird, in den aus Angular 1 bekannten {{}}. Die Variable title wird in der zu exportierenden class (Klasse) AppComponent in der app.component.ts angelegt und mit einem Wert (hier: ‘app works!’) ausgestattet.
Was styleUrls macht könnt ihr euch wahrscheinlich denken. Es lagert die CSS Definitionen der Component einfach ebenfalls in eine seperate Datei aus.

Das soll es auch erst einmal gewesen sein für den Anfang. Ich zeige euch im nächsten Artikel, wie ihr neue Componenten anlegen könnt, wie ihr jQuery und Bootstrap anlegt und wie wir langsam anfangen ein kleines Projekt aufzubauen, mit den üblichen HTML Bauteilen, die doch etwas anders sind in Angular 2 Angular 4.

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

One response to “Einstieg in Angular 4 und die Angular cli”

  1. […] Im letzten Beitrag habe ich ja schon durchblicken lassen, dass die Angular Cli sehr hilfreich ist. Wer die Angular Cli noch nicht installiert hat sollte dies wirklich tun, da sie vieles einfacher macht. Gerade beim Componenten anlegen, was ich im nächsten Artikel zeigen möchte, muss man nicht nur vier (gefühlt 100) Dateien anlegen, sondern diese auch überall einbinden, importieren usw. […]

Leave a Reply