In this tutorial, I am going to demonstrate about creating an Angular 7 application with Asp.Net Core in step by step manner.
This tutorial target the beginners who wants to start the project with these two separate technologies for the very first time.
Before deep diving, it’s always better to understand the basic concepts.
So, What is Asp.Net Core and Angular?
Asp.Net Core is the cross-platform and open-source framework for creating modern applications. Developed by Microsoft, It is the latest technology on application development framework stack. Asp.Net Core has many new features that makes it one of the best technology to learn these days.
Asp.Net Core and Asp.Net Framework are totally different framework with each other.
On the other side, Angular is the front-end web application development framework maintained by Google and the community. Angular is also one of the hot topic around the tech world.
It’s always easy for newbies to call Angular and AngularJs interchangeably. But, these two are totally different despite of being the product from same company and also having the same starting name.
The developers on Google has completely re-write the AngularJs to create the modern, rich-featured Angular Framework.
AngularJs is going to die (I think so) in near future. So, Angular is the best choice to learn for new developers.
By now you may have got some basic concepts to get started.
Before we begin, Please make sure you have the development environment as below.
- Visual Studio 2017 with latest update
- .Net Core 2.1
- Latest version of NodeJS
- You have to install Angular CLI, which I’ll show you further on this tutorial.
Now create a new Asp.Net Core project.
I am going to create the Asp.Net Core 2.1 project. If you don’t see the option for Asp.Net Core 2.1, you need to install Asp.Net Core 2.1 separately.
Now moving forward, select Asp.Net Core 2.1 and API option then click OK.
Our next requirement for this tutorial is Angular, Angular 7 more specifically. Angular 7 is the latest major release of Angular.
Make sure you have latest version of Node installed on your machine
Now update the Angular CLI to the version 7. For that, open the command prompt and run this command.
npm i -g @angular/cli
After the successful update, you can check to make sure as below.
You can also use the Angular template that is available on Visual Studio but I prefer to use Angular CLI to create the project.
So far, we have the latest version of angular CLI that will help us to create the Angular 7 project. Now navigate to the Asp.Net Core project which we have already created.
And run the command as below inside that directory.
ng new ClientApp
The new version of Angular CLI will ask you few questions as shown below. This is the new feature that came along with Angular 7.
Type ng serve –o and hit enter to start the server and run the project on browser.
Make sure you are inside ClientApp folder to run that command.
This is the first look of the Angular project.
Just have a look at URL, its http://localhost:4200/, which is the default URL for Angular project.
Serving angular files with Visual Studio F5.
As an Asp.Net developer, prior to Asp.Net Core and Angular we have the habit of running the whole project hitting F5. With the rise of Angular as a front-end development framework, we are using ng serve command to run the Angular project which can consume the Web API for data related stuffs.
Asp.Net Core has the SPA (Single Page Application) template feature where you can use Angular CLI project as the SPA template.
For that, you can either select the Angular template while creating the project on Visual Studio or you can later modify the startup.cs file to use the Angular CLI project as SPA template.
Please read this tutorial for creating SPA with Asp.Net Core and Angular CLI project.
The application development with Asp.Net Core and Angular is so exciting. Hope this guide will help you for the initial environment setup. There are many interesting things to learn on the way.
Happy coding and have a great day.