WHY DO WE NEED SERVICE IN ANGULAR
Why Do We Need Service In Angular ?

In This Blog, you are going to learn that why do we need services in our angular app. As we all know that service is a very important concept regarding to angular because it provides data in the form of objects, arrays, functions, values etc across the angular application’s components. Remember Angular 14 is the current and latest version nowadays.

Scenario

Programming Principles

  • Don’t Repeat Yourself (DRY)
    • In this principle you don’t have to repeat the things in the application, like avoiding copy pasting
  • Single Responsibility
    • Every class must have a single and unique responsibility that no other class have.

Angular Service

  • Service is nothing its just a class with specific purpose.
    • Data Sharing Across multiple components.
    • It is used to apply application logic
    • We can use Services for external interactions such as connecting to a database.
  • The best solution is to write services and inject in application where we need it.
  • Services are usually implemented through dependency injection.
  • dependency injection is one of the most important topics in Angular

Source Code

students-list.component.ts File Code

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

@Component({
  selector: 'app-students-list',
  templateUrl: './students-list.component.html',
  styleUrls: ['./students-list.component.css']
})
export class StudentsListComponent implements OnInit {

  public students = [
    {name:"Adil",age:21,standard:12},
    {name:"Kumar",age:19,standard:11},
    {name:"Zain",age:18,standard:10}
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

students-list.component.html File Code

<h1>students-list works!</h1>
<table height="200" width="200">
    <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>CLASS</th>
    </tr>
    <tr *ngFor="let std of students">
        <td>{{ std.name }}</td>
        <td>{{ std.age }}</td>
        <td>{{ std.standard }}</td>
    </tr>
</table>

students-data.component.ts File Code

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

@Component({
  selector: 'app-students-list',
  templateUrl: './students-list.component.html',
  styleUrls: ['./students-list.component.css']
})
export class StudentsListComponent implements OnInit {

  public students = [
    {name:"Adil",age:21,standard:12},
    {name:"Kumar",age:19,standard:11},
    {name:"Zain",age:18,standard:10}
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

students-data.component.html File Code

<h1>students-data works!</h1>
<table height="200" width="200">
    <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>CLASS</th>
    </tr>
    <tr *ngFor="let std of students">
        <td>{{ std.name }}</td>
        <td>{{ std.age }}</td>
        <td>{{ std.standard }}</td>
    </tr>
</table>

app.component.html File Code

<p>Welcome To Angular By Learning Never Ends</p>
<app-students-list></app-students-list>
<br/>
<app-students-data></app-students-data>

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/qv08ky9zezqug6s/29+-+SERVICES.pptx/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *