In this section, we will explore the concept of services in Angular, which are a fundamental part of building scalable and maintainable applications. Services allow you to share data and functionality across different parts of your application.

1. What is a Service?

   • A service is a class that encapsulates business logic, data access, or other reusable functionality.
   • Services are typically used to:
     • Fetch data from a server.
     • Perform calculations.
     • Share data between components.

2. Why Use Services?

   • Separation of Concerns: Services help separate business logic from the user interface.
   • Reusability: Services can be reused across multiple components.
   • Testability: Services can be easily tested in isolation.

3. Creating a Service

   • Services in Angular are typically created using the Angular CLI.
   • Services are decorated with the @Injectable decorator, which makes them available for dependency injection.

Let's create a simple service that provides a list of users.

1. Generate the Service:

   ng generate service user
   

2. Implement the Service:

   // src/app/user.service.ts
   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class UserService {
     private users = [
       { id: 1, name: 'John Doe' },
       { id: 2, name: 'Jane Smith' },
     ];
   
     constructor() {}
   
     getUsers() {
       return this.users;
     }
   }
   

3. Using the Service in a Component:

   // src/app/user-list/user-list.component.ts
   import { Component, OnInit } from '@angular/core';
   import { UserService } from '../user.service';
   
   @Component({
     selector: 'app-user-list',
     template: `
       <ul>
         <li *ngFor="let user of users">{{ user.name }}</li>
       </ul>
     `,
   })
   export class UserListComponent implements OnInit {
     users: any[] = [];
   
     constructor(private userService: UserService) {}
   
     ngOnInit(): void {
       this.users = this.userService.getUsers();
     }
   }
   

• Service Creation:

  • The UserService class is decorated with @Injectable({ providedIn: 'root' }), which means it will be provided at the root level and available throughout the application.
  • The getUsers method returns a list of users.

• Using the Service:

  • The UserListComponent imports the UserService and injects it via the constructor.
  • The ngOnInit lifecycle hook is used to call the getUsers method and assign the result to the users property.

1. Objective:

   • Create a service that provides a list of products.

2. Steps:

   • Generate a service named ProductService.
   • Implement a method getProducts that returns a list of products.
   • Use the service in a component to display the list of products.

3. Solution:

   // src/app/product.service.ts
   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class ProductService {
     private products = [
       { id: 1, name: 'Laptop' },
       { id: 2, name: 'Smartphone' },
     ];
   
     constructor() {}
   
     getProducts() {
       return this.products;
     }
   }
   

   // src/app/product-list/product-list.component.ts
   import { Component, OnInit } from '@angular/core';
   import { ProductService } from '../product.service';
   
   @Component({
     selector: 'app-product-list',
     template: `
       <ul>
         <li *ngFor="let product of products">{{ product.name }}</li>
       </ul>
     `,
   })
   export class ProductListComponent implements OnInit {
     products: any[] = [];
   
     constructor(private productService: ProductService) {}
   
     ngOnInit(): void {
       this.products = this.productService.getProducts();
     }
   }
   

• Forgetting to Decorate with @Injectable:

  • Ensure your service class is decorated with @Injectable to make it available for dependency injection.

• Not Providing the Service:

  • If you don't use providedIn: 'root', make sure to provide the service in the module's providers array.

In this section, we learned about the importance of services in Angular, how to create and use them, and the benefits they bring in terms of separation of concerns, reusability, and testability. In the next section, we will dive deeper into creating and using services, and explore dependency injection in more detail.