Dependency Inversion Principle - done (#13)

Author: muhammadawaisshaikh

src/app/app.config.ts

@@ -2,7 +2,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
 };

src/app/app.routes.ts

@@ -20,5 +20,9 @@ export const routes: Routes = [
     {
         path: "interface-segregation-principle",
         loadComponent: () => import('./interface-segregation-principle/interface-segregation-principle.component').then(c => c.InterfaceSegregationPrincipleComponent)
+    },
+    {
+        path: "dependency-inversion-principle",
+        loadComponent: () => import('./dependency-inversion-principle/dependency-inversion-principle.component').then(c => c.DependencyInversionPrincipleComponent)
     }
 ];

src/app/dependency-inversion-principle/dependency-inversion-principle.component.css

@@ -0,0 +1,10 @@
+<h1>D: Dependency Inversion Principle</h1>
+
+<div class="row mt-5">
+    <div class="col-6">
+        <app-without-dip />
+    </div>
+    <div class="col-6">
+        <app-with-dip />
+    </div>
+</div>

src/app/dependency-inversion-principle/dependency-inversion-principle.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DependencyInversionPrincipleComponent } from './dependency-inversion-principle.component';
+
+describe('DependencyInversionPrincipleComponent', () => {
+  let component: DependencyInversionPrincipleComponent;
+  let fixture: ComponentFixture<DependencyInversionPrincipleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DependencyInversionPrincipleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DependencyInversionPrincipleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dependency-inversion-principle/dependency-inversion-principle.component.spec.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { WithDipComponent } from './with-dip/with-dip.component';
+import { WithoutDipComponent } from './without-dip/without-dip.component';
+
+@Component({
+  selector: 'app-dependency-inversion-principle',
+  standalone: true,
+  imports: [WithDipComponent, WithoutDipComponent],
+  templateUrl: './dependency-inversion-principle.component.html',
+  styleUrl: './dependency-inversion-principle.component.css'
+})
+export class DependencyInversionPrincipleComponent {
+
+}

src/app/dependency-inversion-principle/dependency-inversion-principle.component.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HttpDatasourceService } from './http-datasource.service';
+
+describe('HttpDatasourceService', () => {
+  let service: HttpDatasourceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HttpDatasourceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/dependency-inversion-principle/with-dip/http-datasource.service.spec.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { UserDataSource } from './user.interface';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HttpDatasourceService implements UserDataSource {
+
+  private apiUrl: string = 'https://reqres.in/api/users?page=1';
+
+  constructor(
+    private http: HttpClient
+  ) { }
+  
+  fetchUsers(): Observable<any[]> {
+    return this.http.get<any[]>(this.apiUrl);
+  }
+}

src/app/dependency-inversion-principle/with-dip/http-datasource.service.ts

@@ -0,0 +1,5 @@
+import { Observable } from "rxjs";
+
+export interface UserDataSource {
+  fetchUsers(): Observable<any[]>;
+}

src/app/dependency-inversion-principle/with-dip/user.interface.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  let service: UserService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});