CODEWITHSUNDEEP
node.jsangular
Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

What is the right way of implementing a service in an Angular application?

Last year when I worked on building an Alexa skill, this is how I used to define a service:

service.ts

var createReport = function(variable,callback){
  //Method code here
        };
module.exports.createReport = createReport;

And this is how I used to call it in the :

app.ts

const service= require('../service.ts');
        servicee.createReport (name,function=> {
//Callback function code here
}
)

This year I am building an Angular app in which services manipulation is different from the previous example.
Here's an example for state management service in my angular app:

service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable()
export class listOfThirdPartiesService {
  constructor() {}
  /************************************************** */
  private listOfThirdPartiesValuesSource = new BehaviorSubject<string[][]>([
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
  ]);
  currentListOfThirdParties = this.listOfThirdPartiesValuesSource.asObservable();
  /************************************************************************ */
}

And this is how I I call it in the :

app.ts

import { listOfThirdPartiesService } from "../services/listOfThirdPartiesService.service";

Also in app.module.ts, I have to declare it in the providers.
So my questions are:
What is the difference between the two ways of implementing a service?
And in which use cases can I use the first one and the second one?

Upvotes: 0

Views: 66

Answers (2)

Joey Gough
Joey Gough

Reputation: 3103

The first method, to me, seems to be just defining a function. This provides a functionality, and a closure. This isn't really a "Service".

The second method (using the @Injectable() decorator), make the class, well, injectable. This means that it will play with Angular's DI system. You can inject it into other Angular classes (Components and Services) by passing it in the constructor along with the typescript type. The Angular compiler will look to its providers and find a service of this type and you will have access to that exact instantiation of the class. You say that you are providing this in the AppModule. This means you are providing this in the root of the app and this service will be a singleton. In effect this method is the most convenient. I try to explain this with images in my half baked blog.

With the first method, if you care about how many instantiations you have, and which instance you are interacting with at any given time, you will need to watch how you are importing it, and if you are code-splitting.

Upvotes: 0

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

Take a look at this documentation on Services

You can simple create a service in Angular 2+ and above using the below command

ng generate service your-service

or simply

ng g s your-service

The above command automatically register your service into the module as well.

Now if you specify your service in providers in NgModule like as shown below, then it will be available to all components in that NgModule

@NgModule({
  providers: [
  YourService,
 ],
 ...
})

But if you want to use your service specifically only for some components the specify it under providers in your component

@Component({
  selector:    'app-test',
  templateUrl: './app-test.component.html',
  providers:  [ YourService ]
})

Upvotes: 3

Related Questions