Angular Services Tutorial With Example From Scratch

Angular Services Tutorial With Example From Scratch

Angular Services Tutorial With Example From Scratch is today’s leading topic. We are using Angular 5 for this tutorial. Components should not fetch or save data directly, and they indeed shouldn’t knowingly present fake data. They should focus on representing data and delegate data access to a service. Services are a great way to share information among classes that do not know each otherWhen we are developing an Angular app, we will most likely run into a scenario in which we need to use the same code across multiple components. In that case, Services will help us to get rid of this problem. We can share the services code among various components.

If you are new to Angular then please check out my these tutorials.

  1. Angular Router Tutorial Example

  2. Angular Form Validation Example Tutorial

  3. Angular Dependency Injection Tutorial Example



Angular Services Tutorial

We should not violate some general programming principles like Single Responsibility Of A Class. In this case, Components use to display and present the data. Services use to fetch the data from the API. Let us get started our Angular 5 Services Tutorial.

Step 1: Install Angular via CLI.

You need to set up a dev environment before you can do anything.

Install Node.js® and npm if they are not already on your machine.

 Then install the Angular CLI globally.
npm install -g @angular/cli



Step 2. Create a new project.

Type the following command.

ng new ngservices

Step 3: Serve the application.

Go to the project directory and launch the server.

cd my-app
ng serve --open

Step 4: Create Service class.

To create a service, at the console, type the following command in your root of the folder.

ng g service crypto

It will create the following files.

  1. crypto.service.ts
  2. crypto.service.spec.ts

Now, import the service file into the app.module.ts file.

import { CryptoService } from './crypto.service';

@NgModule({
  providers: [CryptoService], 
})

Now, we need to add some code to the crypto.service.ts file. This file contains the data that we need to consume. So this is service file. In the Live project, this file will hit the GET or POST request to the server and insert or fetch the data. So this file provides services from frontend to backend.

// items.service.ts

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

@Injectable()
export class CryptoService {

  coins= [
    {id: 1, name: 'BTC'},
    {id: 2, name: 'XRP'}
  ];

  constructor() { }

  getMyItems()
  {
    return this.coins;
  }

}



Step 5: Use services into the component.

So your app.component.ts file looks like this.

// app.component.ts

import { Component } from '@angular/core';
import { CryptoService } from './crypto.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  coins = [];
  constructor(private cryptoservice: CryptoService)
  {
    this.coins = cryptoservice.getMyItems();
  }
}

Also, we need to update the HTML as well.

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let coin of coins">
    <td>{{coin.id}}</td>
    <td>{{coin.name}}</td>
  </tr> 
</table>

Finally, you can see in the browser: http://localhost:4200

You can see the data is displaying the table format.

In a real-world scenario, data is fetching from the Backend API. In this case, we have taken simple static Array.

Finally, our Angular Services Tutorial With Example From Scratch is over.

The post Angular Services Tutorial With Example From Scratch appeared first on AppDividend.

Leave a Reply

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