Angular 7 ASP.NET Core Application with Web API

Angular 7 ASP.NET Core
Share this

In this article I will be creating an Angular 7 ASP.NET Core Application with Web API. This article comprehensively describes each and every step to create the application from scratch.

Source Code : Complete source code can be downloaded from the following GitHub repo –

https://github.com/sudipta-chaudhari/Angular7DotNetCore

Key learnings from this article is as follows: –

  1. Setup development environment with Nodejs, Angular CLI and Bootstrap
  2. Create an Angular 7 app with ASP.NET Core Angular Template in Visual Studio 2017
  3. Create ASP.NET Web API service in C#
  4. Consume ASP.NET Web API REST service from Angular
  5. Bind ASP.NET Web API service results on Angular View
  6. Create and use Angular Router

The software packages with versions used at the time of writing this article are as follows: –

  1. Visual Studio 2017 Enterprise version 15.9.4
  2. .NET Core 2.1 Framework
  3. Nodejs v 10.13.0
  4. Angular CLI v 7.0.5
  5. Windows 10 Pro

First let us setup the development environment.

Step 1: Install or Update NodeJS

Download Node.js and install from https://nodejs.org/en/download/ for your corresponding operating system – Windows, MacOS etc and run the corresponding installer for freshly installing or updating the existing installation. Check the version after installing or updating Node.js using the following command

node --version

Nodejs Version

Step 2: Install or Update Angular CLI

Next install Angular CLI or update to latest version if already installed. Open command prompt and run the following command

npm install -g @angular/cli

Check the Angular CLI Wiki for further details at: https://github.com/angular/angular-cli/wiki

Check the version after installation or updating using the following command.

ng --version

Angular CLI Version

Step 3: Install .NET Core Framework 2.1

Install Visual Studio 2017 .NET Core 2.1 Framework if not already installed.

Step 4: Create Angular App using ASP.NET Core Angular Template

Open Visual Studio 2017 -> Create New Project -> Select ASP.NET Core Web Application. Change the Name, Location or Solution Name as required and click OK button.

ASP.Net Core Web App

Next select ‘Angular’ template, uncheck ‘Configure for HTTPS’, make sure Authentication is selected as ‘No Authentication’ and finally click ‘OK’ button.

ASP.Net Core Web App Angular Template

Visual Studio will create an Angular 5 application. Open package.json file under the ClientApp located at the solution root folder where you can see the package versions as 5.2.

Package.json Angular5

Build the solution to restore the NPM packages. Now it will take some decent amount of time. After this is completed, run the solution.

Angular 5 ASP.NET Core Home

Angular 5 ASP.NET Core Fetch Data

Step 5: Change application from Angular 5 to Angular 7

Delete ‘ClientApp’ folder. Next open the Command prompt and navigate to the project’s root folder and run the command:

ng new ClientApp

Angular 7 New Client App

I deleted the ‘ClientApp’ folder created using ASP.NET Core Angular template and created a new app using Angular CLI. The reason for doing so is that Visual Studio ASP.NET Core Angular Template creates the app in Angular version 5 and upgrading the packages and dependencies to Angular 7 is a nightmare. It’s better to create a new Angular 7 app using Angular CLI.

After this, you will be prompted asking if you would like to add Angular routing. Type ‘Y’ and press enter. Next you will be prompted to select stylesheet format amongst CSS, SCSS, SASS, LESS, Stylus. Default CSS is selected and selection amongst other options can be changes using arrow keys. I have kept default CSS option selected and finally pressed Enter key to proceed further.

Angular7 New Client App Routing CSS

After completion, open package.json file under the ‘ClientApp’ located at the solution root folder where you can now see the package versions as 7.0.

Package.json Angular 7

Step 6: Install Bootstrap

I will install Bootstrap v 4.4.2 which is the latest version at the time of writing this article. Bootstrap 4 has dependency of JQuery and popper.js. So, install these two libraries using the following command.

npm install jquery popper.js

Next, install Bootstrap 4 using the following command by navigating to ‘ClientApp’ folder.

npm install bootstrap@4

This installs Bootstrap v 4.4.2 which is currently the latest version of Bootstrap. Open package.json file where you will now see the entry for Bootstrap.

Angular 7 Bootstrap Package.json

Now to use Bootstrap css, open angular.json file present under ClientApp directory. Locate the styles element and add the following code.

node_modules/bootstrap/dist/css/bootstrap.min.css

Next locate scripts element and add the following scripts for jquery, bootstrap and popper.js

"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"

angular.json Bootstrap

Build the solution to restore the NPM packages. It will take some decent amount of time, give it some time to complete. After completion, hit F5 to build and run the app. You will see the home page with Angular logo and default links.

Angular 7 App First RunAlso hit the default Web API HTTPGet endpoint WeatherForecasts in the browser which will return result as follows.

 

ASP.Net Core Web API

 

Step 7: Create new components

Change directory to ‘ClientApp’ folder.

Use the following command to create ‘home’ component.

ng g component home

Use the following command to create ‘fetch-data’ component.

ng g component fetch-data

Angular 7 Generate Component

In the solution explorer, navigate to ClientApp -> src ->  app folder. Under ‘app’ folder, you will see two folders – home and fetch-data.

Angular 7 Component

Replace home.component.html template’s default code with following code.

Step 8: Modify ‘fetch-data’ component’s code

Replace fetch-data.component.ts component’s code as follows:-

Replace fetch-data.component.html template’s default code with following code.

I hope the reader of this post is familiar and comfortable in calling REST API’s and binding the results to the view, so I am not walking you through each line of this code. If you are not familiar with this, please check the Angular documentation which I leave for your exploration.

Step 9: Modify ‘app.component.html’ – root component template

app.component.html is like the root application template which is like the master page (in context of ASP.NET) of our application. It is the shell of our SPA inside which various different component’s templates will be loaded. To display the home and the fetch-data component’s view, change the default code with the following code.

Here I have created a top navigation bar with links to navigate to ‘home’ and ‘fetch-data’ components.

Step 10: Modify ‘app.module.ts’ – root module

Modify app.module.ts code with module declarations for home and fetch-data components and also adding the routes for these two components as follows.

Step 11: Run the app

Build the solution and run the app!

Angular 7 ASP.NET Core Home

 

Clicking the ‘Fetch Data’ hyperlink on the home page or top navigation bar will load the ‘fetch-data’ view displaying the Weather Forecast data as shown follows.


 

 

 

This concludes the article – Angular 7 App with ASP.NET Core and Web API.

I hope you liked this article. If you have any comments, questions or suggestions, please post them in the comments section below this article. I will try to respond at my earliest or somebody else reading the article and your comment will try to respond.

 


Share this

Leave a Reply