Getting Started With ASP.NET Core Template Pack

Now, it has become easier to create an Angular2 application in ASP.NET Core using the ASP.NET Core Template Pack. ASP.NET Core Template contains the following collection of .NET Core Project Templates.

• ASP.NET Core Angular 2 Starter Application (.NET Core)
• ASP.NET Core MVC Starter Application (.NET Core)
• Static Website (.NET Core)
• Vue.js with Webpack (.NET Core)

After installing our ASP.NET Core Template pack, we can see that the new templates have been added to our Visual Studio.



In this article, we will focus on how to create an ASP.NET Core Angular 2 application. This is normal ASP.NET Core MVC application which hosts Angular 2 single-page application (Reference link).

Prerequisites

Make sure, you have installed all the prerequisites in your computer. If not, then download and install all, one by one.

1. First, download and install Visual Studio 2015 with Update 3 from this link.
   
2. If you have Visual Studio 2015 and not yet updated with update 3, download and install the Visual Studio 2015 Update 3 from this link.
   
3. Download and install .NET Core 1.0.1
   
4. Download and install TypeScript 2.0
   
5. Download and install Node.js v4.0 or above. I have installed V6.9.1 (Download link).

Make sure that you have installed all the listed tools before starting your ASP.NET Core Template Pack.

Now, it’s time to install ASP.NET Core Template pack. There are two methods for installing the ASP.NET Core Template Pack.

First method to install ASP.NET Core Template Pack

Download ASP.NET Core Template Pack visz file from this link.

Second Method to install ASP.NET Core Template Pack

Open Visual Studio 2015 >> Tools >> Select Extensions and Updates.



In the right side click on Search, enter “ASP.NET Core Template Pack” and download the template.



Install the ASP.NET Core Template Pack.



After installation, restart the Visual Studio 2015. Now, we can see that ASP.NET Core Template Pack has been added under web project templates.



Code Part

Now, let’s see how to create our first ASP.NET Core Angular 2 application.

Step 1- Create ASP.NET Core Angular 2 application

After installing all the prerequisites listed above and ASP.NET Core Template, click Start >> Programs >> Visual Studio 2015 >> Visual Studio 2015, on your desktop. Click New >> Project. Select Web >> ASP.NET Core Angular 2 Starter. Enter your project name and click OK.



After creating ASP.NET Core Angular 2 application, wait for a few seconds. You will see that all the dependencies are automatically restoring.



Here, we can see that all the dependencies have been installed.



Now, our ASP.NET Core Angular 2 application has been successfully created. We can see, this is a very simple and easy method to create ASP.NET Core Angular 2 application.

Run the Application

Now, it’s time to run our application to see the output.



Here, we can see, the ASP.NET Core Angular 2 application has a few sample outputs, by default, for us to get started.

In left side navigation, we can see "Home/Counter" and "Fetch data" menus.

In this, Home is default menu with "Hello World" message.



Counter Menu

We can see simple Angular 2 example for incrementing a counter value.



Fetch Data

Next, we have "Fetch data" menu which will display the list of data in Grid, using Angular 2.



Now, ASP.NET Core Template makes our work much easier to develop Angular 2 application.

Project Solution


In the project Solution Explorer, we can see WWWROOT Folder, ClientApp, Controller, Views, and package.json. In package.json, we can see that all the needed dependencies for Angular 2 have been added by default.



Controller Folder

Controller is our MVC Controller folder. In the Controller folder, we can see default HomeController and SampleDataController.



When we run our application, we saw the Fetch output like below.



In "Fetch data" menu, it displays Weather forecast data. This result is being loaded from sampledataController.



In this SampleDataController, we can see Weather Forecasts which returns weather forecast results. This result is being displayed as an output using Angular 2.

In our next article, we will see more in detail about  ClientApp folder and how to customize the MVC Controller to display our own result in our Angular 2 application.