#angularjs4

In your VS2017 just create a new DotNet core empty project

Now right click on the project and choose edit csproj file. Open your package manager run the following commands. Make sure you are inside the the correct folder, where the csproj file resides

dotnet add package Microsoft.AspNetCore.Mvc --version 2.0.1

dotnet add package Microsoft.AspNetCore.StaticFiles --version 2.0.1

Add the following line to ignore TypeScript errors for now below the target framework tag in csproj file

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

Now open your  StartUp.cs and make the follwoing changes

Next step is to add a WebAPI Controller class, for the demo program you may have the code written in any way you like, shown below is the snippet that I have used in my project.

public class AdminController : Controller { // GET: api/values [HttpGet] public JsonResult GetAllEmployee() { List obj = new List(); obj.Add("Sudeep"); obj.Add("Sanjeev"); obj.Add("Ashish"); return Json(obj); } }

Pretty self-explanatory as to what this class does.

Next step is extremely crucial, your experience may differ but please close the VS2017 then run the following command.

npm install @angular/cli

When this command has finished run the following command to createa new Angular application iat the same place where .csproj file is located

ng new MyAngularApp --skip-install

Once it is finished , go inside the new directory called  MyAngularApp and copy -all the files and folder to the parent directory 

C:\MyDotNetApp\MyDotNetApp\MyAngularApp copy everything from here to   C:\MyDotNetApp\MyDotNetApp.

Open your  .angular-cli.json and make the following changes

"outDir": "wwwroot",

Change app.component.ts to call the webapi

import { Component, OnInit } from '@angular/core'; import { Headers, Http, RequestOptions, URLSearchParams } from '@angular/http';

@Component({       selector: 'app-root',       templateUrl: './app.component.html',       styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {

 title = 'app';  allEmployees = [];  constructor(private httpService: Http) { }  ngOnInit() {

   this.httpService.get('Admin/GetAllEmployee').subscribe(data => {      this.allEmployees = data.json() as string[];    });  } }

Change the app.component.html to output this data

<div style="text-align:center">   <h1>Hello World</h1>   <ul>       <li *ngFor="let emp of allEmployees">{{emp}}</li>   </ul>

Now go back to command line interface and install all the dependencies

npm install

There is one slight issue with this solution the angular code runs on localhost:4200 and the dotnet code runs on localhost:5000+

To overcome this we need a proxy or else the call to webAPI will fail. In the root create a file called proxy.config.json and enter this code

{ "/Admin": { "target": "http://localhost:64761", "secure": false } }

This is the port on which your dotnet app is running, to find it out just type this command on the command line

dotnet run

To execute your front end type the following command

ng serve --proxy-config proxy.config.json

Navigate to localhost:4200 in a browser and you should see the list of names that you have sent across.

Observe that we have added a simple variable listItemData which is of type object and has three properties. We will use this in our html code to bind to an element property. The variable has been initialized in the constructor.

Moving to our html code, we will bind the property value with our variable.

That is it we have successfully created one way data binding. If you execute this code you should see something like this.