Einrichtung

Für die Entwicklung von Angular benötigen wir node.js und npm.
Wenn dies in den entsprechenden Versionen vorhanden ist installieren wir uns angular.

npm install -g @angular/cli 

Das erste Projekt

Nun starten wir unser Projekt, auch dies geht einfach über die Konsole.

-- projekt anlegen
ng new my-test 
-- projekt starten
cd my-test/ 
ng serve --open 

Anlegen von Komonenten

Einzelne Komponenten können auch über die Konsole erstellt werden, das ist auch sehr sinnvoll, da wir uns so die händischen „includes“ sparen.

-- neue componente anlegen 
-- ng generate component name 
ng g c login

Routing

Wahrscheinlich benötigt die Anwendung auch ein Routing, hiefür bietet sich des RouterModule an.
Auch das ist schnell erledigt.

In der app.module einen Array mit Routen definieren, die Componenten müssen natürlich vorher definiert werden.

var routes = [
    {
        path: "",
        component: HomeComponent,
    },
    {
        path: "login",
        component: LoginComponent,
    },
    {
        path: "home",
        component: HomeComponent
    },
    {
        path: "admin",
        component: AdminComponent
    },
    {
        path: '**',
        component: PageNotFoundComponent
    },
]

Im Bereich Imports müssen diese nun gesetzt werden

@NgModule ...
    imports: [
        ...
        RouterModule.forRoot(routes)
    ];

In der html Datei der App Componente muss nun noch die Ausgabe des Routings erfolgen.
Dafür genügt es an der Stelle wo der Content ausgegeben werden soll, die Directive router-outlet einzubinden.

geladen werden.

2 Wege Data Binding in Forms

Um das 2-Wege-Data-Binding in Formularen zu nutzen benötigen wir noch das FormsModule.
Auch dies setzen wir in der app.module.

@NgModule ...
    imports: [
        ...
        FormsModule
    ];

Die Verwendung im input tag des Forms sieht dann wie folgt aus:

Angular ohne NodeJS auf dem Produktivsystem einsetzen

Während sich für die Entwicklung der Angular App der Einsatz von

ng serve --open

durchaus lohnt, kann man die Anwendung für das Produktivsystem gebaut werden.

ng build

Rest mittels HttpClient

Es ist relativ einfach in einer Componente einen Rest Call abzusetzen.

  constructor(protected http: HttpClient) {
  }

  ngOnInit() {
      this.http.get('meineUrl').subscribe(data => {
          console.log(data);
      });
  }

Voraussetzung das dies funktioniert ist der Import des Modules „HttpClientModule“.
Dazu einfach in der app.module folgende Einträge setzen:

import {HttpClientModule} from '@angular/common/http';
....
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ....
    HttpClientModule,
    ....
  ],
})