How To Get Data with or without services in Angular5

It is time to start learning about services in angular5. First thing is to need to understand what is Services and here I am going to explain about Services. 

Without services let us look a list which defines in the component of Recipe list:

1. Begin with app module here you declare all the components which you use in application and then goto the app component.

Ex- app.module.ts

2. In-app component, you have a template where you use the view section for a list

Ex- app.component.html
<h1>My First Service code in angular 5</h1>
<app-recipes></app-recipes>

3. This template contains the next module template to show Recipe list,

Ex- component.html
<div class="container">  
  <h3>Recipe List</h3>  
  <table class="table table-condensed">  
    <thead> 
      <tr>  
        <th>ID</th>  
        <th>Name</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr *ngFor="let e of recipes ">  
        <td> {{e.id}}</td>  
        <td>{{e.name}}</td>  
      </tr>  
    </tbody>  
  </table>  
</div>  
 

4. And then Recipe list Component where we do hard coding for list array of Recipes.

Ex-component.ts
import { Component, OnInit } from '@angular/core'
  public recipes = [     
{ id: 11, name: 'burger' },     
{ id: 12, name: 'chips' },     
{ id: 13, name: 'coke' },     
{ id: 14, name: 'french fries' }   
];  

This is the Basic Service but when a new requirement comes to show the same list in Recipe details well that's not a problem you can go to Recipe detail component and use the same list which Recipe list  component contains but the problem is basically a well-known application must use these principles which are as follow:

1. (DRY)-Do not Repeat yourself - which means do not use repeated codes everywhere it takes time and memory consumes. 

2. Single responsibility principle:- which means a single component must use for the single purpose don't define list here.

The solution to these problems is:

Services are nothing but a class which uses for a specific purpose. It is responsible to provide a Recipe data in the Recipe class.  You need to write a getRecipe() function and in that function, you have to write a list of Recipes.

Why do we need services:

1- To Share Data
2- To Implement application logic
3- External Interaction(means connectivity with the database).

How to Implement Services in angular 5 with Dependency Injection:

1. The First step is to create a component in angular 5 with the help of CLI command- ng generate service service-name you can also create manually service but you have to write all the structures in service so to take less time we use CLI command and it generates a service with the injectable structure, and then import services in appmodule.ts.

Ex- /*1st step import service*/
import {RecipesservicesService} from './recipesservices.service'
 providers: [RecipesservicesService],/*for metadata*/

2. The Second step you have to register with injector if you do not register it behaves like a regular component. 

Ex-ng generate service recipes-services
import { Injectable } from '@angular/core'
@Injectable({
  providedIn: 'root'
})
export class RecipesservicesService {
  constructor() { }
  getRecipes(){
   return [
      { id: 11, name: 'burger' },
      { id: 12, name: 'chips' },
      { id: 13, name: 'coke' },
      { id: 14, name: 'french fries' }
    ];
  }
}

If you register Recipe list in injector then this service is only used with the Recipe list and its child component. If you register with the app component which is also a correct but it might be grown in future, so the right choice is to register the injector with the app module so that only one service is used by all components and to register the service we use a provider which acts as a metadata in app-module.

The Dependency is specified in the constructor:

private_local variable and gives an instance service.

And the code is ngOnInit() lifecycle hooks get a call once when the function is initialized. In this hook, we have to call the function which uses in Recipe service instance.

Ex-component.ts
import {RecipesservicesService} from '../recipesservices.service'
export class RecipesListComponent implements OnInit {
  public recipes = [];
  constructor(private _recipeservice : RecipesservicesService) { }
  ngOnInit() {
    this.recipes = this._recipeservice.getRecipes();
  }
}