Top to Bottom with Angular and .NET Core
Building modern software often involves a Single Page Application (SPA) calling to a backend service. This is pretty straightforward, but there are more steps than you would expect. In this blog post, we will walk through creating an Angular application that calls a .NET Core backend.
Step 1 – Create a very simple HTML web page for a shopping list
Install the http-server npm module. This module makes hosting a static site very easy across many platforms.
npm install -g http-server
Now we need to create a simple HTML page to display a shopping list.
Run the node http server. This will run a lightweight server that is easy to start and stop.
http-server
Step 2 – Re-create the shopping list as an Angular application
Install Angular.
npm install -g @angular/cli
Create a new Angular project.
ng n ShoppingListAngular
Change directory into the directory for the Angular application.
cd ShoppingListAngular
Run the Angular application.
ng serve
Open your web browser to http://localhost:4200/.
Let’s add a new component to our Angular Application
ng g c MyList
Open the source code for the Angular application in VS Code and simplify the app.component.html
Create a new default route for the MyList component. This is done by modifying the app-routing.module.ts.
Modify the my-list.component.html file to display a shopping list.
Refresh the web page in your browser.
Step 3 – Use data binding to display the shopping list
Add a new file to your Shopping List Angular application. This file will be the Data Transfer Object used to pass data to our UI component.
Generate a service for backend communication.
ng g s Backend
Modify the backend.service.ts file to return some static fake data.
Modify the component TypeScript to call the backend service to get the data.
Modify the template to use databinding to display the data.
Step 4 – Create a .NET Core Backend to return the shopping list
Create a new .NET Core project.
dotnet new webapi -n Backend
Add a DTO for the shopping list items.
Create a new ShoppingListController in our .NET project. Controllers should go in the Controller folder.
Because our Angular application will be running on a different hostname, we will need to enable CORS. We should only enable CORS for the hostname of our Angular application, but for this simple demo we will enable CORS for all domains.
Why do we have to do this? What is CORS? CORS is a security mechanism that browsers use to help prevent malicious scripts from running code without a user’s knowledge. With CORS, we restrict our applications as much as possible.
After we have the Shopping List controller, we will test the controller using Postman by running the application in VS Code.
Run the Postman application to create a request that runs against “https://localhost:7027/ShoppingList”.
Step 5 – Wire up the Angular application to the .NET backend
Modify the Angular app.module.ts file to include HttpClientModule.
Modify the Angular backend service backend.service.ts file to call our .NET Core backend.
Now we have an Angular application calling a .NET Core application. It took a lot of steps to get this going, but this same pattern can build a lot of software.
