Httpclient crud service

angular.json

@@ -128,7 +128,9 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "e2e": {
@@ -174,7 +176,8 @@
     }
   },
   "cli": {
-    "defaultCollection": "@ionic/angular-toolkit"
+    "defaultCollection": "@ionic/angular-toolkit",
+    "analytics": "367aa371-c6ed-45b9-924a-d2e136c6ebee"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {
@@ -184,4 +187,4 @@
       "styleext": "scss"
     }
   }
-}
+}

src/app/app-routing.module.ts

@@ -3,13 +3,23 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'home',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+    path: '', redirectTo: 'student-list', pathMatch: 'full'
   },
   {
-    path: '',
-    redirectTo: 'home',
-    pathMatch: 'full'
+    path: 'student-create',
+    loadChildren: () => import('./student-create/student-create.module').then( m => m.StudentCreatePageModule)
+  },
+  {
+    path: 'student-edit',
+    loadChildren: () => import('./student-edit/student-edit.module').then( m => m.StudentEditPageModule)
+  },
+  {
+    path: 'student-list',
+    loadChildren: () => import('./student-list/student-list.module').then( m => m.StudentListPageModule)
+  },
+  {
+    path: 'student-detail',
+    loadChildren: () => import('./student-detail/student-detail.module').then( m => m.StudentDetailPageModule)
   },
 ];
 

src/app/app.module.ts

@@ -9,10 +9,12 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import { HttpClientModule } from '@angular/common/http'
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [HttpClientModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule],
   providers: [
     StatusBar,
     SplashScreen,

src/app/models/student.spec.ts

@@ -0,0 +1,7 @@
+import { Student } from './student';
+
+describe('Student', () => {
+  it('should create an instance', () => {
+    expect(new Student()).toBeTruthy();
+  });
+});

src/app/models/student.ts

@@ -0,0 +1,6 @@
+export class Student {
+    id: number;
+    name: string;
+    age: string;
+    address: string;
+}

src/app/services/api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/api.service.ts

@@ -0,0 +1,91 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { Student } from '../models/student';
+import { Observable, throwError } from 'rxjs';
+import { retry, catchError } from 'rxjs/operators'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+
+  // API path
+  base_path = 'http://localhost:3000/students';
+
+  constructor(private http: HttpClient) { }
+
+  // Http Options
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json'
+    })
+  }
+
+  // Handle API errors
+  handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // A client-side or network error occurred. Handle it accordingly.
+      console.error('An error occurred:', error.error.message);
+    } else {
+      // The backend returned an unsuccessful response code.
+      // The response body may contain clues as to what went wrong,
+      console.error(
+        `Backend returned code ${error.status}, ` +
+        `body was: ${error.error}`);
+    }
+    // return an observable with a user-facing error message
+    return throwError(
+      'Something bad happened; please try again later.');
+  };
+
+  // Create a new item
+  createItem(item): Observable<Student> {
+    return this.http
+      .post<Student>(this.base_path, JSON.stringify(item), this.httpOptions)
+      .pipe(
+        retry(2),
+        catchError(this.handleError)
+      )
+  }
+
+  // Get single student data by ID
+  getItem(id): Observable<Student> {
+    return this.http
+      .get<Student>(this.base_path + '/' + id)
+      .pipe(
+        retry(2),
+        catchError(this.handleError)
+      )
+  }
+
+  // Get students data
+  getList(): Observable<Student> {
+    return this.http
+      .get<Student>(this.base_path)
+      .pipe(
+        retry(2),
+        catchError(this.handleError)
+      )
+  }
+
+  // Update item by id
+  updateItem(id, item): Observable<Student> {
+    return this.http
+      .put<Student>(this.base_path + '/' + id, JSON.stringify(item), this.httpOptions)
+      .pipe(
+        retry(2),
+        catchError(this.handleError)
+      )
+  }
+
+  // Delete item by id
+  deleteItem(id) {
+    return this.http
+      .delete<Student>(this.base_path + '/' + id, this.httpOptions)
+      .pipe(
+        retry(2),
+        catchError(this.handleError)
+      )
+  }
+
+}

src/app/student-create/student-create-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { StudentCreatePage } from './student-create.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: StudentCreatePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class StudentCreatePageRoutingModule {}

src/app/student-create/student-create.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { StudentCreatePageRoutingModule } from './student-create-routing.module';
+
+import { StudentCreatePage } from './student-create.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    StudentCreatePageRoutingModule
+  ],
+  declarations: [StudentCreatePage]
+})
+export class StudentCreatePageModule {}

src/app/student-create/student-create.page.html

@@ -0,0 +1,25 @@
+<!-- student-create.html -->
+<ion-header>
+  <ion-toolbar color="tertiary">
+    <ion-title>Create Student</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <ion-item>
+    <ion-label>Name</ion-label>
+    <ion-input [(ngModel)]="data.name" placeholder="Enter Name"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Age</ion-label>
+    <ion-input [(ngModel)]="data.age" placeholder="Enter Age"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-button (click)="submitForm()">Add
+    </ion-button>
+  </ion-item>
+
+</ion-content> 

src/app/student-create/student-create.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { StudentCreatePage } from './student-create.page';
+
+describe('StudentCreatePage', () => {
+  let component: StudentCreatePage;
+  let fixture: ComponentFixture<StudentCreatePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StudentCreatePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StudentCreatePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/student-create/student-create.page.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Student } from '../models/student';
+import { ApiService } from '../services/api.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-student-create',
+  templateUrl: './student-create.page.html',
+  styleUrls: ['./student-create.page.scss'],
+})
+export class StudentCreatePage implements OnInit {
+
+  data: Student
+
+  constructor(
+    public apiService: ApiService,
+    public router: Router
+  ) { 
+    this.data = new Student();
+  }
+
+  ngOnInit() {
+  }
+
+  submitForm() {
+    this.apiService.createItem(this.data).subscribe((response) => {
+      this.router.navigate(['student-list']);
+    });
+  }
+}

src/app/student-detail/student-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { StudentDetailPage } from './student-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: StudentDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class StudentDetailPageRoutingModule {}

src/app/student-detail/student-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { StudentDetailPageRoutingModule } from './student-detail-routing.module';
+
+import { StudentDetailPage } from './student-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    StudentDetailPageRoutingModule
+  ],
+  declarations: [StudentDetailPage]
+})
+export class StudentDetailPageModule {}

src/app/student-detail/student-detail.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>student-detail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/student-detail/student-detail.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { StudentDetailPage } from './student-detail.page';
+
+describe('StudentDetailPage', () => {
+  let component: StudentDetailPage;
+  let fixture: ComponentFixture<StudentDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StudentDetailPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StudentDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});