Angular with .Net Core 2.0

ang12

When we think of creating a JavaScript application, for example, an Angular project, generally we do not think of Visual Studio because we are not used to writing Angular code on Visual Studio.

But Microsoft team has allowed us to write Angular code in Visual Studio and it works very well with the back-end code of .Net.

Let us see how to create the Angular application using new templates which have been introduced with .Net Core 2.0. For more information have a look here.

First of all click on File -> New -> Project. It will open below window:

ang1

Then click on .Net Core Web application, it will open below window:

core3

Click on the Angular template which will create a brand new project of Angular in which:

  • Views of MVC will be replaced by Angular
  • We still have Models and Controllers
  • There is now ClientApp folder where JavaScript framework components are held

The structure of the project would look like as below:

ang2

As you can see we have Controllers here but currently we do not have any models but they can be added when we plug the database with the application.

Let us look at how the Views look like, For that, we will open Index.cshtml which looks like below:

ang3

This is just the bootstrapper of Angular and we are not going to write any views or Angular code into this folder for the current project.

Now let us look at the actual client side of the application where we can find all the TypeScript.

What is TypeScript?

TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. Anders Hejlsberg, the lead architect of C# and creator of Delphi and Turbo Pascal, has worked on the development of typescript.

For our example we have created the CounterComponent which is used to increment the counter once we click on a button and FetchDataComponent which fetches the data from the API and shows it in the view as shown below:

ang4

Let us look at CounterComponent first

In Counter.component.ts file we will write below code:

ang5

Here you can see the Angular code but it is written in the TypeScript. Like we have currentCount variable in above component which will be bound in the respected HTML file as below:

ang6

Once the code is written, just click on IIS Express button on top of the page and it will run the Angular application:

So CurrentCount will be increased once we click on Increment button:

ang7

Now let us look at FetchDataComponent.

Here in FetchData.Component.ts file we can write the code to call the API which will return the data as shown below:

ang8

The API endpoint resides in the Controller folder as shown below:

ang9

WeatherForecasts method returns the json data and then Angular processes that, repopulate the web page with the appropriate HTML as shown below:

ang10

Important Notes:

When we run the application, TypeScript would be running in the background. So if you make any changes in the code, it would be reflected automatically in the browser.

It is possible because Microsoft team has created a Node services so that:

  • We can run from within C# code a JavaScript library which is running in Node
  • We can call out Node.js and call function in Javascript
  • We can return the value in C# code which we can utilize.

For example, we can kickoff WebPack from C# code so whenever we click on Save button:

  • There is a watch in the background which picks up the save
  • It recompiles that Javascript
  • Node.js is running in Background which recreates the View
  • Sends back the view to the browser

Hope it helps.

 

 

 

 

14 thoughts on “Angular with .Net Core 2.0

  1. “There is no Razor, so if you are big fan of Razor then Angular is not the approach you should go.” To make a website you use Angular components and probably would not use Razor. However the MVC views that come with the project use Razor and I think this bullet point was confusing. Other than that, this a great article.

    Like

  2. Thank you for your nice article
    But how can I add identity features to this project.
    Asp.net core 2.0 templates in visual studio 2017 have not this feature when you choose angular template(or react)

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s