Click here to Skip to main content
13,592,387 members
Click here to Skip to main content
Add your own
alternative version

Stats

15.2K views
408 downloads
24 bookmarked
Posted 13 Nov 2017
Licenced CPOL

Getting Started with Angular5 and ASP.NET Core

, 20 Nov 2017
Rate this:
Please Sign up or sign in to vote.
In this article, we will see how to start working with Angular 5 and ASP.NET Core using Angular5TemplateCore

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

syed shanu
Team Leader
India India
Microsoft MVP | Code Project MVP | CSharp Corner MVP | Author | Blogger and always happy to Share what he knows to others. MyBlog

My Interview on Microsoft TechNet Wiki Ninja Link

You may also be interested in...

Pro
Pro

Comments and Discussions

 
BugThis is not angular5! Pin
Member 1059853018-Apr-18 1:32
memberMember 1059853018-Apr-18 1:32 
QuestionWhy do you mix Angular and ASP.NET MVC ? Pin
Patrick Krause21-Nov-17 21:41
professionalPatrick Krause21-Nov-17 21:41 
AnswerRe: Why do you mix Angular and ASP.NET MVC ? Pin
syed shanu23-Nov-17 15:13
mvpsyed shanu23-Nov-17 15:13 
PraiseAbout Article on Angular5 Pin
Khaja Moiz20-Nov-17 3:21
memberKhaja Moiz20-Nov-17 3:21 
QuestionGetting Exception Pin
LogicPlayer18-Nov-17 3:36
memberLogicPlayer18-Nov-17 3:36 
AnswerRe: Getting Exception Pin
syed shanu19-Nov-17 23:59
mvpsyed shanu19-Nov-17 23:59 
QuestionRunning app after install produces an exception ... Pin
GrumpyPants16-Nov-17 6:15
memberGrumpyPants16-Nov-17 6:15 
AnswerRe: Running app after install produces an exception ... Pin
syed shanu19-Nov-17 23:59
mvpsyed shanu19-Nov-17 23:59 
GeneralMy vote of 5 Pin
san2debug16-Nov-17 3:15
professionalsan2debug16-Nov-17 3:15 
QuestionMessage Closed Pin
14-Nov-17 23:14
memberMember 1352218714-Nov-17 23:14 
QuestionGreat Article Pin
rahhh14-Nov-17 22:39
memberrahhh14-Nov-17 22:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180618.1 | Last Updated 20 Nov 2017
Article Copyright 2017 by syed shanu
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid