Most Easy Way to Create Angular Application with .Net Core MVC

Have you created a angular app with .net core  in Visual studio 2017 ?

Today i am going to show you fast and easy way to create  angular application.

Before that I will tell you something about Angular & .Net Core

AngularJS

  • Angular JS (commonly know by Angular.js or AngularJS 1.X) it is Javascript Library.
  • Its is Open Source .
  • Used for Front End Web application.
  • It is a Framework for Front End.
  • It is maintained by
  • It is also used to make One Page Application

.Net Core

  • It is .Net Framework , Known my name Asp.net Core 1.x ,Asp.net 2.x
  • It is free & open source Software Framework
  • It works on well known different operating System like Windows,macOS & Linux

For more Detail of .Net Core follow below links.

  1. Prerequisites for .NET Core -.NET Core wiki
  2. Getting started with .NET Core 2 Console application
  3. Powerful way to Create Web App in Asp.net Core MVC

As  we know the basic topics know lets start  with what we need to build this application

Prerequisties

As .Net Core application can be developed  on Windows,macOS & Linux .I will focus on Windows .

  • Install Visual studio 2017 Version 15.3
  • Node.js

 

 

Now, Lets start making web app in Visual Studio

Get  started Angular Application with .Net core

Open Visual Studio File->New Project , Then Select .Net Core & Asp.net Core Web Application ,Name your project.

Now you will select Angular 

Open Dependencies=> npm here you can see angular files.

The project structure is well known like Controller, Views and wwwroot folder.

The ClientApp folder contains the angular app ,it will be used as views in the project & Views in the folder will be used for minimum purpose only for bootstrap feature,All other will be done by ClientApp

 

Press Ctrl+F5 your web page will open with http://localhost:xxxxx /  url in the browser.

Hello world page opened Its your Single-page application. On left side you can see the navigation.

Lets go to the Counter link you will see Increment Button & current count  is Zero.

Clicking on increment it will increase by 1 till you click that button.

This increment is happening in typescript function incrementCounter() .

Now lets do some changes in typescript file we will change

this.currentCount++ 

To

this.currentCount-- 

 

You have to this when project is in running state only. The Counter on the page will get reset to Zero on the fly.  It will get changed automatically this is magical thing about angular you changes will reflect immediately.

 

Lets experiment something more we go to Fetch Data You can see Weather forecast

We will change it while project is running we go to fetch data folder in that you have fetchdata.component.html

<h1>Weather forecast</h1>

To

<h1>Weather forecast 2</h1>

 

You can see the changes gets reflected when you save it on your Visual Studio.

The is magical thing about angularjs. Next Part of Angular Click

I will be happy to hear from you if you find any other magic for One page angular application in .net core .Please Comment.

  •  
    66
    Shares
  • 66
  •  
  •  
  •  
  •  
  •  

About the Author

Prashant Goswami

I am the blog writer who will teach how to love programming. My experience in programming is about 6 years. And i am the lover of programming , so i will make you people.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: