Building an application bank with Spring boot and Ionic part 2

byissamdrmas -
0

Getting Started | Building an Application with Ionic


In this part 2 of bank application we will buid an application with Ionic framewotk

In this tutorials we will build an application bank to create Standing Account and Savings Account the user can do operations deposit, debit or transfer from account to another the admin can add the accounts with balance, tax or loan for any account.


Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy as a native app. This means we need to install a few utilities to get developing.

Installing Ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Ionic Appflow.

Before proceeding, make sure your computer has Node.js installed.

Install the Ionic CLI with npm:


$  npm install -g @ionic/cli

Starting an App

Starting a new Ionic app is incredibly simple. From the command line, run the ionic start command and the CLI will handle the rest.


Here, myApp is the name of the project, blank is the starter template, and the project type is angular.


$  ionic start bank blank

Project structure


Let's go through the files and folders of the app.

/ src

Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Ionic app will take place.


/ app

The App folder is the largest folder because it contains all the code of our ionic app. It has all the components, modules, pages, services and styles you will use to build your app.


This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.


Modals

Create a folder modal in side it add a class Model.ts

src/app/modal/Modal.ts





export interface Account {
   id: number;
   code: string;
   createDate: any;
   balance: number;
}

export interface Client {
   id: number;
   username: string;
   password: string;
   name: string;
   email: string;
   admin: boolean;
   accounts: Account[];
}

export interface Credit extends Operation {}

export interface Operation {
   numberOperation: number;
   operationDate: any;
   amount: number;
   typeOperation: string;
}

export interface SavingsAccount extends Account {
   tax: number;
}

export interface StandingAccount extends Account {
  loan: number;
}

export interface Withdraw extends Operation {}

export interface AmmountResponse {
   amount: number;
}

Angular Services

Angular services are singleton objects that get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.


An example of when to use services would be to transfer data from one controller to another custom service.


Why Should We Use Services in Angular? The separation of concerns is the main reason why Angular services came into existence. An Angular service is a stateless object and provides some very useful functions. These functions can be invoked from any component of Angular, like Controllers, Directives, etc. This helps in dividing the web application into small, different logical units which can be reused.


Create BankService in the service package

-> BankService

src/app/service/bank-service.ts





 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { AmmountResponse, Client, Operation, SavingsAccount, StandingAccount }  from  '../modal/Modal';


@Injectable({
  providedIn: 'root'
})
export class BankService {

  constructor(private http: HttpClient) { }

  checkingAccount(code: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/checkingAccount/${code}`);
  }

  depositOperation(operation: Operation, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/depositOperation/${code}`, operation);
  }

  saveClient(client: Client): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/saveClient`, client);
  }
  
  addStandingAccount(standingAcount: StandingAccount, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/addStandingAccount/${code}`, standingAcount);
  }
  
  addSavingsAccount(savingsAccount: SavingsAccount, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/addSavingsAccount/${code}`, savingsAccount);
  }
  
  debitOperation(ammountResponse: AmmountResponse, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/debitOperation/${code}`, ammountResponse); 
  }
  
  findWithdraws(code: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findWithdraws/${code}`); 
  }
  
  findCredits(code: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findCredits/${code}`); 
  }
  
  transfer(code1: number, code2: number, operation: Operation): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/transfer/${code1}/${code2}`, operation); 
  }
  
  findClients(): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findClients`); 
  }
  
  findClient(id: number): Observable<any> {
     return this.http.get<any>(`http://localhost:8080/api/findClient/${id}`); 
  }
  
  updateClient(client: Client, id: number): Observable<any> {
     return this.http.put<any>(`http://localhost:8080/api/updateClient/${id}`, client);
  }
  
  findStandingAccountAccounts(id: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findStandingAccountAccounts/${id}`); 
  }
  
  findSavingsAccountAccounts(id: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findSavingsAccountAccounts/${id}`); 
  }
  
  findAccountById(id: number): Observable<any> {
     return this.http.get<any>(`http://localhost:8080/api/findAccountById/${id}`); 
  }
  
  findAccountsForClient(id: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findAccountsForClient/${id}`); 
  }
  
  editStandingAccount(standingAccount: StandingAccount, id: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/editStandingAccount/${id}`, standingAccount); 
  }
  
  editSavingsAccount(savingsAccount: SavingsAccount, id: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/editSavingsAccount/${id}`, savingsAccount); 
  }
}

Create pages

Now we'll continue with the project by adding pages which are the basic buildings of an Ionic app. So let's get started. You can create pages either manually or generating them using the Ionic CLI v5 which is the recommended method. In this guide we'll look first at how to create a page generate it with the Ionic CLI, then how to add it to the project.

-> login

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page login

We will use these components

- login.page.ts
- login.page.html

src/app/login.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router}  from  '@angular/router';
 import  { Client }  from  '../modal/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  progressBar = false;
  client: Client = {} as Client;

  constructor(private bankService: BankService, private router: Router) { }

  ngOnInit() { }

   addClient() {
      this.bankService.saveClient(this.client).subscribe((client) => {
      this.client = client;
      this.router.navigate(["/find-clients/", client.id]);
    });
  }
  
}

src/app/login.page.html





<ion-header>
<ion-toolbar color="tertiary">
  <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="person-circle-outline"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Login to your bank</ion-title>
</ion-toolbar>
</ion-header>

<div style="margin: 40px auto;">
  <ion-avatar>
    <img src="https://www.kindpng.com/picc/m/78-785975_icon-profile-bio-avatar-person-symbol-chat-icon.png">
  </ion-avatar>
</div>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Please login to access your account</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)="addClient()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="text" id="username" placeholder="Enter username" name="username" [(ngModel)]="client.username"
            #username="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="password" id="password" placeholder="Enter password" name="password"
            [(ngModel)]="client.password" #password="ngModel" required></ion-input>
        </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="username.invalid || password.invalid">Login</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page update-client

We will use these components

- update-client.page.ts
- update-client.page.html

src/app/update-client.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Client }  from  '../modal/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-update-client',
  templateUrl: './login.page.html',
  styleUrls: ['./update-client.page.scss']
})
export class LoginPage implements OnInit {
  progressBar = false;
  client: Client = {} as Client;
  id: number;
  
  constructor(private bankService: BankService) { }

  ngOnInit() { 
       this.showProgressBar = true;
      this.bankService.findClient(this.id).subscribe(client => {
       this.client = client;
    });
  }

   updateClient() {
      this.bankService.updateClient(this.client, this.id).subscribe((client) => {
      this.client = client;
      this.cancel();
    });
  }
  
  cancel() {
   window.location.reload();
  }
  
}

src/app/update-client.page.html





<ion-header>
<ion-toolbar color="tertiary">
  <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="person-circle-outline"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Update your account</ion-title>
</ion-toolbar>
</ion-header>

<div style="margin: 40px auto;">
  <ion-avatar>
    <img src="https://www.kindpng.com/picc/m/78-785975_icon-profile-bio-avatar-person-symbol-chat-icon.png">
  </ion-avatar>
</div>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

    <ion-card-content>
      <form name="client" (ngSubmit)="updateClient()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="text" id="username" placeholder="Enter username" name="username" [(ngModel)]="client.username"
            #username="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="password" id="password" placeholder="Enter password" name="password"
            [(ngModel)]="client.password" #password="ngModel" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-input type="text" id="name" placeholder="Enter name" name="name" [(ngModel)]="client.name"
            #name="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="text" id="email" placeholder="Enter email" name="email"
            [(ngModel)]="client.email" #email="ngModel" required></ion-input>
        </ion-item>
        
        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="username.invalid || password.invalid || name.invalid || email.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page find-clients

We will use these components

- app-find-clients.ts
- app-find-clients.html

src/app/app-find-clients.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { Client }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';
 import  { ModalController }  from  '@ionic/angular'';
 import  { AddSavingsAccountPage }  from  '../add-savings-account/add-savings-account.page';
 import  { AddStandingAccountPage }  from  '../add-standing-account/add-standing-account.page';
 import  { UpdateClientPage }  from  '../update-client/update-client.page';

@Component({
  selector: 'app-find-clients',
  templateUrl: './app-find-clients.page.html',
  styleUrls: ['./app-find-clients.page.scss']
})
export class FindClientsPage implements OnInit {
  clients: Client[];
  client: Client = {} as Client;
  id: number;
  accountsAdded = 0;
  standingAccount: any;

  techs = [
    {
      'title': 'Contacts',
      'icon': 'call-outline'
    },
    {
      'title': 'Products',
      'icon': 'card-outline'
    },
    {
      'title': 'Warning',
      'icon': 'warning'
    },
    {
      'title': 'Help',
      'icon': 'help-circle'
    }
  ];

  constructor(private route: ActivatedRoute, private bankService: BankService,
    private modalController: ModalController, private router: Router) { }

  ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.bankService.findClient(this.id).subscribe(client => {
     this.client = client;
     this.accountsAdded = this.client.accounts.length;
   });
   this.bankService.findClients().subscribe(clients => {
     this.clients = clients;
   });
  }
  
  logout() {
    this.router.navigateByUrl("/login")
  }
  
  async updateClient(id: number) {
    const modal = await this.modalController.create({
      component: UpdateClientPage,
      swipeToClose: true,
      componentProps: {id}
    });
    return await modal.present();
  }
  
    async addStandingAccount(id: number) {
    const modal = await this.modalController.create({
      component: AddStandingAccountPage,
      swipeToClose: true,
      componentProps: {id}
    });
    return await modal.present();
  }
  
    async addSavingsAccount(id: number) {
    const modal = await this.modalController.create({
      component: AddSavingsAccountPage,
      swipeToClose: true,
      componentProps: {id}
    });
    return await modal.present();
  }

}

src/app/app-find-clients.html





<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="updateClient(client.id)" *ngIf="client.name==null || client.email==null">
      <ion-button>
        <ion-icon slot="icon-only" name="person-add-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Welcome {{client.username}} </ion-title>
    <ion-buttons slot="primary" (click)="logout()">
      <ion-button color="danger" fill="outline">
        Logout
        <ion-icon slot="end" name="add-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar color="danger" *ngIf="accountsAdded==0">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="alert-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>You have to create your account </ion-title>
  </ion-toolbar>
  <ion-toolbar color="tertiary" *ngIf="accountsAdded >= 1" style="cursor: pointer" (click)="checkingAccount(client.id)">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="cash-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Checking your account</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  <ion-list *ngFor="let tech of techs">
    <ion-item button color="light">
      <ion-icon slot="start" name="{{tech.icon}}" color="danger"></ion-icon>
      <ion-label>
        <h3>{{tech.title}}</h3>
      </ion-label>
    </ion-item>
  </ion-list><br/>

  <ion-card *ngIf="client.admin">
    <ion-card-header>
      <ion-card-subtitle>Clents</ion-card-subtitle>
      <ion-card-title>Add account to a client</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-list *ngFor="let client of clients">
        <ion-item>
          <ion-label>
            <h3>{{client.name}} - {{client.username}}</h3>
          </ion-label>
          <ion-icon slot="end" name="create-outline" color="primary" style="cursor: pointer"
            [routerLink]="['/find-account/', client.id]"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-button size="small" color="warning" (click)="addStandingAccount(client.id)">Add standing account
          </ion-button>
          <ion-button size="small" color="danger" (click)="addSavingsAccount(client.id)">Add savings account
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page add-savings-account

We will use these components

- add-savings-account.ts
- add-savings-account.html

src/app/add-savings-account.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Client, SavingsAccount }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-add-savings-account',
  templateUrl: './add-savings-account.page.html',
  styleUrls: ['./add-savings-account.page.scss']
})
export class AddSavingsAccountPage implements OnInit {
  progressBar = false;
  savingsAccountExist = 0;  
  savingsAccount: SavingsAccount = {} as SavingsAccount;
  client: Client = {} as Client;  
  id: number;
  
  constructor(private bankService: BankService) { }
  
   ngOnInit() {
    this.bankService.findClient(this.id).subscribe(client => {
      this.client = client;
      this.bankService.findSavingsAccountAccounts(this.client.id).subscribe(savingsAccount => {
        this.savingsAccountExist = savingsAccount.length;
      })
    });
  }
  addStandingAccount() {
    this.showProgressBar = true;
    this.bankService.addSavingsAccount(this.savingsAccount, this.id).subscribe(savingsAccount => {
      this.savingsAccount = savingsAccount;
      this.cancel();
    })
  }
  cancel() {
   window.location.reload();
  }
}

src/app/add-savings-account.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Please a savings account for {{client.name}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)="addStandingAccount()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="balance" placeholder="Enter balance" name="balance" [(ngModel)]="savingsAccount.balance"
            #balance="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="number" id="tax" placeholder="Enter tax" name="tax"
            [(ngModel)]="savingsAccount.tax" #tax="ngModel" required></ion-input>
        </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="balance.invalid || tax.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page add-standing-account

We will use these components

- add-standing-account.ts
- add-standing-account.html

src/app/add-standing-account.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Client, StandingAccount }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-add-standing-account',
  templateUrl: './add-standing-account.page.html',
  styleUrls: ['./add-standing-account.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  progressBar = false;
  standingAccountExist = 0;  
  standingAccount: StandingAccount = {} as StandingAccount;
  client: Client = {} as Client;  
  id: number;
  
  constructor(private bankService: BankService) { }
  
   ngOnInit() {
    this.bankService.findClient(this.id).subscribe(client => {
      this.client = client;
      this.bankService.findStandingAccountAccounts(this.client.id).subscribe(standingAccount => {
        this.standingAccountExist = standingAccount.length;
      })
    });
  }
   addStandingAccount() {
    this.showProgressBar = true;
    this.bankService.addStandingAccount(this.standingAccount, this.id).subscribe(standingAccount => {
      this.standingAccount = standingAccount;
      this.cancel();
    })
  }
  cancel() {
   window.location.reload();
  }
}

src/app/add-savings-account.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Please a astandig account for {{client.name}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)=" addStandingAccount()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="balance" placeholder="Enter balance" name="balance" [(ngModel)]="standingAccount.balance"
            #balance="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="number" id="loan" placeholder="Enter loan" name="loan"
            [(ngModel)]="standingAccount.loan" #loan="ngModel" required></ion-input>
        </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="balance.invalid || loan.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page checking-account

We will use these components

- checking-account.ts
- checking-account.html

src/app/checking-account.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Account, SavingsAccount, StandingAccount}  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';
 import  { ModalController }  from  '@ionic/angular';
 import  { DebitPage }  from  '../debit/debit.page';
 import  { DepositPage }  from  '../deposit/deposit.page';
 import  { OperationPage }  from  '../operation/operation.page"';
 import  { TransferPage }  from  '../transfer/transfer.page';

@Component({
  selector: 'app-checking-account',
  templateUrl: './checking-account.page.html',
  styleUrls: ['./checking-account.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  savingsAccounts: SavingsAccount[];
  standingAccounts: StandingAccount[];
  code: any;  
  account: Account = {} as Account;
  savingsAccount: SavingsAccount = {} as SavingsAccount;  
  id: number;
   
  constructor(private bankService: BankService, private route: ActivatedRoute, private router: Router, private modalController: ModalController) { }
  
   ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.bankService.findStandingAccountAccounts(this.id).subscribe((standingAccounts) => {
        this.standingAccounts = standingAccounts;
      });
    this.bankService.findSavingsAccountAccounts(this.id).subscribe((savingsAccounts) => {
        this.savingsAccounts = savingsAccounts;
      });
  }

  cancel() {
   this.router.navigate(["/find-clients/", this.id]);
  }
  
  async doOperation(id) {
    const modal = await this.modalController.create({
      component: OperationPage,
      swipeToClose: true,
      componentProps: { id },
    });
    return await modal.present();
  }
  async depositOperation(id) {
    const modal = await this.modalController.create({
      component: DepositPage,
      swipeToClose: true,
      componentProps: { id },
    });
    return await modal.present();
  }
  async debitOperation(id) {
    const modal = await this.modalController.create({
      component: DebitPage,
      swipeToClose: true,
      componentProps: { id },
    });
    return await modal.present();
  }
    async transferCode1(code1, id) {
    const modal = await this.modalController.create({
      component: TransferPage,
      swipeToClose: true,
      componentProps: {code1, id },
    });
    return await modal.present();
  }
    async transferCode2(code2, id) {
    const modal = await this.modalController.create({
      component: TransferPage,,
      swipeToClose: true,
      componentProps: {code2, id },
    });
    return await modal.present();
  }
 cancel() {
   this.router.navigate(["/login/"]);
  }
}

src/app/add-savings-account.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
    <ion-buttons (click)="logout()" slot="primary">
      <ion-button color="light" fill="outline">
      Logout
        <ion-icon slot="end" name="add-outline"></ion-icon>
      </ion-button>
  </ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content>

  <ion-card *ngIf="stadingAccounts!=null">
    <ion-card-header color="light">
      <ion-card-subtitle>Stading Account</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
    
     <ion-card-content>
      <ion-list *ngFor="let stading of stadingAccounts">
        <div style="margin: auto 100px; text-align: center; margin-bottom: 20px;">
          <div style="width: 230px; background-color: #9b59b6; border-radius: 5%; color: #ecf0f1;">
            <h1 style="font-size: 50px; margin-top: 20px;">
              {{stading.balance}},00
            </h1>
          </div>
          <br />
          <ion-text color="dark">
            <h1 style="text-transform: uppercase;">No: {{stading.code}}</h1>
          </ion-text>
          <ion-text color="danger">
            <h5>{{stading.createDate | date}}</h5>
          </ion-text>
          <ion-button size="small" fill="outline" color="primary" (click)="doOperation(stading.id)">Operations
          </ion-button>
        </div>
        <ion-row>
          <ion-col>
            <ion-button expand="full" color="success" (click)="depositOperation(stading.id)">Deposit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="danger" [disabled]="stading.balance==0" (click)="debitOperation(stading.id)">Debit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="warning" [disabled]="stading.balance==0" (click)="transferCode1(stading.id, id)">Transfer</ion-button>
          </ion-col>
        </ion-row>
      </ion-list>
    </ion-card>
    
      <ion-card *ngIf="savingsAccounts!=null">
    <ion-card-header color="light">
      <ion-card-subtitle>Savings Account</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
    
     <ion-card-content>
      <ion-list *ngFor="let stading of stadingAccounts">
        <div style="margin: auto 100px; text-align: center; margin-bottom: 20px;">
          <div style="width: 230px; background-color: #9b59b6; border-radius: 5%; color: #ecf0f1;">
            <h1 style="font-size: 50px; margin-top: 20px;">
              {{savingsAccount.balance}},00
            </h1>
          </div>
          <br />
          <ion-text color="dark">
            <h1 style="text-transform: uppercase;">No: {{savingsAccount.code}}</h1>
          </ion-text>
          <ion-text color="danger">
            <h5>{{savingsAccount.createDate | date}}</h5>
          </ion-text>
          <ion-button size="small" fill="outline" color="primary" (click)="doOperation(savingsAccount.id)">Operations
          </ion-button>
        </div>
        <ion-row>
          <ion-col>
            <ion-button expand="full" color="success" (click)="depositOperation(savingsAccount.id)">Deposit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="danger" [disabled]="savingsAccount.balance==0" (click)="debitOperation(savingsAccount.id)">Debit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="warning" [disabled]="savingsAccount.balance==0" (click)="transferCode2(savingsAccount.id, id)">Transfer</ion-button>
          </ion-col>
        </ion-row>
      </ion-list>
    </ion-card>
  
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page debit

We will use these components

- debit.ts
- debit.html

src/app/debit.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation, Account }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-debit',
  templateUrl: './debit.page.html',
  styleUrls: ['./debit.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  progressBar = false;
  operation: Operation = {} as Operation;
  account: Account = {} as Account;  
  id: number;
  
  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    this.bankService.findAccountById(this.id).subscribe(account => {
      this.account = account;
    });
  }
  debitOperation() {
    this.showProgressBar = true;
    this.bankService.debitOperation(this.standingAccount, this.id).subscribe(operation => {
      this.operation = operation;
      window.location.reload();
    })
  }
  cancel() {
   this.modalController.dismiss();
  }
}

src/app/debit.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Add debit for <strong style="text-transform: uppercase; color:#c0392b">{{account.code}}</strong></ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)=" debitOperation()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="amount" placeholder="Enter amount" name="amount" [(ngModel)]="operation.amount"
            #amount="ngModel" required></ion-input>
       </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page deposit

We will use these components

- deposit.ts
- deposit.html

src/app/deposit.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation, Account }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-deposit',
  templateUrl: './deposit.page.html',
  styleUrls: ['./deposit.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  progressBar = false;
  operation: Operation = {} as Operation;
  account: Account = {} as Account;  
  id: number;
  
  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    this.bankService.findAccountById(this.id).subscribe(account => {
      this.account = account;
    });
  }
  depositOperation() {
    this.showProgressBar = true;
    this.bankService.depositOperation(this.standingAccount, this.id).subscribe(operation => {
      this.operation = operation;
      window.location.reload();
    })
  }
  cancel() {
   this.modalController.dismiss();
  }
}

src/app/deposit.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Add deposit for <strong style="text-transform: uppercase; color:#c0392b">{{account.code}}</strong></ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)="depositOperation()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="amount" placeholder="Enter amount" name="amount" [(ngModel)]="operation.amount"
            #amount="ngModel" required></ion-input>
       </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page transfer

We will use these components

- transfer.ts
- transfer.html

src/app/transfer.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation, Account }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.page.html',
  styleUrls: ['./transfer.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  savingsAccountCode: any = {};
  standingAccountCode: any = {};  
  operation: Operation = {} as Operation;
  accounts: Account[];  
  id: number;
  titleFrom: number;  
  titleTo: number;
  code1: number;
  code2: number;
  progressBar = false;  
  showTransferCode1 = false;
  showTransferCode2 = false;
  showMessageError = false;

  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    if(this.code1==null) {
      this.bankService.findAccountsForClient(this.id).subscribe(accounts => {
        this.accounts = accounts;
        this.standingAccountCode = this.accounts.find(x => x.id != this.code2);
        this.code1 = this.standingAccountCode.id;
        this.titleTo = this.standingAccountCode.code;
        this.bankService.findAccountById(this.code2).subscribe(savingsAccountCode => {
          this.savingsAccountCode = savingsAccountCode;
          this.titleFrom = this.savingsAccountCode.code;
          this.showTransferCode2 = true;
        })
      });
    }
    if(this.code2==null) {
      this.bankService.findAccountsForClient(this.id).subscribe(accounts => {
        this.accounts = accounts;
        this.savingsAccountCode = this.accounts.find(x => x.id != this.code1);
        this.code2 = this.savingsAccountCode.id;
        this.titleTo = this.savingsAccountCode.code;
        this.bankService.findAccountById(this.code1).subscribe(standingAccountCode => {
          this.standingAccountCode = standingAccountCode;
          this.titleFrom = this.standingAccountCode.code;
          this.showTransferCode1 = true;
        } )
      });
    }
  }
  cancel() {
   this.modalController.dismiss();
  }
  
  transferCode1() {
    this.bankService.transfer(this.code2, this.code1, this.operation).subscribe(operation => {
      this.operation = operation;
      this.showMessageError = false
      window.location.reload();
    }), 
    console.error(this.showMessageError = true);    
   }
   
  transferCode2() {
    this.bankService.transfer(this.code1, this.code2, this.operation).subscribe(operation => {
      this.operation = operation;
      this.showMessageError = false
      window.location.reload();
    }), 
    console.error(this.showMessageError = true);    
   }
}

src/app/transfer.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Transfer</ion-card-title>
    </ion-card-header>
  </ion-card>

  <ion-card-header>
    <ion-card-title>From <strong style="text-transform: uppercase; color:#c0392b">{{titleFrom}}</strong> Account To  <strong style="text-transform: uppercase; color:#16a085">{{titleTo}} </strong>Account </ion-card-title>
  </ion-card-header>
  
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    
    <ion-text color="danger" *ngIf="showMessageError">
      <h1 style="margin-left: 20px;">Insufficient balance</h1>
    </ion-text>
    
    <ion-card-content>
      <form name="client" (ngSubmit)="depositOperation()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="amount" placeholder="Enter amount" name="amount" [(ngModel)]="operation.amount"
            #amount="ngModel" required></ion-input>
       </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid" (click)="transferCode1()" *ngIf="showTransferCode1">Save</ion-button>
          
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid" (click)="transferCode2()" *ngIf="showTransferCode2">Save</ion-button>
          
      </form>

   </ion-card-content>
  </ion-card>
  
  <ion-card>
    <ion-card-content>
      <ion-list>
      <ion-item color="warning">
        <ion-label>
          {{standingAccountCode.code}} - <strong>{{standingAccountCode.balance}}</strong>
        </ion-label>
      </ion-item>
     </ion-list>
    </ion-card>
  </ion-card-content>
  
    <ion-card>
    <ion-card-content>
      <ion-list>
      <ion-item color="warning">
        <ion-label>
          {{savingsAccountCode.code}} - <strong>{{savingsAccountCode.balance}}</strong>
        </ion-label>
      </ion-item>
     </ion-list>
    </ion-card>
  </ion-card-content>
  
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page operation

We will use these components

- operation.ts
- operation.html

src/app/operation.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-operation',
  templateUrl: './operation.page.html',
  styleUrls: ['./operation.page.scss']
})
export class OperationPage implements OnInit {
  operations: Operation[];  
  id: number;
  
  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    this.bankService.checkingAccount(this.id).subscribe(operations => {
      this.operations = operations;
    })
    }

  cancel() {
   this.modalController.dismiss();
  }
  
}

src/app/operation.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Operations</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-list>
      <ion-item *ngFor="let o of operations">
         <ion-label>
          {{o.amount}}$ - {{o.typeOperation}} - {{o.operationDate|date}}
        </ion-label>
      </ion-item>
     </ion-list>

  </ion-card-content>
 </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page find-account

We will use these components

- find-account.ts
- find-account.html

src/app/find-account.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  SavingsAccount, StandingAccount  }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';
 import  { ActivatedRoute, Router  }  from  '@angular/router';
 import  { EditAccountPage }  from  '../edit-account/edit-account.page;

@Component({
  selector: 'app-find-account',
  templateUrl: './find-account.page.html',
  styleUrls: ['./find-account.page.scss']
})
export class OperationPage implements OnInit {
  savingsAccounts: SavingsAccount[];  
  standingAccounts: StandingAccount[];   
  id: number;

  constructor(private bankService: BankService, private modalController: ModalController, private  route: ActivatedRoute, private  router: Router) { }
  
   ngOnInit() {
     this.id = this.route.snapshot.params.id;
     this.bankService.findSavingsAccountAccounts(this.id).subscribe(savingsAccounts => {
      this.savingsAccounts = savingsAccounts;
    })
    this.bankService.findStandingAccountAccounts(this.id).subscribe(standingAccounts => {
      this.standingAccounts = standingAccounts;
    })
    }

  cancel() {
   this.router.navigate(["/find-clients/", this.id]);
  }
 async editTax(idTax) {
    const modal = await this.modalController.create({
      component: EditAccountPage,
      swipeToClose: true,
      componentProps: {idTax},
    });
    return await modal.present();
  }
 async editLoan(idLoan) {
    const modal = await this.modalController.create({
      component: EditAccountPage,
      swipeToClose: true,
      componentProps: {idLoan},
    });
    return await modal.present();
  }
}

src/app/find-account.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-list *ngFor="let savings of savingsAccount">
      <ion-item color="warning">
         <ion-label>
          {{savings.code}} - <strong>{{savings.balance}}</strong>
        </ion-label>
      </ion-item>
     <ion-item button color="light" (click)="editTax(savings.id)">
          Update tax ({{savings.tax}})
      </ion-item>
     </ion-list>
  </ion-card-content>
 </ion-card>
 
   <ion-card>
    <ion-card-content>
      <ion-list *ngFor="let standig of standingAccount">
      <ion-item color="warning">
         <ion-label>
          {{standig.code}} - <strong>{{standig.balance}}</strong>
        </ion-label>
      </ion-item>
     <ion-item button color="light" (click)="editLoan(standig.id)">
          Update loan ({{standig.loan}})
      </ion-item>
     </ion-list>
  </ion-card-content>
 </ion-card>
 
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions: 


$  ng generate page edit-account

We will use these components

- edit-account.ts
- edit-account.html

src/app/edit-account.ts





 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  SavingsAccount, StandingAccount  }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-edit-account',
  templateUrl: './edit-account.page.html',
  styleUrls: ['./edit-account.page.scss']
})
export class OperationPage implements OnInit {
  savingsAccount: SavingsAccount = {} as SavingsAccount ;  
  standingAccount: StandingAccount = {} as StandingAccount;   
  idTax: number;
  idLoan: number;  
  progressBar = false;
  showEditTax = false;
  showEditLoan = false;    

  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    if(this.idTax!=null) {
    this.bankService.findAccountById(this.idTax).subscribe(savingsAccount => {
      this.savingsAccount = savingsAccount;
      this.showEditTax = true;
    })
    }
    if(this.idLoan!=null) {
      this.bankService.findAccountById(this.idLoan).subscribe(standingAccount => {
        this.standingAccount = standingAccount;
        this.showEditLoan = true;
      });
    }
    }

  cancel() {
   this.modalController.dismiss();
  }
  addStandingAccountTax() {
    this.showProgressBar = true;
    this.bankService.editSavingsAccount(this.savingsAccount, this.idTax).subscribe(savingsAccount => {
      this.savingsAccount = savingsAccount;
      window.location.reload();
    })
  }
  addStandingAccountLoan() {
    this.showProgressBar = true;
    this.bankService.editStandingAccount(this.standingAccount, this.idLoan).subscribe(standingAccount => {
      this.standingAccount = standingAccount;
      window.location.reload();
    })
  }
}

src/app/edit-account.html





<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>

  <ion-card *ngIf="showEditTax">
    <ion-card-header>
      <ion-card-title>Update tax </ion-card-title>
    </ion-card-header>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

  <ion-card-content>
      <form name="savingsAccount" (ngSubmit)="addStandingAccountTax()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" placeholder="Enter tax" name="tax" [(ngModel)]="savingsAccount.tax" #tax="ngModel"
            required></ion-input>
        </ion-item> <br>

        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block" [disabled]="tax.invalid">
          Add</ion-button>
      </form>     
  </ion-card-content>
 </ion-card>
 
   <ion-card *ngIf="showEditLoan">
    <ion-card-header>
      <ion-card-title>Update loan</ion-card-title>
    </ion-card-header>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

  <ion-card-content>
      <form name="savingsAccount" (ngSubmit)="addStandingAccountLoan()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" placeholder="Enter loan" name="loan" [(ngModel)]="standingAccount.loan" #loan="ngModel"
            required></ion-input>
        </ion-item><br>

        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block" [disabled]="loan.invalid">
          Add</ion-button>
      </form>     
  </ion-card-content>
 </ion-card>
 
</ion-content>

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.


By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.


app-routing-module.ts

src/app/app-routing.module.ts




import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'find-clients/:id',
    loadChildren: () => import('./find-clients/find-clients.module').then( m => m.FindClientsPageModule)
  },
  {
    path: 'update-client',
    loadChildren: () => import('./update-client/update-client.module').then( m => m.UpdateClientPageModule)
  },
  {
    path: 'add-standing-account',
    loadChildren: () => import('./add-standing-account/add-standing-account.module').then( m => m.AddStandingAccountPageModule)
  },
  {
    path: 'add-savings-account',
    loadChildren: () => import('./add-savings-account/add-savings-account.module').then( m => m.AddSavingsAccountPageModule)
  },
  {
    path: 'checking-account/:id',
    loadChildren: () => import('./checking-account/checking-account.module').then( m => m.CheckingAccountPageModule)
  },
  {
    path: 'operation',
    loadChildren: () => import('./operation/operation.module').then( m => m.OperationPageModule)
  },
  {
    path: 'deposit',
    loadChildren: () => import('./deposit/deposit.module').then( m => m.DepositPageModule)
  },
  {
    path: 'debit',
    loadChildren: () => import('./debit/debit.module').then( m => m.DebitPageModule)
  },
  {
    path: 'transfer',
    loadChildren: () => import('./transfer/transfer.module').then( m => m.TransferPageModule)
  },
  {
    path: 'find-account/:id',
    loadChildren: () => import('./find-account/find-account.module').then( m => m.FindAccountPageModule)
  },
  {
    path: 'edit-account',
    loadChildren: () => import('./edit-account/edit-account.module').then( m => m.EditAccountPageModule)
  },    
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgModules and JavaScript modules

The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are complementary module systems that you can use together to write your apps.


In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.


app-module.ts


src/app/app-module.ts





import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,     
    FormsModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Conclusion

Now we have an overview of Spring Boot CRUD example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well, we ware creating an Ionic app with Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.





Tags

You may like these posts

Post a Comment

Previous Post Next Post


Follow us on facebook