Free Web Development Online Tutorials, Learn to Code
Learn AngularJS, angularjs tutorial, angularjs directive, Angular Project in .Net Core example

Angular Js Project 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.

Prerequisites for this project

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

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
angular project

Functionalities in this angular application
  • 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 following files

student.model.html

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>
            
student.model.ts

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

First import angular framework and initiate the html, css file

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

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

Student Service Controller

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

 
Angular with Asp.Net Core

Othe JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course