Implement new components and services in lessons, enhancing state management with signals and improving change detection strategies; update templates and examples for better clarity and functionality.

Author: cleberhensel

modules/module-2/lessons/exercises/lesson-2-1-exercise-2-di-hierarquica.md

@@ -66,6 +66,26 @@ Crie uma estrutura com:
 **global.service.ts**
 import { Injectable } from '@angular/core';
 
+@Injectable({
+  providedIn: 'root'
+})
+export class GlobalService {
+  private instanceId = Math.random().toString(36).substr(2, 9);
+  
+  constructor() {
+    console.log(`GlobalService criado: ${this.instanceId}`);
+  }
+  
+  getInstanceId(): string {
+    return this.instanceId;
+  }
+  
+  getServiceName(): string {
+    return 'GlobalService (root)';
+  }
+}
+import { Injectable } from '@angular/core';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -110,6 +130,24 @@ export class GlobalService {
 **component.service.ts**
 import { Injectable } from '@angular/core';
 
+@Injectable()
+export class ComponentService {
+  private instanceId = Math.random().toString(36).substr(2, 9);
+  
+  constructor() {
+    console.log(`ComponentService criado: ${this.instanceId}`);
+  }
+  
+  getInstanceId(): string {
+    return this.instanceId;
+  }
+  
+  getServiceName(): string {
+    return 'ComponentService (component level)';
+  }
+}
+import { Injectable } from '@angular/core';
+
 @Injectable()
 export class ComponentService {
   private instanceId = Math.random().toString(36).substr(2, 9);
@@ -161,8 +199,13 @@ import { ChildComponent } from './child.component';
   template: `
     <div class="parent">
       <h2>Componente Pai</h2>
+{% raw %}
+
       <p>GlobalService ID: {{ globalService.getInstanceId() }}</p>
+{% endraw %}
+
       <p>ComponentService ID: {{ componentService.getInstanceId() }}</p>
+
       <app-child></app-child>
     </div>
   `
@@ -177,6 +220,34 @@ export class ParentComponent {
   }
 }
 {% raw %}
+import { Component } from '@angular/core';
+import { GlobalService } from './global.service';
+import { ComponentService } from './component.service';
+import { ChildComponent } from './child.component';
+
+@Component({
+  selector: 'app-parent',
+  standalone: true,
+  imports: [ChildComponent],
+  providers: [ComponentService],
+  template: `
+    <div class="parent">
+      <h2>Componente Pai</h2>
+      <p>GlobalService ID: {{ globalService.getInstanceId() }}</p>
+      <p>ComponentService ID: {{ componentService.getInstanceId() }}</p>
+      <app-child></app-child>
+    </div>
+  `
+})
+export class ParentComponent {
+  constructor(
+    public globalService: GlobalService,
+    public componentService: ComponentService
+  ) {
+    console.log('ParentComponent - GlobalService:', this.globalService.getInstanceId());
+    console.log('ParentComponent - ComponentService:', this.componentService.getInstanceId());
+  }
+}
 ```typescript
 import { Component } from '@angular/core';
 import { GlobalService } from './global.service';
@@ -220,8 +291,13 @@ import { ComponentService } from './component.service';
   template: `
     <div class="child">
       <h3>Componente Filho</h3>
+{% raw %}
+
       <p>GlobalService ID: {{ globalService.getInstanceId() }}</p>
+{% endraw %}
+
       <p>ComponentService ID: {{ componentService.getInstanceId() }}</p>
+
       <p class="note">
         GlobalService: Mesma instância (root)<br>
         ComponentService: Mesma instância do pai (herdado)
@@ -239,6 +315,34 @@ export class ChildComponent {
   }
 }
 {% raw %}
+import { Component } from '@angular/core';
+import { GlobalService } from './global.service';
+import { ComponentService } from './component.service';
+
+@Component({
+  selector: 'app-child',
+  standalone: true,
+  template: `
+    <div class="child">
+      <h3>Componente Filho</h3>
+      <p>GlobalService ID: {{ globalService.getInstanceId() }}</p>
+      <p>ComponentService ID: {{ componentService.getInstanceId() }}</p>
+      <p class="note">
+        GlobalService: Mesma instância (root)<br>
+        ComponentService: Mesma instância do pai (herdado)
+      </p>
+    </div>
+  `
+})
+export class ChildComponent {
+  constructor(
+    public globalService: GlobalService,
+    public componentService: ComponentService
+  ) {
+    console.log('ChildComponent - GlobalService:', this.globalService.getInstanceId());
+    console.log('ChildComponent - ComponentService:', this.componentService.getInstanceId());
+  }
+}
 ```typescript
 import { Component } from '@angular/core';
 import { GlobalService } from './global.service';

modules/module-2/lessons/exercises/lesson-2-1-exercise-3-providers-escopos.md

@@ -65,6 +65,26 @@ Demonstre diferenças criando múltiplos componentes e módulos lazy-loaded.
 **root.service.ts**
 import { Injectable } from '@angular/core';
 
+@Injectable({
+  providedIn: 'root'
+})
+export class RootService {
+  private instanceId = Math.random().toString(36).substr(2, 9);
+  
+  constructor() {
+    console.log(`[ROOT] RootService criado: ${this.instanceId}`);
+  }
+  
+  getInstanceId(): string {
+    return this.instanceId;
+  }
+  
+  getScope(): string {
+    return 'root - Singleton global';
+  }
+}
+import { Injectable } from '@angular/core';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -109,6 +129,26 @@ export class RootService {
 **any.service.ts**
 import { Injectable } from '@angular/core';
 
+@Injectable({
+  providedIn: 'any'
+})
+export class AnyService {
+  private instanceId = Math.random().toString(36).substr(2, 9);
+  
+  constructor() {
+    console.log(`[ANY] AnyService criado: ${this.instanceId}`);
+  }
+  
+  getInstanceId(): string {
+    return this.instanceId;
+  }
+  
+  getScope(): string {
+    return 'any - Nova instância por módulo lazy';
+  }
+}
+import { Injectable } from '@angular/core';
+
 @Injectable({
   providedIn: 'any'
 })
@@ -153,6 +193,24 @@ export class AnyService {
 **component-scoped.service.ts**
 import { Injectable } from '@angular/core';
 
+@Injectable()
+export class ComponentScopedService {
+  private instanceId = Math.random().toString(36).substr(2, 9);
+  
+  constructor() {
+    console.log(`[COMPONENT] ComponentScopedService criado: ${this.instanceId}`);
+  }
+  
+  getInstanceId(): string {
+    return this.instanceId;
+  }
+  
+  getScope(): string {
+    return 'component - Nova instância por componente';
+  }
+}
+import { Injectable } from '@angular/core';
+
 @Injectable()
 export class ComponentScopedService {
   private instanceId = Math.random().toString(36).substr(2, 9);
@@ -206,20 +264,35 @@ import { ComponentScopedService } from './component-scoped.service';
 
       <div class="service-info">
         <h3>RootService (providedIn: 'root')</h3>
+{% raw %}
+
         <p>ID: {{ rootService.getInstanceId() }}</p>
+{% endraw %}
+
         <p>{{ rootService.getScope() }}</p>
+
       </div>
       
       <div class="service-info">
         <h3>AnyService (providedIn: 'any')</h3>
+{% raw %}
+
         <p>ID: {{ anyService.getInstanceId() }}</p>
+{% endraw %}
+
         <p>{{ anyService.getScope() }}</p>
+
       </div>
       
       <div class="service-info">
         <h3>ComponentScopedService (component providers)</h3>
+{% raw %}
+
         <p>ID: {{ componentService.getInstanceId() }}</p>
+{% endraw %}
+
         <p>{{ componentService.getScope() }}</p>
+
       </div>
       
       <app-demo-child></app-demo-child>
@@ -234,6 +307,48 @@ export class DemoComponent {
   ) {}
 }
 {% raw %}
+import { Component } from '@angular/core';
+import { RootService } from './root.service';
+import { AnyService } from './any.service';
+import { ComponentScopedService } from './component-scoped.service';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  providers: [ComponentScopedService],
+  template: `
+    <div class="demo">
+      <h2>Demonstração de Escopos</h2>
+      
+      <div class="service-info">
+        <h3>RootService (providedIn: 'root')</h3>
+        <p>ID: {{ rootService.getInstanceId() }}</p>
+        <p>{{ rootService.getScope() }}</p>
+      </div>
+      
+      <div class="service-info">
+        <h3>AnyService (providedIn: 'any')</h3>
+        <p>ID: {{ anyService.getInstanceId() }}</p>
+        <p>{{ anyService.getScope() }}</p>
+      </div>
+      
+      <div class="service-info">
+        <h3>ComponentScopedService (component providers)</h3>
+        <p>ID: {{ componentService.getInstanceId() }}</p>
+        <p>{{ componentService.getScope() }}</p>
+      </div>
+      
+      <app-demo-child></app-demo-child>
+    </div>
+  `
+})
+export class DemoComponent {
+  constructor(
+    public rootService: RootService,
+    public anyService: AnyService,
+    public componentService: ComponentScopedService
+  ) {}
+}
 ```typescript
 import { Component } from '@angular/core';
 import { RootService } from './root.service';
@@ -293,9 +408,15 @@ import { ComponentScopedService } from './component-scoped.service';
   template: `
     <div class="child-demo">
       <h3>Componente Filho</h3>
+{% raw %}
+
       <p>RootService ID: {{ rootService.getInstanceId() }} (mesmo)</p>
+{% endraw %}
+
       <p>AnyService ID: {{ anyService.getInstanceId() }} (mesmo se mesmo módulo)</p>
+
       <p>ComponentScopedService ID: {{ componentService.getInstanceId() }} (novo)</p>
+
     </div>
   `
 })
@@ -307,6 +428,31 @@ export class DemoChildComponent {
   ) {}
 }
 {% raw %}
+import { Component } from '@angular/core';
+import { RootService } from './root.service';
+import { AnyService } from './any.service';
+import { ComponentScopedService } from './component-scoped.service';
+
+@Component({
+  selector: 'app-demo-child',
+  standalone: true,
+  providers: [ComponentScopedService],
+  template: `
+    <div class="child-demo">
+      <h3>Componente Filho</h3>
+      <p>RootService ID: {{ rootService.getInstanceId() }} (mesmo)</p>
+      <p>AnyService ID: {{ anyService.getInstanceId() }} (mesmo se mesmo módulo)</p>
+      <p>ComponentScopedService ID: {{ componentService.getInstanceId() }} (novo)</p>
+    </div>
+  `
+})
+export class DemoChildComponent {
+  constructor(
+    public rootService: RootService,
+    public anyService: AnyService,
+    public componentService: ComponentScopedService
+  ) {}
+}
 ```typescript
 import { Component } from '@angular/core';
 import { RootService } from './root.service';