1)app.component.html

<h1>Student Manager</h1>
<router-outlet></router-outlet>

2)app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

3)app.module.ts

import { routingModule } from './app.route';
import { StudentDeleteComponent } from './student-delete.component';
import { StudentUpdateComponent } from './student-update.component';
import { FormsModule } from '@angular/forms';
import { StudentFormComponent } from './student-form.component';
import { BrowserModule } from '@angular/platform-browser';
import { StudentService } from './student.service';
import { StudentListComponent } from './student-list.component';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HttpModule } from "@angular/http";

@NgModule({
    imports: [BrowserModule,HttpModule,FormsModule,routingModule],
    declarations: [AppComponent,StudentListComponent,StudentFormComponent,StudentUpdateComponent,
                    StudentDeleteComponent],
    providers: [StudentService],
    bootstrap:[AppComponent]
})
export class AppModule { }

4)app.route.ts

import { StudentListComponent } from './student-list.component';
import { StudentDeleteComponent } from './student-delete.component';
import { StudentUpdateComponent } from './student-update.component';
import { StudentFormComponent } from './student-form.component';
import { Routes,RouterModule } from "@angular/router";

const routes:Routes=[
    {
        path:'create',
        component:StudentFormComponent
    },
    {
        path:'update/:id',
        component:StudentUpdateComponent
    },
    {
        path:'delete/:id',
        component:StudentDeleteComponent
    },
    {
        path:'list',
        component:StudentListComponent
    },
    {
        path:'',
        redirectTo:'/list',
        pathMatch:'full'
    }
];


export const routingModule = RouterModule.forRoot(routes);

5)student-delete.component.html

<form>

        Id <input type="text" name="id" [(ngModel)]="student.id" (change)="load();"/><br/>
        Name:{{student.name}}<br/>

        <button (click)="delete();">delete</button>
    </form>

6)student-delete.component.ts

import { ActivatedRoute,Router } from '@angular/router';
import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'student-delete',
    templateUrl: 'student-delete.component.html'
})

export class StudentDeleteComponent implements OnInit {

    student:Student;

    constructor(private ss:StudentService,private route:ActivatedRoute,private router:Router) { }

        ngOnInit() {
            let id = this.route.snapshot.params["id"];
            this.load(id);
         }

         load(id) {
            this.ss.getStudentById(id).subscribe(
                (data) => this.student= data
            )
        }

     delete(){

        this.ss.deleteStudent(this.student.id).subscribe(
            (data) => this.router.navigate(["/list"])
        )
     }

}

7)student-form.component.html

<form>

    Id <input type="text" name="id" [(ngModel)]="student.id"/><br/>
    Name <input type="text" name="name" [(ngModel)]="student.name"/><br/>

    <button (click)="insert();">Insert</button>
</form>

8)student-form.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'student-form',
    templateUrl: 'student-form.component.html'
})

export class StudentFormComponent implements OnInit {

    student:Student;

    constructor(private ss:StudentService) { }

    ngOnInit() {
        this.student = new Student();
     }

     insert(){

        this.ss.insertStudent(this.student).subscribe(
            (data) => console.log(data)
        )
     }

}

9)student-list.component.html

<a [routerLink]="['/create']">Register</a>
<table>

    <tr *ngFor="let student of students">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
        <td><a [routerLink]="['/update',student.id]">Update</a></td>
        <td><a [routerLink]="['/delete',student.id]">Delete</a></td>
    </tr>

</table>

)student-list.component.ts

import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'student-list',
    templateUrl: 'student-list.component.html'
})

export class StudentListComponent implements OnInit {

    students:Student[];

    constructor(private ss:StudentService) { }

    ngOnInit() { 
        this.ss.getStudents().subscribe(
            (data) => this.students = data
        )
    }
}

10)student-update.component.html

<form>

        Id <input type="text" name="id" [(ngModel)]="student.id"/><br/>
        Name <input type="text" name="name" [(ngModel)]="student.name"/><br/>

        <button (click)="update();">Update</button>
    </form>

11)student-update.component.ts

import { ActivatedRoute, Router } from '@angular/router';
import { StudentService } from './student.service';
import { Student } from './student';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'student-update',
    templateUrl: 'student-update.component.html'
})

export class StudentUpdateComponent implements OnInit {


    student:Student;

    constructor(private ss:StudentService,private route:ActivatedRoute,private router:Router) { }

    ngOnInit() {
        let id = this.route.snapshot.params["id"];
        this.load(id);
     }

     load(id) {
        this.ss.getStudentById(id).subscribe(
            (data) => this.student= data
        )
    }

     update(){

        this.ss.updateStudent(this.student).subscribe(
            (data) => this.router.navigate(["/list"]);
        )
     }

}

12)student.service.ts

import { Student } from './student';
import { Injectable } from '@angular/core';

import { Http } from "@angular/http";

import { Observable } from "rxjs";

import 'rxjs/add/operator/map';

@Injectable()
export class StudentService {

    constructor(private http:Http) { }

    getStudents(){
        return this.http.get("http://localhost:3000/students").map(
            (response)=>response.json()
        )
    }

    getStudentById(id:number){
        return this.http.get("http://localhost:3000/students/"+id).map(
            (response)=>response.json()
        )
    }

    insertStudent(student:Student){
        return this.http.post("http://localhost:3000/students",student).map(
            (response)=>response.json()
        )
    }

    updateStudent(student:Student){
        return this.http.put("http://localhost:3000/students/"+student.id,student).map(
            (response)=>response.json()
        )
    }

    deleteStudent(id:number){
        return this.http.delete("http://localhost:3000/students/"+id).map(
            (response)=>response.json()
        )
    }load(){
this.ss.getStudentById(this.student.id).subscribe(
(data) => this.student = data
)
}
delete(){
this.ss.deleteStudent(this.student.id).subscribe(
(data) => console.log(data)
)
}
}

}

13)student.ts

export class Student{
    id:number;
    name:string;    
}