{"id":84094,"date":"2019-04-25T15:20:08","date_gmt":"2019-04-25T15:20:08","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=84094"},"modified":"2026-04-15T18:29:24","modified_gmt":"2026-04-15T18:29:24","slug":"building-an-angularjs-application-with-asp-net-core","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/building-an-angularjs-application-with-asp-net-core\/","title":{"rendered":"Angular App with ASP.NET Core API: HTTP Calls and CRUD Integration"},"content":{"rendered":"

Executive Summary<\/h2>\n

This article builds an Angular frontend application connected to an ASP.NET Core Web API – a common modern .NET web architecture. The Angular app uses HttpClient to make HTTP requests to the API, and the project builds up from a basic GET call to a complete CRUD notes application supporting create, read, update, and delete operations through Angular components and services. Visual Studio Community Edition and the latest Angular CLI are the only requirements.<\/strong><\/p>\n

Many applications today have similarities when it comes to separating the front- and back-ends. It means that the back-end can be hosted anywhere: in the cloud or on a dedicated server. There can be many serverless functions. It can be created in any programming language, using any stack tools of your choice. The same can happen to the front-end: you can go from a Single Page Application (SPA) loading everything through Ajax or use any framework to render your data from the server synchronously.<\/p>\n

For SPAs, Angular has always appeared as an excellent choice because of its asynchronous nature, modularization via components, and the templating system which allows easy reuse of pieces of screens and logic. For the back-end, ASP.NET services have proven their value and effectiveness when it comes to speed, security, and even asynchronicity of the endpoints.<\/p>\n

In this article, you\u2019ll learn how to match both worlds in a concise and fully working application for the management of notes built on top of Angular in the front and an ASP.NET API in the back.<\/p>\n

Setting Up<\/h2>\n

First, you\u2019ll need to have Visual Studio Community Edition<\/a> properly installed. Also, make sure to have installed the latest versions of .NET Core and ASP.NET Core frameworks as well. Then, select the option File –> New Project<\/em>, then ASP.NET Core Web Application<\/em>. Fill in the blank spaces as shown in Figure 1.<\/p>\n

<\/p>\n

Figure 1. Creating a new ASP.NET Core application project.<\/p>\n

Once you\u2019ve finished, click OK<\/em>. You\u2019ll be requested to select the project template. Note here that you also have an option for an Angular template which you won\u2019t select since the focus is on learning how Angular works separately from the .NET project itself. It\u2019ll help you to understand both worlds working independently and see how a front-end application usually communicates with the back-end, specifically with Angular projects.<\/p>\n

Select the API option (Figure 2), which will create several files, including a ready-to-use API with the four main HTTP methods for CRUD operations: GET<\/code>, POST<\/code>, PUT<\/code> and DELETE<\/code>. That\u2019ll be useful for testing purposes.<\/p>\n

Remember not to select anything else: you won\u2019t use any authentication mechanism nor Docker support to keep this example simple.<\/p>\n

<\/p>\n

Figure 2. Selecting the project template for ASP.NET Core application.<\/p>\n

Now, set up the configurations for the Angular side. Since you did not install the Angular template in the wizard process, you\u2019ll have to do that manually via command line. Before that, you need to install the latest version of Node.js and npm (Node package manager). It will be helpful to install and configure the proper packages directly from the official CDN sources.<\/p>\n

Navigate to the Node.js website<\/a> and download the proper installer for your OS. Pay attention to the version of your OS, whether it is 32-bit or 64-bit. Conclude the installation just like shown on the Node website instructions. Once you\u2019re done, check the version in your command line:<\/p>\n

node -v\nnpm -v<\/pre>\n
Great. Now, install Angular CLI<\/a>. Angular CLI is a command line interface to scaffold apps for Angular based on its official packages, making the whole process of building an Angular app more productive and concise. For that, run the following command:<\/p>\n
npm install -g @angular\/cli<\/pre>\n
The -g<\/code> flag will make sure to install it globally, that is, for everyone in your machine. Wait until it\u2019s finished and, then, run the second following command:<\/p>\n
ng new angular-simpletalk --skip-install<\/pre>\n
Note: If you don\u2019t have Git installed, a warning message could appear at the end of the command, but don\u2019t worry, it won\u2019t prevent the project from being created.<\/em><\/p>\n
Notice that the command ng<\/em> will only be available once you\u2019ve installed the Angular CLI tool. It is the official command for Angular operations in the command line. The command new<\/code>, in turn, is responsible for creating the whole structure of the project, initializing it and creating the necessary files (HTML, CSS, and JavaScript) with preset configs that\u2019ll be important during development. Figure 3 shows the questions the installer will ask you, such as if you\u2019d like to enable Angular routing to the application (which you\u2019ll say yes, since you\u2019ll need this to navigate through pages in the app), and which stylesheet format you\u2019d like to use (plain CSS, in case).<\/p>\n
<\/p>\n
Figure 3. Creating a new Angular project via Angular CLI.<\/p>\n
This will generate a bunch of folders and files inside the \/angular-simpletalk<\/em> directory. After it\u2019s finished, go to the Visual Studio project, spot these assets and move them to the root directory, the same as the ASP.NET Core files. This is because the files need to be placed at the same level as the ASP.NET project.<\/p>\n
Run these last commands to have the Angular HTTP dependency added as a dependency to the project:<\/p>\n
npm install @angular\/core@latest\nnpm install @angular\/http@latest\nnpm install<\/pre>\n
You\u2019ll need the HTTP package of Angular to make requests to the API.<\/p>\n
Making the First Call to the API<\/h2>\n
To make HTTP requests in Angular, you first need to import the proper modules from the dependency packages imported earlier. Navigate to the \/src\/app\/app.module.ts<\/em> file and modify it as follows:<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\nimport { FormsModule } from '@angular\/forms';\nimport { HttpModule } from '@angular\/http';\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    FormsModule,\n    HttpModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/pre>\n
Notice that you\u2019ve added two new imports: the HTTP and Forms modules. These are required because the application will not only send requests but also send them from web forms in later examples. The rest of the file remains the default.<\/p>\n
Next, comes the component (specifically the file app.component.ts<\/em>) that is responsible for making the request call itself. Change its content to the following:<\/p>\n
import { Component, OnInit } from '@angular\/core';\nimport { Http } from '@angular\/http'\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n  constructor(private _httpService: Http) { }\n  accessPointUrl: string = 'https:\/\/localhost:44324\/api\/values';\n  apiValues: string[] = [];\n  ngOnInit() {\n    this._httpService.get(this.accessPointUrl).subscribe(values => {\n      this.apiValues = values.json() as string[];\n    });\n  }\n}<\/pre>\n
Apart from the component imports Angular usually makes use of when it comes to this type of file, you also include the import of HTTP previously set. The constructor of this component receives the httpService<\/code> as an injected parameter and calls the API inside the ngOnInit<\/code> method, through the get()<\/code>method. Note that the URL of the API is stored in a variable and passed to this method. The subscribe method, in turn, guarantees that the result will be stored asynchronously into the variable apiValues<\/code>, once everything\u2019s done.<\/p>\n
Finally, adapt the app.component.html<\/em> to read the retrieved data. Open it and change its contents to the following:<\/p>\n
<!--The content below is only a placeholder and can be replaced.-->\n<div>\n  <h1>Application says what?<\/h1>\n  <ul>\n    <li *ngFor=\"let value of apiValues\">{{value}}<\/li>\n  <\/ul>\n<\/div>\n<router-outlet><\/router-outlet><\/pre>\n
An Angular directive inside of the <li><\/code> element iterates over the list of values the API returned and was stored into apiValues<\/code> public variable. For now, you\u2019ll keep using the autogenerated API endpoints, that is, those which return hardcoded values just as a matter of testing.<\/p>\n
It happens that the application still won`t work because of a CORS<\/a> problem. You must enable it to allow the Angular application to call an API hosted in a different address. For this, you`ll have to add the following content to the ConfigureServices<\/code> method in Startup<\/code> class:<\/p>\n
services.AddCors(options =>\n      {\n        options.AddPolicy(\"CorsPolicy\",\n            builder => builder.AllowAnyOrigin()\n            .AllowAnyMethod()\n            .AllowAnyHeader()\n            .AllowCredentials());\n      });<\/pre>\n
As well as this one to the Configure<\/em> method:<\/p>\n
app.UseCors(\"CorsPolicy\");<\/pre>\n
To run the application, make sure to first run the API application in the back-end. Then, in the command line, run the following command:<\/p>\n
ng serve<\/pre>\n
It\u2019ll both start your Angular application and watch for file changes. Access the address http:\/\/localhost:4200\/<\/a> with your browser and you\u2019ll see something like:<\/p>\n
<\/p>\n
Figure 4. Showing values from the API with Angular.<\/p>\n
Creating a Notes App CRUD<\/h2>\n
Now, you\u2019ll create a complete application that manages notes from scratch. It\u2019s helpful for you to understand how CRUD operations work in Angular-based apps. Figure 5 shows how the app will look when it\u2019s complete:<\/p>\n
<\/p>\n
Figure 5. The final screen of the Angular app.<\/p>\n
Within the same application, create a new folder called Models<\/em>. It\u2019ll host the POCOs (Plain Old C# Objects). Then create a new class naming it Note.cs<\/em>. Add the following content to it:<\/p>\n
using System.ComponentModel.DataAnnotations;\nnamespace AngularFirstSteps.Models\n{\n  public class Note\n  {\n    public int Id { get; set; }\n    [Required]\n    public string Title { get; set; }\n    [Required]\n    public string Description { get; set; }\n  }\n}<\/pre>\n
It is made of simple attributes and getters and setters. Next, create a new controller class that will store the REST operations for each of the CRUD ones. Give it the name of NotesController.cs<\/em> and add the following content:<\/p>\n
using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing AngularFirstSteps.Models;\nusing Microsoft.AspNetCore.Mvc;\nnamespace AngularFirstSteps.Controllers\n{\n  [Produces(\"application\/json\")]\n  [Route(\"api\/[controller]\")]\n  [ApiController]\n  public class NotesController : ControllerBase\n  {\n    private static List<Note> notes = new List<Note>();\n    private static int count = 0;\n    static NotesController()\n    {\n      Note note1 = new Note\n      {\n        Id = count++,\n        Title = \"30 min run\",\n        Description = \"It's important to your health\"\n      };\n      Note note2 = new Note\n      {\n        Id = count++,\n        Title = \"Call the plumber\",\n        Description = \"To fix the plumbing\"\n      };\n      notes.Add(note1);\n      notes.Add(note2);\n    }\n    \/\/ GET api\/notes\n    [HttpGet]\n    public IEnumerable<Note> Get()\n    {\n      return notes;\n    }\n    \/\/ GET api\/notes\/5\n    [HttpGet(\"{id}\")]\n    public async Task<IActionResult> Get(int id)\n    {\n      return Ok(notes.Where(note => note.Id == id).FirstOrDefault());\n    }\n    \/\/ POST api\/notes\n    [HttpPost]\n    public async Task<IActionResult> Post([FromBody] Note note)\n    {\n      note.Id = count++;\n      notes.Add(note);\n      return CreatedAtAction(\"Get\", new { id = note.Id }, note);\n    }\n    \/\/ PUT api\/notes\/5\n    [HttpPut(\"{id}\")]\n    public async Task<IActionResult> Put(int id, [FromBody] Note note)\n    {\n      Note found = notes.Where(n => n.Id == id).FirstOrDefault();\n      found.Title = note.Title;\n      found.Description = note.Description;\n      return NoContent();\n    }\n    \/\/ DELETE api\/notes\/5\n    [HttpDelete(\"{id}\")]\n    public async Task<IActionResult> Delete(int id)\n    {\n      notes.RemoveAll(n => n.Id == id);\n      return NoContent();\n    }\n  }\n}<\/pre>\n
It\u2019s basically the same thing as the previous Controller class, with the slight difference that each of our endpoints are now async, i.e., the client (Angular application) can make calls to the back-end REST endpoints and wait for them to respond asynchronously via callback functions.<\/p>\n
The connection to a database, or anything like that, will not be covered as not to lose the focus of the article. Here, the operations will be stored in a static list, which will simulate a database, at least while the ASP.NET application is up in the server.<\/p>\n
Now it\u2019s time to set up our new components. There are three components to this app:<\/p>\n
    \n
  1. app.component<\/strong>: it was already created within the application setup. It will call the next two templates;<\/li>\n
  2. notes-listing.component<\/strong>: it will handle the operations of listing in a table the notes were added;<\/li>\n
  3. add-update-notes.component<\/strong>: it will store the form and the other CRUD operation links.<\/li>\n<\/ol>\n
    For that, run the following commands at the command line (inside the \u201c\\AngularFirstSteps\\angular-first-steps\\src\\app\u201d folder):<\/p>\n
    ng generate component NotesListing \nng generate component AddUpdateNotes<\/pre>\n
    Run, in sequence, another command for the creation of an Angular service; this one is responsible for the REST service orchestration:<\/p>\n
    ng generate service NotesService<\/pre>\n
    This will generate the following new folder structures:<\/p>\n
    <\/p>\n
    Figure 6. New components folders.<\/p>\n
    The new components must be included in the app.module.ts<\/em> file, which registers all the components, modules and new services of an Angular app. The final content of the file must be exactly as<\/p>\n
    import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { FormsModule } from '@angular\/forms';\nimport { HttpModule } from '@angular\/http';\nimport { HttpClientModule } from '@angular\/common\/http';\nimport { NotesListingComponent } from '.\/notes-listing\/notes-listing.component';\nimport { AddUpdateNotesComponent } from '.\/add-update-notes\/add-update-notes.component';\nimport { NotesService } from '.\/notes-service.service';\nconst appRoutes: Routes = [\n  { path: '', component: AppComponent }\n];\n@NgModule({\n  declarations: [\n    AppComponent,\n    NotesListingComponent,\n    AddUpdateNotesComponent\n  ],\n  imports: [\n    BrowserModule,\n    RouterModule.forRoot(appRoutes),\n    AppRoutingModule,\n    FormsModule,\n    HttpModule,\n    HttpClientModule\n  ],\n  providers: [NotesService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/pre>\n
    Some basic actions:<\/p>\n