Da ich mich in letzter Zeit mehr mit Angular 2 beschäftigt habe, kommt heute, wie zu Angular 1 auch, ein kleines Nachschlagewerk für mein Zukunfts-Ich.
Was ist Angular 2?
Genau wie Angular 1 ist die zweite Version immer noch ein Javascript Framework, hauptsächlich für Single Page Applications.
Es hat viele Vorteile ( und einige wenige Nachteile ) gegenüber der Vorgängerversion. Einer davon ist das Kommandozeilentool. So ist der beste Weg zur Erstellung einer neuen Angular App der über das neue Tool:
npm install -g angular-cli ng new PROJECT_NAME cd PROJECT_NAME ng serve
Die Seite ist dann auf localhost:4200.
Typescript
Die bevorzugte Sprache von Angular 2 ist Typescript. Typescript ist ein Superset von Javascript und wird letztendlich auch wieder in Javascript übersetzt, bietet beim Entwickeln jedoch einige Vorteile. Dazu zählen zum Beispiel eine strikte Typisierung und Objektorientierung. Sogar Angular 2 selbst wurde in Typescript programmiert.
Mit ng serve wird auch Typescript automatisch kompiliert.
Angular 2 Vokabeln
Angular 2 unterscheidet sich deutlich von Angular 1. Eigentlich ist die Struktur nun einfacher zu verstehen als in Angular 1. Doch die schlauen Leute bei Angular haben ein Talent dafür alles kompliziert zu benennen.
ngModules
Mit Modulen lassen sich Angular Apps aufteilen. Ein Modul kann viele Komponenten haben. Bei kleinen Applikationen hat man oft nur ein Modul. Ein Modul erkennt man am Decorator @ngModule.
Decorators
Das sind die Codeblöcke direkt über einer Klasse, welche mit einem @-Symbol beginnen. Sie fügt unserer langweiligen Typescript Klasse von außen mehr Funktionalität hinzu. Es gibt @Component, @Directive, @Pipe, @ngModule und @Injectable.
Als Beispiel hier einmal eine einfache Component.
<body>
<app-root>Hier rendert die Component...{{title}}</app-root>
</body>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
Directives
Die Directives machen das HTML dynamisch. Dabei gibt es drei Arten. Components, Structural Directives und Attribute Directives.
Structural Directives
Diese ändern das Layout des HTML. Beispiele sind die built-in structural directives *ngFor und *ngIf.
<li *ngFor="let item of items">
Components
Die wichtigsten Bausteine für mich als neuer ng2 Entwickler.
Eine Webseitenoberfläche baut sich in Angular 2 aus Komponenten zusammen. Die Seite selbst ist eine Komponente, eine Liste ist eine Komponente, ein Footer kann eine Komponente sein. Und Komponenten können Komponenten beinhalten. Jede einzelne Box der Seite sollte eine Komponente sein.
Eine Komponente besteht aus einer Klasse und einem Decorator, der das Template angibt. Ein Component ist also ein Directive mit einem Template. Siehe Codebeispiel bei Decorators.
Jede Komponente kann eine eigene Klassen-, HTML- und CSS-Datei haben.
Anderes
Das ist mein gelerntes Wissen über Angular 2 und ich behaupte nicht, dass irgendwas davon richtig oder komplett ist. Ich hoffe es aber 😀
Es gibt noch viele weitere Konzepte, doch ich habe endlich die Grundstruktur von Angular 2 verstanden und kann anfangen damit zu arbeiten. Ich arbeite auf einem einzelnen ngModule und teile verschiedene Funktionalitäten in Komponenten auf. Diese haben alle ein eigenes CSS und HTML. Das ist erst Mal alles.
Andere wichtige Konzepte sind Services, Dependency Injection und Routing. Daran arbeite ich momentan noch und diese Konzepte brauche ich noch nicht.
Mehr Infos gibts natürlich auf der offiziellen Seite. Die haben sogar noch ein Cheatsheet, wo man sich nochmal schnell Dinge ins Gedächtnis rufen kann: https://angular.io/cheatsheet
Hoffentlich ist dieser Eintrag nicht zu wirr. Angular 2 ist relativ kompliziert und viel auf einmal. Vor Allem wenn man neu in Typescript und ES6 ist. Trotzdem hab ich momentan extrem Bock auf Angular 2 mit dem Ziel geile, hybride Apps zu entwickeln. Mal sehen obs was wird 🙂
*macht Creme Brulée*