We 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.
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).
Install Nod.js
Install the Node.js version 9.0 or above on your computer.
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.
Now, it’s time to create our first Angular 5 and ASP.NET Core application.
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.
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.
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.
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.
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, We have created a public variable to display my name as “myname”.
In home.html file we have changed the html design to bind and display the Angular5 component variable.
Refresh the home page we can see my name will be displayed in html page from Angular5 Component along with welcome message.
That's all for now, Happy Coding
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.
Building the Sample
Prerequisites
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 Nod.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.
Description
Now, it’s time to create our first Angular 5 and ASP.NET Core application.
Step 1 Create Angular5TemplateCore
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.
JavaScript
"postinstall": "webpack --config webpack.config.vendor.js"
Build and run your project
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, We have created a public variable to display my name as “myname”.
JavaScript
import { Component } from <a href="mailto:'@angular/core'">'@angular/core'</a>;
@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
public myname = "Ram";
}
In home.html file we have changed the html design to bind and display the Angular5 component variable.
JavaScript
<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.
That's all for now, Happy Coding
