Services Introduction in Angular

Welcome to the Services Introduction lesson in Angular! 🎯

In this tutorial, we'll explore Services - an essential Angular feature that helps manage and share data across components. By the end of this lesson, you'll have a solid understanding of Services and be able to create your own.

What are Services in Angular?

In Angular, Services are used to organize and share code across your application. They can be used for various purposes such as data retrieval, data manipulation, or even providing a central location for reusable functionality.

📝 Note: Services can be injected into components, directives, and other services, making them an essential tool for keeping your code organized and modular.

Creating a Service

Let's create our first Service. We'll create a simple Service that generates random numbers.

First, navigate to your project's src directory and create a new folder called services.
Inside the services folder, create a new TypeScript file called random-number.service.ts.
Open the random-number.service.ts file and replace its contents with the following:

typescript

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

@Injectable({
  providedIn: 'root'
})
export class RandomNumberService {
  generateRandomNumber(max: number): number {
    return Math.floor(Math.random() * max);
  }
}

💡 Pro Tip: The @Injectable() decorator marks the class as an Angular Service. The providedIn property tells Angular where to provide this Service, in our case, it's provided at the root level.

Using the Service

Now that we have our Service, let's use it in a component.

First, create a new component called app-random-number.
In the app-random-number component, inject the RandomNumberService and use it to generate and display a random number.

Here's what the app-random-number.component.ts file should look like:

typescript

import { Component, OnInit } from '@angular/core';
import { RandomNumberService } from '../services/random-number.service';

@Component({
  selector: 'app-random-number',
  templateUrl: './random-number.component.html',
  styleUrls: ['./random-number.component.css']
})
export class RandomNumberComponent implements OnInit {
  randomNumber: number;

  constructor(private randomNumberService: RandomNumberService) {}

  ngOnInit() {
    this.randomNumber = this.randomNumberService.generateRandomNumber(100);
  }
}

💡 Pro Tip: The OnInit interface tells Angular that the component needs to be initialized when it's created.

Putting It All Together

Now that we have our Service and component, let's see how they work together.

Open the app.module.ts file and import the RandomNumberComponent.
Add the RandomNumberComponent to the declarations array.
Run your application to see the generated random number in action.

Quiz

Congratulations! You've now created your first Angular Service and used it in a component. In future lessons, we'll explore more advanced Service usage and techniques. Happy coding! 💡📝🎯