Getting Started with Angular5 and ASP.NET Core

• Download source code - 1.9 MB

Introduction

I hope you all know that Angular 5 has been released. In this article, we will see how to start working with Angular 5 and ASP.NET Core using Angular5TemplateCore.

It’s very simple and easy to develop an Angular 5 application for ASP.NET Core using the Angular5TemplateCore. Let's see this in detail.

Background

Prerequisites

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

1. First, download and install Visual Studio 2017 from this link.
2. Download and install .NET Core 2.0
3. Download and install Node.js v9.0 or above. I have installed v9.1.0 (Download link).

Note

Before starting the project, make sure that you have installed Visual Studio 2.0 and .NET Core version 2.0 or above on your computer. If not, kindly download and install from the above links.

Prerequisites Installation Part

Install Node.js

Install the Node.js version 9.0 or above on your computer.

After downloading Node.js, install it on your computer.

Installing Angular5TemplateCore

Let’s see how to install the Angular5TemplateCore to your Visual Studio .NET Core template.

Open Visual Studio 2017 and go to File -> New project. Select Online from the left menu, then select Visual C#. From the list, search for Angular5TemplateCore and click OK.

Close your Visual Studio and wait until Angular5TemplateCore installs. After the installation is completed, it's time for building your first Angular 5 application using ASP.NET Core Template. We will see this in detail in the code part.

Using the Code

Now, it’s time to create our first Angular 5 and ASP.NET Core application.

Step 1 Create Angular5TemplateCore

After installing all the prerequisites listed above and Angular5TemplateCore, click Start >> Programs >> Visual Studio 2017 >> Visual Studio 2017, on your desktop.

Click New >> Project. Select Visual C# >> Select Angular5Core2. Enter your project name and click OK.

Once our project is created, we can see it in the Solution Explorer with Angular5 sample components, HTML, and app in the ClientApp folder, along with ASP.NET Core Controllers and View folder.

Here, these files and folders are very similar to our ASP.NET Core Template Pack for Angular 2.

Package.json File

If we open the package.json file, we can see all the dependencies needed for Angular 5 and the Angular CLI has already been added by default.

Adding Webpack in Package.json

In order to run our Angular 5 application, we need to install the webpack in our application. If the webpack is by default not added to our package.json file, then we need to add it manually. Webpack is an open-source JavaScript module bundler. It takes modules with dependencies and generates static assets representing those modules. To know more about Webpack, click here.

Open your package.json file and add the below line under scripts.

"postinstall": "webpack --config webpack.config.vendor.js"

Build and Run Your Project

Now, our Angular 5 and ASP.NET Core application are ready. We can run and see the output in the browser. First, build the application. After the build is created successfully, run the application.

When we run the Angular 5 ASP.NET Core application, we can see the default home page with left side menu and Counter and Fetch data. Yes, in Angular5Core2Template, when we create a new project, by default, 3 components and an HTML file are added to Angular 5 demo - Home, Counter, and Fetch data.

In the component file, we can change the Angular 5 class to produce the output as per our need or we can add our own folder to display the output, with components and HTML files.

Changing Home Component and HTML File

Now, let’s try to change the home component class and HTML file to display the output with our name on the homepage.

For this, first, we edit the home.components.ts file. Here, in Home Component class, I have created a public variable to display my name as “myname”.

import { Component } from <a href="mailto:'@angular/core'">'@angular/core'</a>;

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {
    public myname = "Shanu";
}

In home.html file, I have changed the html design to bind and display the Angular5 component variable.

<h1>
    Welcome to <strong>{{ myname }}</strong> Angular5 and ASP.NET Core world
</h1>

Refresh the home page. We can see my name will be displayed in html page from Angular5 Component along with welcome message.

Same like this, we can also find the default Counter and Fetch data from API sample component and HTML file has been added by default. If we want, we can change that to our requirement or we can create our own component and HTML files.

Left Menu

In the application, we can see the menu on the left side. The menu has been displayed using the navmenu.component.ts and navmenu.components.html. If you want to remove or add a menu, we can change the HTML and Angular 5 TypeScript file.

Points of Interest

If you have already worked with ASP.NET Core Template pack for Angular 2, then this will be more simple and easy for you to work with Angular 5 because it follows similar steps. Angular 5 is mostly similar to Angular 4 with the same features but with some advanced level. In our next article, we will see in a deeper manner and in detail with some real-time examples for working with Angular 5 and ASP.NET Core.

History

• 2017/11/14 : Angular5Core2.zip - Version 1.0