Incorporate service providers into models with Ionic3/Angular4

I am seeking feedback from individuals with more experience than me to determine if my approach is correct. I am currently working on an Ionic3-Angular app that involves a CRUD functionality for "Clientes". From what I have researched, the recommended structure is as follows:

  • Cliente Model: A class where attributes are defined.
  • Cliente Service / Provider: Responsible for database communication, including retrieving, modifying, and saving data.
  • Page: Where data is loaded and displayed.

The examples I have come across typically involve:

  • Instantiating the Cliente model in the Page.
  • Injecting the Cliente Service / Provider into the Page.

When loading data:

  • Data is loaded from the Page using the Provider, then assigned to an object (of type Cliente).

Now, here's where my uncertainty lies - would it be more effective to implement data access and management directly within the Model? I have successfully completed small projects using this approach, but I haven't been able to find any existing examples of others doing the same. This leads me to question whether or not I might be mistaken. Essentially, my idea is to have a Client Class with these methods:

static load(cs:ClienteService,id):Cliente{
//Function that receives the provider and uses it to access data based on the provided Cliente ID.
}

guardar(cs:ClienteService):boolean{
// Function to save the object using the provided ClienteService parameter
}

The ClienteServicio will be injected into the Page and passed to the Model as a parameter when necessary. This way, logic checks data, etc., can all be managed within the Model itself.

I hope this explanation makes sense, and I welcome any advice from the community. Thank you very much!

Answer №1

It is recommended to utilize interface classes instead of model classes for better flexibility and maintainability. For a more in-depth explanation, you can refer to this article here

When creating Injectable services, ensure that you define the business logic for saving, fetching, and updating data. It is important that these data are returned as Observables.

In your component, you should subscribe to these services in order to receive the necessary data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking Email in Angular 2 for Accuracy

Wondering about creating a directive for email validation in Angular? import { Directive } from '@angular/core'; @Directive({ selector: '[appEmailValidator]' }) export class EmailValidatorDirective { constructor() {} } I have ...

The field list contains an unidentified column named 'Test.computerIDComputerID'

I am currently navigating through the syntax of typeORM and have been stuck troubleshooting an issue for quite some time. It appears that whenever I utilize the find() function in typeORM, a query is generated with a duplicated column from a relation. Here ...

Having trouble triggering the button with querySelector in Angular

I have a dynamic page where I need to click on a button. I tried the code below, but it is not working and not showing any alert. However, if we use the same code in the browser console, it executes and shows an alert. Can someone please suggest how to r ...

Retrieve a type from a Union by matching a string property

Looking at the following structure: type Invitation = | { __typename?: 'ClientInvitation' email: string hash: string organizationName: string } | { __typename?: 'ExpertInvitation' email: strin ...

Embracing Typescript promises over jQuery deferred for improved code efficiency and reliability

Currently, I have the following lines of code that utilize the JQueryDeferred object from the type definition class jquery.d.ts. My goal is to replace jQuery deferred with TypeScript promises. Here is the existing JQueryDeferred code: class A { privat ...

Detecting URL changes on new windows in Angular Typescript: How to do it?

I am currently working with the updated version of Angular 6. My task involves opening a new browser window based on user input, which includes a specific return URL. After the return URL is fully loaded, I need to access and extract a particular element f ...

Guide to integrating an Angular 6/7 project as a dynamic plugin within a separate Angular 6/7 project

Currently embarking on a new project in Angular 7, however facing the challenge of incorporating 6 to 8 existing projects into this new platform dynamically as plugins. Your input on the feasibility and thoughts about this strategy would be greatly appreci ...

What is the reason behind the never return value in this typescript template?

As demonstrated in this example using TypeScript: Access TypeScript Playground type FirstOrSecond<condition, T1, T2> = condition extends never ? T1 : T2 type foo = never extends never ? () => 'hi' : (arg1: never) => 'hi' ...

Fetching the value of ngModel from within ngFor loop - a step-by-step guide

<div class="form-horizontal" style="margin:auto;" *ngFor="#cmp of getUser"> <div class="form-group"> <label class="col-md-3 control-label">Name:</label> <div class="col-md-8"> <input type="te ...

Angular 4 lazy loading feature is malfunctioning

I've been working on implementing lazy loading in my angular4 project, following all the steps outlined in the documentation without success. Here is a snippet of my code: StudentModule: import { NgModule } from '@angular/core'; import { ...

Exploring the Differences Between Native Script and Ionic: A Guide to Choosing the Right Framework for Your Hybrid Apps

When deciding between Ionic and Native Script for hybrid app development, which technology would you recommend? Or do you have another suggestion knowing that I am familiar with Angular 6? Also, I am looking for a Native Script tutorial, preferably in vide ...

Remove a record from Angular 2 Firebase collection

I've been searching extensively for a solution to this problem. Despite following the documentation on AngularFire 2 and Angular 2, I am unable to find a working answer. My goal is simply to delete a specific entry in my Firebase database using its un ...

Experience the magic of changing backgrounds with Ionic 4's dynamic image feature

I am currently facing an issue while attempting to add multiple background images in my Ionic 4 project. I have successfully created styles for static images, but when it comes to dynamic images, I encounter errors with the styles. <ion-content st ...

Strategies for incorporating a string into an ng-template using HTML

Suppose I have an ng-template as follows: <ng-template #templateRef> <button (click)="testClick()" Click me </button> <a I'm a link </a> </ng-template> Now, I want to utilize it in my html template li ...

How can you personalize the dropdown button in dx-toolbar using DevExtreme?

Currently, I am working with the DevExtreme(v20.1.4) toolbar component within Angular(v8.2.14). However, when implementing a dx-toolbar and specifying locateInMenu="always" for the toolbar items, a dropdown button featuring the dx-icon-overflow i ...

Unable to load class; unsure of origin for class labeled as 'cached'

Working on an Angular 10 project in visual studio code, I've encountered a strange issue. In the /app/_model/ folder, I have classes 'a', 'b', and 'c'. When running the application in MS Edge, I noticed that only classes ...

Fixed-sized array containing union parameters

One of my programming utilities allows me to create a statically sized array: export type StaticArray<T, L extends number, R extends any[] = []> = R extends { length: L; } ? R : StaticArray<T, L, [...R, T]>; To verify its functionality, ...

TypeScript compiler encountering issue with locating immutable.js Map iterator within for of loop

I am currently facing a challenge with using immutable.js alongside TypeScript. The issue lies in convincing the TypeScript compiler that a Map has an iterator, even though the code runs smoothly in ES6. I am perplexed as to why it does not function correc ...

Nesting objects within arrays using Typescript Generics

Hello, I am currently attempting to assign the correct type to an object with nested values. Here is a link to the code in the sandbox: https://codesandbox.io/s/0tftsf interface Product { name: string, id: number productList?:ProductItem[] } interf ...

Organize routes into distinct modules in Angular 6

Currently grappling with routing in my Angular 6 application. Wondering if the structure I have in mind is feasible. Here's what it looks like: The App module contains the main routing with a parent route defining the layout: const routes: Routes = ...