Service File at Component level vs Application level

Here I am going to describe the benefits of service files per component rather than a single file. To manage single service file is a complex task because when we have to change or update the code, we change the path and also it needs to be taken care that it won't affect any other file. I have used both the way in my project. Firstly I will elaborate that how we face difficulty to manage the service file at the application level.

Managing of Service file at Application Level

There are the following steps for managing the service file at the application level.

Step 1:-

create the service file in the app folder by using the following command on command prompt.

ng generate service common

Step 2:-

import { Injectable, EventEmitter } from '@angular/core';
import { RequestOptions, Headers }  from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { environment } from './../../environments/environment';
import { LocalStorageService } from './local-storage.service';
import { RequestOptionsService } from './request-options.service';
import 'rxjs/add/operator/map';

I have imported following files in service component as per my requirement.

Step3:-

constructor(private localStorageService:LocalStorageService,  private requestOptionsService:RequestOptionsService,  private http:HttpClient) { }

Step4:-

public getAuthenticationCredential(){
    this.url=environment.apiHost+":"+environment.apiPort+environment.apiRoutePath;
    this.token=this.localStorageService.getToken();
}

I have made this common method which includes the url, token etc. and configurations of the API's port, route path and host exists in the environment file. Similarly, I created a local storage service file which stored the token in local storage.

Step5:-

After the step 4, I have made separate methods which work for API like a POST,  PATCH, GET, PUT, DELETE and in this I have written the code in the way that a single method contains the token, url so that we don't need to write the code again and again. Following are the methods for above API.

public getServerRequest(url:string){
    return this.http.get(url, this.requestOptionsService.getRequestOptions(this.token));
  }

  public postServerRequest(url:string, data:object){
    return this.http.post(url, data, this.requestOptionsService.getRequestOptions(this.token));
  }

  public patchServerRequest(url:string, data:object){
    return this.http.patch(url, data, this.requestOptionsService.getRequestOptions(this.token));
  }

These are the methods which we use for the API requests as per the requirement.

Step6:-

In this step, By the following example, we will understand that how to use these methods when we actually make a request structure for the API.

public getWalletCount(){
    this.getAuthenticationCredential();
    let url=this.url+"wallets/count";    
    return this.getServerRequest(url);
  }

This method is integrated with the component. So the first line tells the name of the method, second is the method which we have implemented in step4. In the third line, "this.url" contains the environment path, host etc as we have discussed the step 4 and "wallets/count" is the path of the API.

Step 7:- 

In component, we import the service file and call this method which exists in service file with the same name.

So these are the steps and this is the way of using service file in application level. 

Managing of Service file at component level

Now we will discuss that how to manage the service file at the component level, what are benefits of that and how it is efficient.

I worked using both the way but I preferred the second way because we know if we change anything in the service file, it will not be reflected in any other file.

There are the following steps.

Step 1:- 

when we create the component it contains some files by default. Let us understand this by an example. for e.g. my component name is activity so it conatins the following by default.

(i) activity.component.html

(ii)activity.component.css

(iii) activity.component.ts

(iv)activity.component.spec.ts

Step 2:-

As per my conveneince, I have created two more component i.e. activity.api-path.ts and activity.service.ts

Step3:-

activity.api-path.ts

export const activitiesAPIPath = {
    "activites":"activites"
};

So in the activitiesAPIPath const, I have stored the path and variable in a key-value pair.

Step4:-

activity.service.ts

import { Injectable } from '@angular/core';
import { HttpClientService } from "./../../services/http-client.service";
import { activitiesAPIPath } from "./activities.api-path";

I have imported the above files as per the requirement.

Step 5:-

In the same file, I implemented a method which will access the service file in the component.

public getActivities(queryParams:object){
        return this.httpClientService.getServerRequest(activitiesAPIPath['activites'], queryParams);
    }

httpClientService is the separate file having methods for Post, Patch and all other similar type of api's.

So this is the second way which I have used recently in the project to modularize the code in a better and efficient manner.

I have discussed both of the way to creating the service file, now there is a need to understand that where and which type of methods will be used in a different kind of project.

So if you are working on a small project there you can follow the first way because in small scale projects you can manage the single service file. But if you are working on large scale project then you need to follow the second way because it manage the file per component. As when I have started work on my project I was using the first way because there were not much components and it was easy to maintain but as the project is expanding I am using the second way because it will difficult to manage the files at an application level.