x.diff

commit f8d06d51b6707af958ce5519ec36f72fcdd7fc06
Author: Tomasz Ducin <tomasz@ducin.dev>
Date:   Tue Sep 24 14:03:41 2024 +0200

    update

diff --git a/src/app/api/employees.service.ts b/src/app/api/employees.service.ts
index f9882b6..04b3677 100644
--- a/src/app/api/employees.service.ts
+++ b/src/app/api/employees.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { apiURL } from './config';
@@ -12,7 +12,7 @@ export type EmployeeCriteria = {
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root' // GLOBAL
 })
 export class EmployeesService {
 
@@ -20,6 +20,8 @@ export class EmployeesService {
     private http: HttpClient
   ) { }
 
+  // private http = inject(HttpClient)
+
   deleteEmployee(id: Employee['id']) {
     return this.http.delete(`${apiURL}/employees/${id}`)
   }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index ada9168..4ae668b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -9,6 +9,7 @@ import { EmployeesRoutingModule } from './employees/employees-routing.module';
 import { ProjectsRoutingModule } from './projects/projects-routing.module';
 import { FinancesRoutingModule } from './finances/finances-routing.module';
 import { BenefitsRoutingModule } from './benefits/benefits-routing.module';
+import { EmployeeListingFacadeService } from './employees/employee-listing/employee-listing-facade.service';
 
 export const routes: Routes = [
   {
@@ -29,7 +30,8 @@ export const routes: Routes = [
   },
   {
     path: 'employees',
-    loadChildren: () => EmployeesRoutingModule
+    loadChildren: () => EmployeesRoutingModule,
+    providers: [EmployeeListingFacadeService], 
   },
   {
     path: 'benefits',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7cbd404..f439034 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,7 +19,8 @@ import { FinancesModule } from "./finances/finances.module";
 import { BenefitsModule } from "./benefits/benefits.module";
 import { NavigationComponent } from "./navigation/navigation.component";
 
-@NgModule({
+// standalone - LAZY loading (code splitting)
+@NgModule({ // code loading EAGER
   declarations: [
     AppComponent,
     LicenseComponent,
diff --git a/src/app/employees/employee-listing/employee-listing-facade.service.spec.ts b/src/app/employees/employee-listing/employee-listing-facade.service.spec.ts
new file mode 100644
index 0000000..19e9781
--- /dev/null
+++ b/src/app/employees/employee-listing/employee-listing-facade.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EmployeeListingFacadeService } from './employee-listing-facade.service';
+
+describe('EmployeeListingFacadeService', () => {
+  let service: EmployeeListingFacadeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EmployeeListingFacadeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/employees/employee-listing/employee-listing-facade.service.ts b/src/app/employees/employee-listing/employee-listing-facade.service.ts
new file mode 100644
index 0000000..99d6bdf
--- /dev/null
+++ b/src/app/employees/employee-listing/employee-listing-facade.service.ts
@@ -0,0 +1,35 @@
+import { DestroyRef, inject, Injectable } from '@angular/core';
+
+// @Injectable()
+@Injectable({ // wstrzykiwalne (DI)
+  // providedIn: 'root' // ROOT injector
+  providedIn: null // EXPLICITE: NIGDZIE
+})
+export class EmployeeListingFacadeService {
+
+  constructor() { }
+
+  doStuff(){}
+}
+
+// zalety inject function:
+// (1) grupujemy razem wszystko co jest związane z 1 serwisem:
+// poprzez kompozycję (funkcji)
+// klasa + onInit + onDestroy + cokolwiek innego z nim powiązane
+// (2) type-safety
+// (3) oprócz "private" możemy zrobić native private: "#"
+export function injectEmployeeListingFacade(){
+  // return inject(EmployeeListingFacadeService)
+
+  const svc = inject(EmployeeListingFacadeService, {optional: true})
+  svc?.doStuff()
+  // INITIALIZATION LOGIC
+  console.log('wielkie tworzenie')
+  // DESTRUCTION LOGIC
+  const destroyRef = inject(DestroyRef) // uruchom się KIEDY masz być NISZCZONY
+  destroyRef.onDestroy(() => { 
+    console.log('wielkie niszczenie')
+  })
+
+  return svc
+}
diff --git a/src/app/employees/employee-listing/employee-listing.component.html b/src/app/employees/employee-listing/employee-listing.component.html
index 421cb79..5d9b792 100644
--- a/src/app/employees/employee-listing/employee-listing.component.html
+++ b/src/app/employees/employee-listing/employee-listing.component.html
@@ -1,10 +1,14 @@
-<itcorpo-sidebar [(collapsed)]="sidebarCollapsed">
-  RECENTLY VIEWED EMPLOYEES DISPLAYED HERE
-</itcorpo-sidebar>
+@defer(on timer(1s)){
+  <itcorpo-sidebar [(collapsed)]="sidebarCollapsed">
+    RECENTLY VIEWED EMPLOYEES DISPLAYED HERE
+  </itcorpo-sidebar>
+}
 
 <span (click)="onToggleSidebar()" class="icon">📖</span>
 <!-- <itcorpo-round-button (clicked)="onToggleSidebar()"></itcorpo-round-button> -->
 
+<button (click)="manualInject()">odpal injecta</button>
+
 <h2>Our Employees</h2>
 
 city: <itcorpo-dropdown [options]="cities"></itcorpo-dropdown>
diff --git a/src/app/employees/employee-listing/employee-listing.component.ts b/src/app/employees/employee-listing/employee-listing.component.ts
index 0f08239..613dff6 100644
--- a/src/app/employees/employee-listing/employee-listing.component.ts
+++ b/src/app/employees/employee-listing/employee-listing.component.ts
@@ -1,17 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Host, inject, Injector, OnInit, Optional, runInInjectionContext, Self, SkipSelf } from '@angular/core';
 
 import { Observable } from 'rxjs';
 
 import { Employee } from 'src/app/api/dto';
 
 import { EmployeesService } from 'src/app/api/employees.service';
+import { EmployeeListingFacadeService, injectEmployeeListingFacade } from './employee-listing-facade.service';
 
 @Component({
   selector: 'itcorpo-employee-listing',
   templateUrl: './employee-listing.component.html',
-  styleUrls: ['./employee-listing.component.css']
+  styleUrls: ['./employee-listing.component.css'],
+  providers: [EmployeeListingFacadeService], // lokalny injector (tego komponentu)
 })
 export class EmployeeListingComponent implements OnInit {
+  // employees$: Observable<Employee[]> = this.employeeSvc.getAllEmployees()
   employees$!: Observable<Employee[]>
 
   sidebarCollapsed: boolean = true
@@ -23,9 +26,39 @@ export class EmployeeListingComponent implements OnInit {
 
   constructor(
     private employeeSvc: EmployeesService,
-  ) { }
+    // @Self() @SkipSelf() @Optional() @Host() private __employeeFacade: EmployeeListingFacadeService,
+    @Optional() private __employeeFacade: EmployeeListingFacadeService,
+  ) {
+    // injection context: constructor
+    // const employeeFacade = inject(EmployeeListingFacadeService)
+  }
+
+  // injection context: field initializer (de facto constructor)
+  // private employeeFacade = inject(EmployeeListingFacadeService)
+  private employeeFacade = injectEmployeeListingFacade()
+
+  // to jest PRYWATNE POLE JAVASCRIPT
+  #injector = inject(Injector)
+
+  // private vs #
+  // private - exists in compile-time only (in JS - public)
+  // # both compile- and runtime type-safety
+  
+  manualInject(){
+    
+    const employeeFacade = runInInjectionContext(this.#injector, () => {
+      return injectEmployeeListingFacade()
+      // return inject(EmployeeListingFacadeService, {})
+    })
+    // const employeeFacade = inject(EmployeeListingFacadeService, {})
+    console.log(employeeFacade)
+  }
+
+  ngOnDestroy(){}
 
   ngOnInit() {
+    // this.__employeeFacade.doStuff() // przechodzi :(
+    // this.employeeFacade.doStuff() // kompilator się czepia 👍
     this.employees$ = this.employeeSvc.getAllEmployees()
     // this.employees$ = this.employeeSvc.getAllEmployees({ nationality: "PL" })
     // this.employees$ = this.employeeSvc.getAllEmployees({ office_like: "Poland" })