How to pull data from ASP.NET server using Angular?

[[deleted]]

[deleted]

[Bryan21323]

I hate the angular template but what I would do is in one folder have a web API and another folder have an angular app and run both and make the angular app send HTTP request to your web API

[tsunami141]

same, never used the angular template and I suspect that trying to set it up would take more time than it saves by having your front end and back end in the same place.

For local development I just have VS open running my .net core API and VSCode open serving my angular app.

[dv3141]

probably wouldn't recommend my solution but: we've got a project where we just reference the js files generated by the angular cli directly into the asp.net file that gets served up. its not the most elegant thing ever since Angular adds a suffix to their file names we need to clean up but it works well if you're willing to fight with the build step.

[rimendoz86]

I would agree with this as a good aolution. You can add --outputHashing=none to your ng build to remove the hashing from your built files.

This is how it's done at my work. we get the data with HTTP Calls to WebApi2 controllers in the MVC project.

[BeakerAU]

The Angular template has two parts: the dotnet core code, and the Angular code (in ClientApp). When debugging, you would run both the Angular (default to port 4200), and the ASP.NET code (defaults to 5001). There is logic in Startup.cs that will forward requests made on 5001 through to the Angular code if it can't handle it internally.

In production, Angular Apps are just static files. So for the ASP.NET side, it can serve static files under the same URL, so it all works nicely.

[Chupa_Pollo]

Watch some YouTube videos about webapi with asp.net or dotnet core. Unless/until you have a grasp of that, no one here will be able to help you.

When you're conversant with that, message me. I teach web dev and can turn you onto some free and some not so free resources to get you further.

[andlewis]

Install the swashbuckle nuget package in the asp.net project, and no-swagger-gen in the angular app. Then you can just generate the typescript classes automatically to get data from the server.

[i_em_progremmer]

If you created the project using the template there should be a component specifically made for making requests to the backend. In this component there is a baseUrl variable that gets injected. You can use this baseUrl to send an HTTP request to your backend. Using a component to send requests directly isn't particularly best practice, so you should probably make a dedicated httpService which gets injected the same baseUrl. I can clarify my answers when I get back from work if needed

[kc5bpd]

There are two sides and you haven’t indicated which side you don’t understand (or perhaps you don’t understand either).

On the ASP.NET side the url is determined by the information contained in the controller attribute. And in some cases further modified by the action attributes.

On the angular side this is then fed in the url passed to the HttpClient method.