Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10

In dem ersten Teil unserer Tutorien schreiben wir über die Entwicklung einer einfachen Anwendung mit Hilfe von Angular 4 und ASP .NET Core in Windows 10.

Einführung

Um unsere plattformübergreifende Anwendung zu entwickeln, werden wir folgende Technologien nutzen:

• .NET Coreist eine Plattform, die von Microsoft entwickelt wurde und gepflegt wird und die einen C# -Code kompilieren und debuggen kann sowie auf Windows, Linux oder Mac läuft. Wir werden sie verwenden, um eine Anwendung mit Hilfe von .NET Core + Angular 4 zu entwickeln.
• Angular 4ist eines der beliebtesten Frontend-Frameworks, entwickelt und gepflegt von Google. Wir werden es nutzen, um eine dynamische und attraktive Web-Oberfläche zu erstellen. Diese neue Version des Frameworks (wie auch die vorherige Angular 2) basiert auf dem von Microsoft entwickelten und gepflegten TypeScript.
• TypeScriptist eine strikt syntaktische Obermenge von JavaScript, mit deren Hilfe Teams ihren Software-Code schneller schreiben können, indem sie die besten Praktiken umsetzen und einen einheitlichen Codierungsstil befolgen. Ein solcher Code ist leichter zu unterstützen.
• Webpack 2ist ein Modulbündler, der einen JavaScript-Code runterbrechen und bündeln kann, damit kann Tree Shaking implementiert werden.
• Microsoft SQList ein von Microsoft entwickeltes relationales Datenbank-Managementsystem. Bei dieser Lösung werden wir die Azure-SQL-Datenbank verwenden, um die Portabilität unserer Lösung zu erhöhen.
• MongoDBist eine der beliebtesten NoSQL-Datenbanken. Wir werden sie als Alternative zu der SQL-Datenbank (Microsoft SQL) verwenden, um mehr Datenspeicher-Szenarien abzudecken.
• Visual Studio Code (VS Code)ist eine leichte plattformübergreifende IDE für den C#- und den Frontend-Code.

Jetzt werden wir mit der Entwicklung unserer Web-Anwendung in der Windows 10-Umgebung beginnen, um weiter auf Ubuntu zu entwickeln.

Bitte beachten Sie, dass auf Ihrem Gerät die neuesten Versionen von Node.js und .NET-Core-SDK und -Runtime installiert sein sollen.

Start des Angular-4-Projekts

Die anfängliche Erstellung  der Angular-4- und Webpack-Lösung ist ein komplizierter Prozess, der noch komplizierter wird, wenn eine neue Software veröffentlicht wird und Sie Ihren Ansatz parallel dazu ändern müssen. Daher schlagen wir Angular CLI vor (eine Befehlszeilenschnittstelle für Angular), um dieses Verfahren zu straffen.

Beginnen wir mit der Installation von Webpack und Angular CLI.

Wenn Sie Webpack bereits auf Ihrem Computer haben, würden wir empfehlen, es neu zu installieren, um sicherzustellen, dass Sie die neueste Version verwenden:

npm uninstall -g webpack

npm rm webpack -g

Install Webpack again:

npm install webpack -g

Das gleiche betrifft Angular CLI. Wenn Sie es installiert haben, stellen Sie sicher, dass Sie die neueste Version verwenden:

npm uninstall -g @angular/cli

npm rm @angular/cli –g

Reinstall Angular CLI once again:

npm install @angular/cli -g

Now let’s create a new project:

ng new Ng2AspCore Sie sollten eine Antwort bekommen, die so wie auf dem Bildschirm unten aussieht:

In den neu erstellen Projektordner verschieben: PS E:\progs> cd Ng2AspCore Sie können es sich auch im Explorer anzeigen lassen:

Zunächst platziert Angular CLI die Konfigurationsdatei webpack.config.js im Ordner node_modules/webpack und erlaubt es nicht, sie zu konfigurieren.
Wir müssen webpack.config.js in die Wurzel des Projekts extrahieren, um sie konfigurieren zu können:

Initially, Angular CLI puts a webpack.config.js config file in the node_modules/webpack folder and doesn’t allow to configure it.

PS E:\progs\Ng2AspCore> ng eject

Jetzt können wir die Datei sehen:

Das Angular-4-Grundprojekt ist nun fertig.

Start des .NET-Core-Projekts

Nun müssen wir ein .NET-Core-Projekt hinzuzufügen:

PS E:\progs\Ng2AspCore> dotnet new webapi

Rot markiert sind die Projektdateien. Das .NET-Core-Projekt wurde erfolgreich erstellt.

Webpack-Einstellung

Beide Projekte wurden erstellt, aber sie können miteinander noch nicht interagieren. Eigentlich sollten wir statische Dateien im .NET-Core-Stammordner wwwroot platzieren. Wir müssen Webpack einstellen, um gebündelte Dateien im Ordner wwwroot zu platzieren.

Öffnen wir unsere Projektordner im VS Code. Öffnen Sie die Datei webpack.config.js und finden Sie das Verzeichnis „dist“, wie auf dem Screenshot unten zu sehen ist:

Ersetzen Sie:

“path”: path.join(process.cwd(), “dist”),

…durch:

“path”: path.join(process.cwd(), “wwwroot”),

Sie können auch outDir wie unten dargestellt ändern:

Einstellung .NET-Core-Projekts

Visual Studio Code ist eine leistungsfähige plattformübergreifende IDE, die durch Erweiterungen noch effektiver gestaltet werden kann.
Für die Arbeit mit .NET Core brauchen Sie die C#-Erweiterung für Visual Studio Code.

Unser .NET Core verwendet noch keine statischen Dateien und wir werden dieses Problem jetzt lösen. Fügen Sie die folgende Zeile in der Config-Methode in der Datei Startup.cs hinzu, um Standarddateien wie index.html zu verwenden:

UseDefaultFiles();

Nun fügen Sie die folgende Zeile in der Config-Methode in der Datei Startup.cs hinzu, um statische Dateien aus dem wwwroot zu nutzen:

UseStaticFiles();

Fügen Sie die folgende Zeile in das *.csproj-Projekt ein, um einen Verweis auf die Bibliothek zu erstellen, damit die Zeilen unterstützt werden können, die wir gerade eben hinzugefügt haben:

<PackageReference Include=”Microsoft.AspNetCore.StaticFiles” Version=”1.1.2″ />

Vergessen Sie nicht, alle bearbeiteten Dateien abzuspeichern. Wenn Sie merken, dass Ihr Code in den *.cs-Dateien als Fehler unterstrichen wird, führen Sie einfach den Befehl dotnet restore in PowerShell aus, um Pakete und Referenzen wiederherzustellen, die Sie in der *.csproj-Datei angegeben haben.

Lassen Sie uns jetzt überprüfen, ob Webpack wie erwartet funktioniert. Führen Sie den folgenden Befehl aus, um den TypeScript-Code in den JavaScript-Code zu transformieren, ihn dann zu bündeln, runterzubrechen und in den Zielordner einzusetzen:

PS E:\progs\Ng2AspCore> webpack

Jetzt können wir sehen, dass alle erwarteten Dateien im Ordner wwwroot erscheinen:

App-Code schreiben

Senden wir eine wirklich einfache Botschaft aus unserem Backend heraus und lassen sie im Browser anzeigen.

Öffnen Sie den Ordner „Controller“ und fügen Sie eine neue Datei mit dem Namen „HelloController.cs“ hinzu. Sie bekommen folgendes Menü zu sehen:

Betten Sie den folgenden Code in die Datei ein:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace Ng2AspCore.Controllers

{
    [Route("api/hello")]
    public class HelloController : Controller
    {
        [HttpGet]
        public IActionResult Get()
        {
            return Ok("Hello Angular4 and ASP.NET Core from Windows 10");
        }
    }
}

Erläuterung: Es gibt zwei Arten von Routing – konventionelles Routing und Attribut-Routing. Wir verwenden RouteAttribute (Attribut-Routing), um ein Routing zu definieren. Sie können auch die Konfigurationsmethode beim Startup verwenden, um ein Routing (konventionelles Routing) zu definieren, aber RouteAttribute ist die zu bevorzugende Option. Beim HelloController kehren wir nur zu einer einfachen Zeichenfolge “Hello Angular4 and ASP.NET Core from Windows 10” zurück, um zu zeigen, dass es wirklich funktioniert. In weiteren Teilen dieses Tutoriums werden wir nützlichere Beispiele erstellen.

Jetzt ist unser Endpunkt fertig.

Sie können den Befehl dotnet run ausführen und auf http://localhost:5000/api/hello in einem Browser gehen, um es zu testen.

Außerdem werden wir diesen Endpunkt in unserem Frontend-Teil anfordern, um eine Antwort an die Seite zurückzuschicken.

Erstellen Sie eine neue Datei app.service.ts im Ordner src/app.

Fügen Sie den folgenden Code in die Datei ein:

import { Injectable } from ‘@angular/core’;
import { Http, Response } from ‘@angular/http’;

import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/catch’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/observable/throw’;

@Injectable()
export class AppService {
    private _serviceUrl = 'api/hello';

    constructor(private _http: Http) { }

    sayHello(): Observable <string>  {
        return this._http.get(this._serviceUrl)
            .map((response: Response) => {
                return response.text();
            });
    }
}

Erläuterung: Wir haben eine neue TypeScript-Klasse definiert und diese durch @Injectable markiert, damit sie als Dependency Injector fungiert. In dieser Klasse haben wir nur eine Methode, die einen Kommunikationskanal öffnet, in dem das Ansprechen des Endpunkts emittiert werden kann. Zu diesem Zweck verwenden wir die Klasse “Observable”.

Öffnen Sie die Datei app.module.ts und fügen Sie “AppService” zu der Datei. Importieren Sie dann HttpModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nun ändern Sie den Code der Datei app.component.html folgendermaßen:

<h4 class='panel-heading'>
    {{errorMessage}}
</h4>
<h2 class='panel-heading'>
    {{pageTitle}}
</h2>
<hr/>

Ändern Sie den Code der Datei app.component.ts folgendermaßen:

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { AppService } from './app.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  pageTitle: string = '';
  errorMessage: string = '';
  
  constructor(private _appService: AppService) { }
    ngOnInit(): void {
        this._appService.sayHello()
            .subscribe(result => {
                this.pageTitle = result;
            },
            error => {
                this.errorMessage = <any>error
            });
    }
}

Erläuterung: Wir haben eine OnInit-Schnittstelle als Lifecycle-Hook zu dieser Datei und die ngOnInit-Methode von dieser Schnittstelle hinzugefügt, um den Code aufrufen zu können, wenn die datengebundenen Eigenschaften einer Anweisung initialisiert werden. Bei diesem Verfahren haben wir den beobachtbaren Kanal von AppService abonniert.

Start der Anwendung

Um Ihre Anwendung zu starten, führen Sie einfach die folgenden Befehle aus:

• webpack
• dotnet restore – alle .NET-Core-Pakete wiederherstellen
• dotnet run – Ihre Anwendung auf dem Kestrel-Web-Server starten

Jetzt können Sie auf den Link http://localhost:5000/ gehen, wie in der unterstrichenen Passage vorgeschlagen:

Wie unten dargestellt, werden Sie die folgende Webseite in Ihrem Browser vorfinden:

We’ve uploaded the final version of this proof of concept to the GitHub repository. Enjoy the tutorial and let us know if you have any questions or comments.

Wir haben die letzte Version dieses Proof of Concept im GitHub-Verzeichnis hochgeladen. Genießen Sie das Tutorium und lassen Sie uns wissen, wenn Sie Fragen oder Anregungen haben.

Im zweiten Teil unserer Tutorien werden wir über die Entwicklung einer Anwendung mit Hilfe von ASP .NET Core + Angular 4 im Docker-Container mit der Verbindung zur SQL-Azure-Datenbank schreiben. Bleiben Sie dran!