Mit der Nutzung dieser Webseite akzeptieren Sie unsere Nutzung von Cookies. Weitere Informationen über Cookies finden Sie hier
Zustimmen
Infopulse - Softwareentwicklung & Infrastruktur-Management-Services
Mit der Nutzung dieser Webseite akzeptieren Sie unsere Nutzung von Cookies. Weitere Informationen über Cookies finden Sie hier
Zustimmen
Infopulse - Softwareentwicklung & Infrastruktur-Management-Services
Infopulse - Softwareentwicklung & Infrastruktur-Management-Services
reCAPTCHA
Angebot anfordern Bitte füllen Sie dieses kurze Formular aus und wir senden Ihnen in Kürze ein kostenloses Angebot zu.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Abonnieren Sie unsere Updates Seien Sie unter den Ersten, die exklusive Einblicke in die IT, die Innovationen und Best Practices erhalten.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Subscribe to our Vacancies Please fill in this quick form to be among the first to receive our updates.
* Required fields
Your privacy is important to us. We will never share your data.
Abonnieren Sie unsere Updates Seien Sie unter den Ersten, die exklusive Einblicke in die IT, die Innovationen und Best Practices erhalten.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Photo of Anton Bastiuchenko Senden Sie eine E-Mail an Anton Bastiuchenko Bitte füllen Sie dieses kurze Formular aus, um unseren Experten direkt zu kontaktieren.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Infopulse - Expert Software Engineering, Infrastructure Management Services
Read the Full Case Study Don't miss the most interesting part of the story!
Submit this quick form to see the rest and to freely access all case studies on our website.
* Required fields
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.

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

Infopulse startet eine Reihe spezialisierter Tutorien, die sich mit der Lösungsentwicklung anhand der plattformübergreifenden Open-Source-Technologien von Microsoft zusammen mit Docker befassen. In diesen Tutorien werden wir erklären, wie Sie Ihre eigenen Lösungen mit Hilfe der Spitzentechnologien von Microsoft und Google wie Angular 4 und .NET Core entwickeln können sowie eine .NET-Lösung auf Ubuntu (der beliebtesten Linux-basierten Server-Plattform) laufen lassen und sie unabhängig und robust machen. Diese Aufgabe mag hart scheinen, aber man kann sie ganz leicht erledigen.

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:
Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 958420

In den neu erstellen Projektordner verschieben:
PS E:\progs> cd Ng2AspCore
Sie können es sich auch im Explorer anzeigen lassen:
Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 716473

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:
Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 522355

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

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

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:

Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 290412Ersetzen Sie:

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

…durch:

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

Sie können auch outDir wie unten dargestellt ändern:
Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 783702

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.

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

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();

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

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″ />

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

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:
Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 711432

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:

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

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.

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

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:

Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 680268
Wie unten dargestellt, werden Sie die folgende Webseite in Ihrem Browser vorfinden:
Tutorium: Entwicklung einfacher Anwendungen mit Hilfe von ASP .NET Core und Angular 4 in Windows 10 - Infopulse - 640035

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!