Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular in ASP.Net Core einbetten

11.02.2021 (­čĹü487)

 

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