Configuration of injected services in IONIC 2

I am curious about how the services from injected work in IONIC 2. Specifically, my question is regarding the number of instances that exist when one service is used in two or more controllers.

Previously, I asked a colleague who mentioned that IONIC 2 operates with the singleton pattern, but based on my testing, it seems otherwise.

Let's consider two controllers, A and B, along with a service SVC1:

Controller A

import { NavController, Platform } from 'ionic-angular';
import { PageB } from '../pageb/pageB';
import { SVC1 } from '../../providers/svc1';

@Component({
  selector: 'page-a',
  templateUrl: 'a.html',
  providers: [SVC1]
})

export class PageA {
  constructor(public navCtrl: NavController, platform: Platform, public svc: SVC1) {
  }

onAddEventClicked(event): void {    
  this.navCtrl.push(PageB);
  }
}

Controller B

import { NavController, Platform } from 'ionic-angular';
import { SVC1 } from '../../providers/svc1';

@Component({
  selector: 'page-b',
  templateUrl: 'b.html',
  providers: [SVC1]
})

export class PageB {
  constructor(public navCtrl: NavController, platform: Platform, public svc: SVC1) {
  }
}

Service

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class SVC1 {
  constructor(public http: Http) { 
    console.log('creating another instance');
  }
}

In this simple setup, PageA has a button that navigates to PageB. Both pages utilize the same service.

If the service were a singleton, the message "creating another instance" would only appear once. However, it shows up twice.

Why does this happen? Does IONIC use the singleton pattern to inject service references? Is there a way to ensure only one instance of my service?

Thank you

PS: Apologies for any language errors; I hope to improve over time.

Answer №1

Setting your service as a provider for each individual page does not follow the singleton pattern. This approach is used when you only need the service available for that specific component.

To implement the singleton pattern, you should set the service as a provider in the NgModule in your app.module.ts file.

@NgModule({
 declarations:[..]
 imports:[..],
 bootstrap:[IonicApp],
 entryComponents:[...],
 providers:[SVC1] //singleton service definition here
})
export class AppModule { }

After defining the service in the NgModule, you can then inject it into the constructor of any components where it is needed. Here You can find more information about dependency injection in Angular Official docs.

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

How to utilize JS variables for filtering an array in EJS?

Is there a way to filter my user array based on the "username" variable in JavaScript? On the server side: var users = data.filter(u => u.id.startsWith('user_')).map(u => u.value); // [{"username": "arin2115", "som ...

Can someone explain the purpose of this code snippet: `const { foo = "bar" } = "baz"`?

I came across this code not too long ago and had trouble finding the answer online, so I'm turning to you for help. The specific code snippet is from a webpack configuration file: const { NODE_ENV = 'production', } = process.env; Appreci ...

What seems to be causing the malfunction in this ranking function?

I created a custom function to retrieve the top five users from a JSON database. Below is the code snippet: var users = []; Object.keys(database).forEach(user => { if (!users[0]) { users[0] = user } else { var checked = false; for (let ...

Is there a more effective method for detecting changes in a class variable in JavaScript, aside from using setInterval()?

Is there a more readable way to monitor changes of a class variable from its instance? Although I can use setInterval() to achieve this, the code becomes quite difficult to read. let calibrator = new Calibrator("hardwareName"); calibrator.connect(); let ...

Sacrificing type safety versus retaining type safety

I'm curious to know what sets apart these two approaches when declaring the status property. I understand that the second version maintains type safety, but how exactly does it achieve this? export type OwnProps = { id: number; name: string; sta ...

The webpage continues to refresh after executing a JavaScript function triggered by the AJAX response

I have experimented with various solutions for calling a JavaScript function returned from an AJAX response. While each method worked to some extent, I found that using an alert within the refreshResults function was necessary in order to display the resul ...

The server encountered an issue with starting the ANCM Out-Of-Process, resulting in HTTP Error 502

We currently have two projects in progress. One involves a Web API built on .NET Core 2.2.6 and an Angular 8 Single Page Application integrated within .NET Core 2.2.6. Both projects have been deployed on IIS 7 with the Web API functioning properly, but the ...

Unlocking Google contact pictures using Google contacts API - A step-by-step guide

Exploring the Google contacts API with Node.js I've successfully retrieved all the contacts via the Google feed API, but without images https://www.google.com/m8/feeds/photos/media/faizy04%40gmail.com/ya29.ZAFTNcQ6sEue40gFqH5h8h91k8LO8Bwvf50NUgQKKms ...

Create a TypeScript view component that encapsulates an HTMLElement for seamless integration with TweenMax

Looking to develop my own basic view component class that encompasses an HTMLElement or JQuery element, I want to be able to do something similar to this: var newComponent:CustomComponent = new CustomComponent($('#someDiv')); TweenMax.to(newCom ...

Error: the keyword "module" has not been properly defined

Struggling to run this web app, initially encountered: (node:12960) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. C:\Users\J\react-messenger\stream-chat-boilerp ...

Deactivate background hover effects for bar charts in Recharts

Is there a way to disable the gray background that appears when hovering over bar charts in Recharts? I'm using version 1.4.1 and my code looks like this: import React from "react" // Recharts import { Bar, BarChart, CartesianGrid, ResponsiveContain ...

What is causing the issue of URL parameters becoming undefined when performing service injection in the app component?

When working with a service that reads parameters from the URL, everything seems to be functioning properly until attempting to inject the service into the constructor of the app.component.ts file or trying to call a service method from the app.component.t ...

Managing iframe scrolling using the parent window's scrollbar

I am currently working on an iframe to be utilized across various domains. The functionality of this iframe involves displaying a data list that updates when the bottom of the scroll is reached. An issue I encountered is that the parent window, where the ...

Learn how to synchronize global packages across multiple computers using npm

After installing several npm global packages on my work computer, I am now looking to synchronize these packages with another device. In a typical project, we utilize a package.json file to keep track of package details, making it easy to install all the ...

The resource being requested is missing the 'Access-Control-Allow-Origin' header - Issue with Pinterest OAuth implementation

While working on implementing OAuth for Pinterest, I successfully retrieved the access code. However, when attempting to perform a GET /v1/me/ request, I encountered an error in the Chrome console: XMLHttpRequest cannot load . No 'Access-Contro ...

The event handler onClick is unresponsive in the button element within a React component

Hey there, I'm new to React and I'm having an issue with a class-based component. Below is my component that I'm calling inside another React component. I just want the temp function to be called when onClick is triggered, but it's not ...

A guide on testing mouse clientY in React using JEST for effective testing

useEffect(() => { const mouseHandler = (event: MouseEvent) => { menuData.forEach((element) => { if (element.hasActiveDropdown && event.clientY > 50) { handleCloseDropDown(); // handleDropDown('0') ...

insert the "tr" element directly following the button

I am looking for a way to allow the user to add another input file right next to the button, so they can select and send multiple files at once. https://i.sstatic.net/TI4eJ.png I have tried using various solutions I found during my search but none of the ...

Leverage the capabilities of mat-datepicker independently without relying on an

Is it possible to have the datepicker located in a fixed sidebar that is always visible and not linked to an input field? My idea was to include the component and set opened = true so that the datepicker remains in a box that is constantly displayed. ...

The validator function is causing an error with the 'lowerCase()' method resulting in an undefined output

Dealing with email validation in a form, I encountered a case-insensitivity issue. Using the angular validation mustMatch to ensure emails match index for index, I needed to address the case sensitivity. This led me to create the matchCaseInsensitivity fun ...