Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

Angular.js SPA App unter Visual Studio und Asp.Net

 

Wie erstellt man eine einfache Asp.Net Core Anwendung mit Angular.js als Frontend.

 

Angular als SPA

Die Angular Anwendung ist in diesem Fall eine SPA Single Page Application.

Das heißt, dass quasi das komplette MVC Model, die Views und der Controller im Angular-Code  verwaltet werden. Beim Start wird Angular in Asp.Net Core eingebettet und als ClientApp

Die Webanwendung startet dann unter /ClientApp/index.html.

Dabei wird main.ts als Typescript als Codepage geladen und steht in Verbindung der HTML Frontseite.

 

Angular.js als script

Angular.js kann auch nur teilweise als javascript-library eingebettet werden und ähnlich wie jQuery komplexere Funktionen und Vorgänge vereinfacht ausführen.

 

Angular in Visual Studio 2017 und Asp.net Core

 

 

Vorbereitung:

Node.js installieren

Damit Angular.js als Webanwendung laufen kann, muss zuerst auf dem Rechner Node.js installiert werden.

 

Unter https://nodejs.org/en/download/

Für Windows 10 die Windows Installer->Windows Intaller (.msi) 64-Bit auswählen

 

 

Und nach dem Download die Installation starten

 

 

Standard Installationsverzeichnis für node.js ist C:\Program Files\nodejs\

 

Im Custom Setup alle Komponenten aktiviert lassen

Install the core Node.js runtime (node.exe)

 

 

Asp-Core Projekt mit Angular SPA Frontend erstellen

In Visual Studio 2017

In Visual Studio unter Menü->File->New Projekt auf

.Net Core oder Web

Und dann ASP.NET Core Web Application wählen

 

Projekt-Vorlage

Dann kann man unter Asp.Net Core 2.1 auch die Vorlage: Angular auswählen

A project template for creating Asp.Net Core application with Angular

Unter Change Authentication ist keine Änderung bei dieser Vorlage möglich

 

 

 

Erster Zugriff:

Beim Start der ersten Webanwendung wird durch den Windows Defender abgefragt, ob Node.js das Serverseitige Javascript ausführen darf.

 

Danach kann Angular.js als Webanswenung gestartet werden unter https://localhost:44390

 

 

 

Anleitung:

Für Visual Studio 2015/2017 findet man eine detailierte Einleitung unter https://angular.io/guide/visual-studio-2015

Download the QuickStart source from GitHub

 

Mobile
»
Angular.js SPA App unter Visual Studio und Asp.Net

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de