testing and commention

code-snapshots/10-change-detection/08-zoneless/src/app/app.component.html

@@ -4,3 +4,4 @@ <h1>Making Sense of Change Detection</h1>
 <app-messages />
 
 <p class="debug-output">{{ debugOutput }}</p>
+

code-snapshots/10-change-detection/08-zoneless/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { CounterComponent } from './counter/counter.component';
 import { MessagesComponent } from './messages/messages.component';
@@ -9,10 +9,31 @@ import { MessagesComponent } from './messages/messages.component';
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
   imports: [CounterComponent, MessagesComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush, // ** Shum i rendesishem ne projekte, e ndimon Angularin te perqendrohet te komponentet qe funksjoni theritet, nga User Interface. **
 })
 export class AppComponent {
+
+ // ** Nese nuk e kemi mbivendosur changeDetection brenda @Component({}) angularin do ti bej call te gjith komponenteve. ** 
+
   get debugOutput() {
     console.log('[AppComponent] "debugOutput" binding re-evaluated.');
     return 'AppComponent Component Debug Output';
   }
+
+  // kur i bejme refresh application na commentohen: 
+  // 1. [AppComponent - Counter - InfoMessages - Messages - NewMessage - MessagesList] - 
+  // po te vem re qe komponentet theritet si pas renditjes se vendosjes ne html sepse Change Detection ose zbulimi i ndryshimit, funksjonon nga PRINDI te FEMIJA.
+
+  // 2. Ta zem se shtypim komponentin InfoMessages, change detection brenda Angularit do ta fokusoj projektin te komponenti InfoMessages duke i ber call vetem ketyre komponenteve:
+  // [AppComponent - Counter - InfoMessages]
+
+  // 3. pasi shtypim nje shkrojne brenda input textarea Angulari e perqendron projekti te prind femije: [AppComponent - Messages - NewMessage].
+  // nese shfaq te njejtin degezim: [AppComponent - Messages - NewMessage], thjesht Angulari po kontrollon per gabime.
+
+  // 4.  kur input textarea ka vlera dhe shtypim submit na shfaqen 3 degezime 
+  // [AppComponent - Messages - NewMessage] - -> marim vleren nga NewMessage, e bashkagjisim ne service dhe fshim inputin
+  // [AppComponent - Messages - NewMessage - MessagesList] - -> marim vleren te regjistruar ne servis dhe e shfaqim ne komponentin MessagesList
+  // [AppComponent - Messages - NewMessage] -> bejme nje kontroll te dyte ne rese dicka ka shkuar keq, si pas regjullit te angularit
+
+  // ** Te gjitha degezimet jan nga PRINDI te FEMIJA **
 }

code-snapshots/10-change-detection/08-zoneless/src/app/counter/counter.component.html

@@ -5,3 +5,4 @@
 </p>
 <p class="debug-output">{{ debugOutput }}</p>
 <app-info-message />
+

code-snapshots/10-change-detection/08-zoneless/src/app/counter/counter.component.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  NgZone,
   OnInit,
   signal,
 } from '@angular/core';
@@ -14,25 +15,36 @@ import { InfoMessageComponent } from '../info-message/info-message.component';
   styleUrl: './counter.component.css',
   imports: [InfoMessageComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
-})
+}) 
 export class CounterComponent implements OnInit {
   count = signal(0);
-
+ 
   get debugOutput() {
     console.log('[Counter] "debugOutput" binding re-evaluated.');
     return 'Counter Component Debug Output';
   }
 
+  constructor(private ngZone: NgZone) {}
+
   ngOnInit() {
     setTimeout(() => {
-      this.count.set(0);
-    }, 4000);
+      console.log('Setting count to 0');
+      this.count.set(0); // kjo behet zero mbas 4 sekondave
+    }, 7000);
 
     setTimeout(() => {
-      console.log('Timer expired!');
+
+      this.ngZone.run(() => {
+        console.log('Timer expired with zone.js!');
+      });
     }, 5000);
-  }
+   }
 
+  // ketu kur shtypim click therasim kompoentet [AppComponent - Counter], sepse ne te gjitha komponentet kemi shtuar kete:
+  // changeDetection: ChangeDetectionStrategy.OnPush i cili e perqendron angularin te komponenti qe po shtypim butonin, 
+  // nga prindi te femija. Nese nuk e kemi mbivendosur changeDetection brenda @Component({}) angularin do ti bej call te gjith 
+  // komponenteve qe nuk kan lidhje me degezimin [AppComponent - Counter].
+  // ** changeDetection na mundeson qe projekti te punoj i konstrukturar dhe shum shpejt. ****
   onDecrement() {
     this.count.update((prevCount) => prevCount - 1);
   }
@@ -41,3 +53,4 @@ export class CounterComponent implements OnInit {
     this.count.update((prevCount) => prevCount + 1);
   }
 }
+

code-snapshots/10-change-detection/08-zoneless/src/app/info-message/info-message.component.html

@@ -1,2 +1,2 @@
-<p (click)="onLog()">This is just an info message!</p>
+<p style="cursor: pointer;" (click)="onLog()">This is just an info message!</p>
 <p class="debug-output">{{ debugOutput }}</p>

code-snapshots/10-change-detection/08-zoneless/src/app/info-message/info-message.component.ts

@@ -14,7 +14,7 @@ export class InfoMessageComponent {
     return 'InfoMessage Component Debug Output';
   }
 
-  onLog() {
+  onLog() { // pasi shtypim butonin angulari perqendrohet te komponentet prind - femij -> [AppComponent - Counter - InfoMessages]
     console.log('Clicked!');
   }
 }

code-snapshots/10-change-detection/08-zoneless/src/app/messages/messages-list/messages-list.component.ts

@@ -10,8 +10,9 @@ import { MessagesService } from '../messages.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MessagesListComponent {
-  private messagesService = inject(MessagesService);
-  messages = this.messagesService.allMessages;
+
+  private messagesService = inject(MessagesService); // marim servisin 
+  messages = this.messagesService.allMessages; // marim array string me vlera 
 
   get debugOutput() {
     console.log('[MessagesList] "debugOutput" binding re-evaluated.');

code-snapshots/10-change-detection/08-zoneless/src/app/messages/messages.component.html

@@ -1,4 +1,6 @@
+
 <app-new-message />
 <app-messages-list />
 
 <p class="debug-output">{{ debugOutput }}</p>
+

code-snapshots/10-change-detection/08-zoneless/src/app/messages/messages.component.ts

@@ -17,3 +17,4 @@ export class MessagesComponent {
     return 'Messages Component Debug Output';
   }
 }
+

code-snapshots/10-change-detection/08-zoneless/src/app/messages/messages.service.ts

@@ -4,10 +4,10 @@ import { Injectable, signal } from '@angular/core';
   providedIn: 'root',
 })
 export class MessagesService {
-  private messages = signal<string[]>([]);
-  allMessages = this.messages.asReadonly();
+  private messages = signal<string[]>([]); // regjistrojme nje array me string
+  allMessages = this.messages.asReadonly(); // marim get all data by array string: messages
 
-  addMessage(message: string) {
+  addMessage(message: string) { // updetojme array string duke e mbushur me te dhena.
     this.messages.update((oldMessages) => [...oldMessages, message]);
   }
 }

code-snapshots/10-change-detection/08-zoneless/src/app/messages/new-message/new-message.component.ts

@@ -17,6 +17,10 @@ import { MessagesService } from '../messages.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewMessageComponent {
+
+  // 1. pasi shtypim nje shkrojne brenda input textarea Angulari e perqendron projekti te prind femije: [AppComponent - Messages - NewMessage].
+  // 2. nese shfaq te njejtin degezim: [AppComponent - Messages - NewMessage], thjesht Angulari po kontrollon per gabime.
+
   private messagesService = inject(MessagesService);
   enteredText = signal('');
 
@@ -25,6 +29,12 @@ export class NewMessageComponent {
     return 'NewMessage Component Debug Output';
   }
 
+  // 3.  kur input textarea ka vlera dhe shtypim submit na shfaqen 3 degezime 
+  // [AppComponent - Messages - NewMessage] - -> marim vleren nga NewMessage, e bashkagjisim ne service dhe fshim inputin
+  // [AppComponent - Messages - NewMessage - MessagesList] - -> marim vleren te regjistruar ne servis dhe e shfaqim ne komponentin MessagesList
+  // [AppComponent - Messages - NewMessage] -> bejme nje kontroll te dyte ne rese dicka ka shkuar keq, si pas regjullit te angularit
+
+  // ** Te gjitha degezimet jan nga PRINDI te FEMIJA ** 
   onSubmit() {
     this.messagesService.addMessage(this.enteredText());
     this.enteredText.set('');

code-snapshots/10-change-detection/08-zoneless/src/main.ts

@@ -4,5 +4,31 @@ import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
-  providers: [provideExperimentalZonelessChangeDetection()],
+
+  // ** Shum e rendesishme kjo: 
+
+  // 1. ne angular.json, ne paragrafin "polyfills": [ "zone.js" ], i mundesojme angularit te punoj me librarin zone.js, e cila:
+  // menaxhon dhe ndjekjen e ekzekutimit të detyrave asinkrone. Ajo ndihmon Angular-in të kuptojë kur duhet të ekzekutojë ciklin 
+  // e detektimit të ndryshimeve për të rifreskuar ndërfaqen e përdoruesit (UI).
+
+  // 2. nese e fshim kete libari nga "polyfills" angulari nga ATOMATIK behet MEKANIK ose MANUAL, Atomatik nenkuptoj qe thirjet e cdo funksjoni brenda komponentit, 
+  // i ben librari zone.js. Kurse manual, therasim ato komponent qe user eshte duke kerkuar nga User Interface dhe jo ti bej call te gjitha komponenteve njekohesisht,
+  // si ben zone.js pa change detection.
+
+  // nese nuk e shtojme kete do na shfaqet ky problem: RuntimeError: NG0908: In this configuration Angular requires Zone.js, ku na thot qe mungon libraria zone.js
+  providers: [provideExperimentalZonelessChangeDetection()], // kjo na mundeson djekje manuale te komponeteve, pranda projektit.
 }).catch((err) => console.error(err));
+
+// Çfarë duhet të marrësh parasysh:
+
+// 1. Menaxhimi manual i detektimit të ndryshimeve: Pa Zone.js, Angular nuk do të dijë automatikisht se kur të rifreskojë komponentët pasi të ndodhin 
+// ngjarje asinkrone (si setTimeout, kërkesat HTTP, etj.). Kështu, duhet të menaxhosh manualisht detektimin e ndryshimeve duke thirrur 
+// ApplicationRef.tick() ose duke përdorur ChangeDetectorRef.detectChanges() kur diçka ndryshon.
+
+// 2. Performanca: Kjo qasje mund të ketë një ndikim pozitiv në performancë, pasi Zone.js nuk do të ndjekë më të gjitha operacionet asinkrone.
+
+// 3. Përdorimi i mekanizmave si Signals: Në Angular 16+, mund të përdorësh edhe Angular Signals, që janë një alternativë reaktive më 
+// moderne për të menaxhuar ndryshimet e të dhënave në aplikacion.
+
+// Përdorimi i Zoneless Change Detection është një veçori eksperimentale që eliminon nevojën për Zone.js, por kërkon më shumë 
+// përgjegjësi nga zhvilluesi për të menaxhuar ciklet e detektimit të ndryshimeve.