service structure

Where to import which service

Global

This service will be injected only once, could be into the app.module.ts
Example: AppThemeService, SessionService, DarkModeService, ...

@Injectable({
  providedIn: 'root',
})
export class sessionService {/** ... **/}

Folder structure

src
└── app
    └── core
        └── services
            ├── [name].service.ts
            ├── session.service.ts // example
            └── dal.service.ts // example

Shared

Meant to be imported multiple time across the project
Example: loaderService, qrCodeService, ...

@Injectable()
export class loaderService {/** ... **/}

Folder structure

src
└── app
    └── shared
        └── services
            └── loader.service.ts  // <-- Here

Local

This service will be injected into the component directly

@Injectable()
export class pageService {/** ... **/}

Folder structure

src
└── app
    └── pages
        └── [page]
            ├── [page].component.html
            ├── [page].component.ts
            ├── [page].module.ts
            └── [page].service.ts 

Import

// [page].module.ts
@NgModule({
  declarations: [],
  imports: [],
  providers: [pageService], // <-- Here
})

or

// [page].component.ts
@Component({
  standalone: true,
  declarations: [],
  imports: [],
  providers: [pageService], // <-- Here
})

Naming conventions

As service communicate with the API, and this later follow a structured logic, name should try to stay standardized to let us reuse the logic without adding any changes.

Methods

@Injectable()
export class myService {
  items$ = signal<any[]>([])
  item$ = signal<any>()

  getItem() {}
  getItems() {}
  addItem() {}
  addItems() {}
  putItem() {}
  deleteItem() {}
  deleteItems() {}
}