Learn Angular Services From Beginning to End Step By Step Tutorials

Angular has lots of features among them, Angular services are the one. it is an open-source and good framework to develop the Single Page Application.

Here, I am going to point out the top 10 important things in Angular Services. it is a stateless object & helps to splits the application into different logical units. for example, creating the number of Components in the project for the same data (example Employee table data) makes confusion. So instead of creating a number of Components, we can create one service globally and we can re-use where ever we want. So it reduces code.

1. How to destroy a service instance in angular
2. Angular service vs Component 
3. What are the providers in angular
4. Register the service with our module
5. Angular service oninit
6. Some Common Mistakes
7. Angular service without injectable
8. Angular service constructor not called
9. Angular service example & Conclusion
10. Angular service constructor parameters

 So let's get started about "Learn Angular Services From Beginning to End Step By Step Tutorials".

1. How to destroy a service instance in angular

First, we want to know the usage of the Service. Angular service is the singleton object, which means it gets instantiated only once of an application. the main purpose of the service is to share and organize the Models, Business logic, any Data, and Functions with different components of an Angular Project. 

come to the main point on how to destroy the service. it depends on where you provide the service. we can provide the service mainly at the NgModule level and Component level. if you provide at the Module level then it creates once and never re-initialized after that.

If you provide at Component level then the service shares the data at the lifetime of the component which means creates and destroys at the same time as same as the component

2. Angular services vs Component 

 Component:  it is simply a class file where you are writing the logical piece of code in the dot ts file for the Angular app. it contains the following template and used to render the view for the application. and we can import and export the external files, CSS files, etc where ever the selector tag is located.

Angular services: it is used to the common method for common functions across the different application components. they also simple classes with functions and other members. the main purpose is to reduce the code and re-use the code.  the main purpose of the Angular services is to share and organize the Models, Business logic, any Data, and Functions with different components of an Angular Project. 

Example on Authentication Service:

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../_services/auth.service';

import { tokenKey } from '@angular/core/src/view';

@Component({

  selector: 'app-nav',

  templateUrl: './nav.component.html',

  styleUrls: ['./nav.component.css']

})

export class NavComponent implements OnInit {

  model: any = {};

  constructor(private authServices: AuthService) { }

  ngOnInit() {

  }

  login() {

    this.authServices.login(this.model).subscribe(

      next => {

      console.log('loged succefully');

    },

    error => {

     console.log('Failed to Login');

    }

    );

   }

}

}

3. What are the providers in angular services and types

The providers are usually singleton objects (one instance) per injector. Each provider provides a single instance of an injectable., that other objects have access to through dependency injection (DI).

Types of Providers

1. Type Provider
2. Class Provider
3. UseValue Provider
4. UseFactory Provider
5. UseExisting Provider

4. Register the Angular services with our module.

           we can register the service at different levels. before consuming the service has to be registered either Module level or Component level. not only these ways we can find in many ways. below are some ways to register the Angular services.

1. Component Level
2. AppModule Level
3.  Self-registering a service   
4. single instance of a service by registering in a module 

  Component Level Example:

import { Component, OnInit } from '@angular/core';

import { TestService } from './test.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  providers:[TestService]

})

export class AppComponent implements OnInit {

  title = 'services-test';

  someaProperty;

  constructor(private testService:TestService)

  {

  }

  ngOnInit()

  {

    this.testProperty = this.testService.someaProperty;

  }

}

   AppModule Level Example :

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { TestService } from './test.service';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [TestService],

  bootstrap: [AppComponent]

})

export class AppModule { }

5. Angular services oninit

• NgOnInit works with Directives and Components
• A lifecycle hook that is called after Angular has initialized all data-bound properties of the directive. and ngOnInit() method to handle any additional initialization tasks.
• NgOnInit function is one of the great Angular component’s life-cycle methods. Life cycle methods (or we can say as hooks) in Angular components allow us to run the required piece of code at different stages of the life of an Angular component.
• Unlike the constructor method, the ngOnInit method comes from an Angular interface (OnInit) that the Angular component needs to implement in order to use this method. The ngOnInit method is called shortly after the Angular component is created.

• example syntax

interface OnInit {

   ngOnInit(): void

}

Conclusion :

I have explained only Learn Angular Services From Beginning to End Step By Step Tutorials . but we can find the in starting of the article as 10 things. due to some reasons, I didn't update the remaining main things. I planned to update you soon.