Dabei wird das Routing komplett von Angular übernommen
Hier in app.module.ts imports
|
RouterModule.forRoot([
{ path: '', component: HomeComponent,
pathMatch: 'full' },
{ path: 'counter', component: CounterComponent
},
{ path: 'fetch-data', component: FetchDataComponent
},
|
Angular zu Asp.Net Core
Der Verweis zur Asp.Net Core wird als Inject der
Basis-URL übergeben
|
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string)
{
http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
this.forecasts = result;
}, error => console.error(error));
}
|
BASE_URL
Die jeweilige Basis-URL wird über main.ts ermittelt.
In main.ts
|
export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
const providers = [
{ provide: 'BASE_URL', useFactory: getBaseUrl, deps:
[] }
];
|
In ASP.Net Core
In der Asp.Net Core Anwendung wird das Routing für die Angular
Projekt als SPA Seite übergeben
1. Asp.Net Core ergänzen
Im 1. Teil wird die Funktionalität von SPA Single Page
Applications zu Asp.Net Core hinzugefügt im ConfigureServices
|
public void ConfigureServices(IServiceCollection
services)
{
services.AddControllersWithViews();
// In production, the Angular files will
be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
}
|
2.
Asp.Net Core Routes
Im folgenden Code werden die Routen angepasst.
|
Configure..
app.UseRouting();
|
2a. erst werden den Asp.Net Core Controller Routen für
Web API eingefügt
|
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
|
2b. dann die SPA Routen für Angular
|
app.UseSpa(spa =>
{
// To learn more about options for
serving an Angular SPA from ASP.NET Core,
// see
https://go.microsoft.com/fwlink/?linkid=864501
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmscript: "start");
}
});
|
Routing
in Asp.Net Core Startup.cs
Aufteilung Web Api Controller und danach Angular Vue
React Routes
