Today, we will see one of the simplest ways to create an Angular 5 app & how to integrate it with ASP.NET Core 2.0 Web API. So, let’s start by having a look at what are the steps involved in creating such an application and we will go through each step in detail.

So, let’s start by going through each step in detail.

Create a new Angular 5 project

Firstly, create an Angular app by executing this command -

ng new ASPNETCOREDEMO --skip-install.

All the Angular file will be added to our project.

ASP.NET Core

Once you are done, execute the following command.

ng-serve

ASP.NET Core

Then, open the mentioned localhost URL in browser.

ASP.NET Core

Now, change the HTML file app.component.html to display the list of items which we plan to fetch from ASP.NET Core Web API.

Now, add the following code in app.component.html.

  1. <h1><span style="color:#285783">Welcome to Angular and ASP.NET Core Demo </span></h1>
  2. <hr />
  3. <li *ngFor="let item of items">
  4. {{item}}
  5. </li>
Then, go to app.component.ts and add the array of string items.
  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'app-root',
  4. templateUrl: './app.component.html',
  5. styleUrls: ['./app.component.css']
  6. })
  7. export class AppComponent {
  8. items: string[];
  9. constructor()
  10. {
  11. this.items = [];
  12. this.items.push("item1");
  13. this.items.push("item2");
  14. console.log(this.items);
  15. }
  16. }

Then, check the output.

ASP.NET Core

Now, move to the second step.

Create a new .NET Web API project within the same folder

So, by executing the below command, we can create a new Web API by using .NET Command CLI.

dot net new web Api

ASP.NET Core

Finally, it creates the new Web API.

So, it comes up with some default files, some default Controllers, and startup class. Let’s go to the default Controller which is created and rename it as itemsController. Now, it matches the name that we are pulling from the client.

Modify the itemsController get method and run the project by executing the dotnet run command.

  1. // GET api/values
  2. [HttpGet]
  3. public IEnumerable<string> Get()
  4. {
  5. return new string[] { "Laptop", "Smart TV", "Smart Phone", "Tablet" };
  6. }
ASP.NET Core

Now, let’s check this.

ASP.NET Core
Now, we need to integrate the Web API with the app by updating angular-cli.json. Ng-app should redirect to .NET Core build directory.

ASP.NET Core

Next, go to startup.cs file and modify the configure method to use the static files and default files which are client-side files. This is the end of the Angular side. Now, we are going to prepare Angular app to read the data from the service. We have to create a Service.

app.service.ts

  1. import { Injectable } from '@angular/core';
  2. import { Http, Response } from '@angular/http';
  3. import { Observable } from 'rxjs/Rx';
  5. import 'rxjs/add/operator/map';
  6. @Injectable()
  7. export class AppService{
  8. constructor(private http: Http)
  9. {
  11. }
  12. getItems(){
  13. let apiUrl = 'api/Items';
  14. return this.http.get(apiUrl)
  15. .map((res: Response) => {return res.json()
  16. });
  17. }
  18. }

App.module.ts file

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import {HttpModule} from '@angular/http';
  3. import { NgModule } from '@angular/core';
  4. import { AppService } from './app.service'
  5. import { AppComponent } from './app.component';
  7. @NgModule({
  8. declarations: [
  9. AppComponent
  10. ],
  11. imports: [
  12. BrowserModule,
  13. HttpModule
  14. ],
  15. providers: [AppService],
  16. bootstrap: [AppComponent]
  17. })
  18. export class AppModule { }

app.component.ts File

  1. import { Component } from '@angular/core';
  2. import { AppService } from './app.service'
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10. items: string[];
  11. constructor(private appService: AppService)
  12. {
  13. this.items = [];
  14. this.populateItems();
  15. }
  17. populateItems()
  18. {
  19. this.appService.getItems().subscribe(res =>{
  20. this.items = res;
  21. })
  22. }
  23. }

app.component.html

  1. <h1><span style="color:#285783">Welcome to Angular and ASP.NET Core Demo </span></h1>
  3. <hr />
  4. <li *ngFor="let item of items">
  5. {{item}}
  6. </li>

Build the app by using ng build command. If the results are successful, then again, execute the service by dotnet run command and see the results on http://localhost:5000/

ASP.NET Core

I hope this will help you. The source code is attatched.