Angular Js Project with .Net Core Example

Here we learn with a practical example by creating an project AngularJs with Asp.net core using visual studio.

So, just open your visual studio 2017 / 2019 and create a project first,

 File => New => Project => Asp.Net Core Web Application => Angular

In default project setup there are some built in functionalities with angular framework and asp.net core MVC, here to simplify the example we create a new functionality from scratch, so you can understand each step of implementation.

To understand the overall implementation one should have understanding of following technologies

• HTML
• JavaScript
• JSON
• TypeScript

Even you don’t know about JSON and TypeScript; don't worry!

Angular Js Project with Asp.Net Core

Now we already learned that Angular framework was actually designed for SPA (Single Page Application), so implementation of any SPA will slightly differ from regular application, here you can consider we have multiple user control or partial view, and main page will remain one, so based on user click we will show the relevant partial view on UI.

Here is the project overview

• Creating a component for students.
• Add new student.
• Fetch and display the student list.

Note: here instead of database we keep the student information in session object (just to avoid database related functionality), so you can more focus on angular related implementation. you can learn how to use session in asp.net core

Create a html file with name "student.model.html", here we display the student list

 <table class='table' *ngIf="students"> <thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
 <tr *ngFor="let s of students">
<td>{{ s.fullname }}</td>
<td>{{ s.address }}</td>
</tr> 
    </tbody>
</table>
            

TpeScript file: This file is like a mediator between html code and server side code, to understand syntax better you should have some understanding of typescript

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
@Component({
    selector: 'student',
    templateUrl: './student.model.html'
})

Here is the object definition with constructor, In constructor we are returning the a student object array

export class StudentDataComponent {
username: string;
password: string;
public students: student[];
constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
http.get(baseUrl + 'api/StudentService/GetStudentList').subscribe(result => {
this.students = result.json() as student[];
}, error => console.error(error));
    }
   
    public addStudent() {
    }
    deserialize(input: any) {
        Object.assign(this, input);
        return this;
    }       
}

Here is the interface with student object properties

interface student {
    fullname: string;
    address: string;
    email: string;
    mobile: string;
    isActive: boolean;
}

Create an API controller for fetching data from database, in this example we have kept hardcoded data just to keep the project short. You can use any mechanism like Entity Framework or Ado.Net to pull data from database

Now we write an asp.net core API controller, and in controller, we fetch data form database and expose data as service.

[Route("api/[controller]")]
public class StudentServiceController : Controller
{
[HttpGet("[action]")]
public IEnumerable<WtrStudent> GetStudentList()
{
List<WtrStudent> _sList = new List<WtrStudent>();
_sList.Add(new WtrStudent() { fullname="Arunav", address="Mumbai" });
_sList.Add(new WtrStudent() { fullname = "Alpesh", address = "Kolkata" });
            return _sList.ToArray();
        }
}

Now let's run the project to see if implementation is done correctly, you should be able to see the student list on screen, set break point to step through the code, so you can understand better how each call is made and the life cycle