Repository Pattern in Angular

The Repository Pattern is a common design pattern used to separate the logic for data access and manipulation from the rest of the application. While it is more commonly associated with backend or server-side development, you can still apply a variation of the Repository Pattern in Angular for managing data. Here's an example of how you can implement a simplified version of the Repository Pattern in Angular:

Create a Repository

Create a repository to handle data operations. For example, create a file named user.repository.ts with the following code:

import { Injectable } from  ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
import { User } from ‘./user.model’;
@Injectable({
providedIn: ’ root ’ ,
})
 export class UserRepository {
private apiUrl = ‘https://api.example.com/users’;
constructor(private http: HttpClient) {}
getAllUsers(): Observable<User[]>{
                return this.http.get<User[]>(this.apiUrl);
}
getUserById(id:number): Observable<User>{
                return this.http.get<User>(‘${this.apiUrl}/${id}’);
}
createUser(user:User): Observable<User>{
                return this.http.post<User>(this.apiUrl,user);
}
updateUser(user:User): Observable<User>{
                return this.http.put<User>(>(‘${this.apiUrl}/${user.id}’, user);
}
deleteUser(id:number): Observable<any>{
                return this.http.delete(>(‘${this.apiUrl}/${id}’);
}
}

Use the Repository in a Component

Create a component that utilizes the repository for data operations. For example, create a file named user.component.ts with the following code:

import { Component,OnInit } from ‘@angular/core’;
import { User } from ‘./user.model’;
import { UserRepository } from ‘./user.repository’;
@Component({
     selector: ‘app-user’,
     template:’
       <h2>User Component</h2>
        <ul>
             <li *ngFor=”let user of users”>{{ user.name}}</li>
        </ul>
})
export class UserComponent implements OnInit {
    users:User[];
    constructor( private userRepository: UserRepository) {}
    ngOnInit(): void {
       this.loadUsers();
    }
    loadUsers():void{
     this.userRepository.getAllUsers().subscribe((users:User[]) => {
            this.users = users;
     });
    }
}

Register the Repository

Open the app.module.ts file and import the UserRepository. Add it to the providers array within the @NgModule decorator. For example:

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { HttpClientModule } from ‘@angular/common/http’;
import { UserRepository } from ‘./user.repository’;
import { UserComponent } from ‘./user.component’;
@NgModule({
       declarations: [UserComponent],
       imports : [BrowserModule,HttpClientModule],
       providers : [UserRepository],
       bootstrap : [UserComponent],
})
export class AppModule {}

Build and run the application

Use the following command to build and serve the Angular application:

ng serve

Your application will be accessible at http://localhost:4200.

In this example, the UserRepository encapsulates the data operations for managing users. The UserComponent utilizes the repository by injecting it into its constructor and using its methods for retrieving user data.

By following this simplified version of the Repository Pattern in Angular, you separate the logic for data access and manipulation from the components. This promotes code reusability, testability, and maintainability, as well as provides a clear interface for interacting with the data layer.