Skip to content

Commit bdb4173

Browse files
cleberhenselcleberhensel
committed
Refactor lesson files to implement signals for state management, enhance component structure, and improve change detection with OnPush strategy; update examples and templates accordingly.
1 parent 9947c77 commit bdb4173

11 files changed

Lines changed: 1444 additions & 1 deletion

‎modules/module-1/lessons/lesson-1-4.md‎

Lines changed: 340 additions & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,26 @@ Crie uma estrutura com:
6464
### Abordagem Recomendada
6565

6666
**global.service.ts**
67+
import { Injectable } from '@angular/core';
68+
69+
@Injectable({
70+
providedIn: 'root'
71+
})
72+
export class GlobalService {
73+
private instanceId = Math.random().toString(36).substr(2, 9);
74+
75+
constructor() {
76+
console.log(`GlobalService criado: ${this.instanceId}`);
77+
}
78+
79+
getInstanceId(): string {
80+
return this.instanceId;
81+
}
82+
83+
getServiceName(): string {
84+
return 'GlobalService (root)';
85+
}
86+
}
6787
```typescript
6888
import { Injectable } from '@angular/core';
6989

@@ -88,6 +108,24 @@ export class GlobalService {
88108
```
89109

90110
**component.service.ts**
111+
import { Injectable } from '@angular/core';
112+
113+
@Injectable()
114+
export class ComponentService {
115+
private instanceId = Math.random().toString(36).substr(2, 9);
116+
117+
constructor() {
118+
console.log(`ComponentService criado: ${this.instanceId}`);
119+
}
120+
121+
getInstanceId(): string {
122+
return this.instanceId;
123+
}
124+
125+
getServiceName(): string {
126+
return 'ComponentService (component level)';
127+
}
128+
}
91129
```typescript
92130
import { Injectable } from '@angular/core';
93131

@@ -110,6 +148,35 @@ export class ComponentService {
110148
```
111149

112150
**parent.component.ts**
151+
import { Component } from '@angular/core';
152+
import { GlobalService } from './global.service';
153+
import { ComponentService } from './component.service';
154+
import { ChildComponent } from './child.component';
155+
156+
@Component({
157+
selector: 'app-parent',
158+
standalone: true,
159+
imports: [ChildComponent],
160+
providers: [ComponentService],
161+
template: `
162+
<div class="parent">
163+
<h2>Componente Pai</h2>
164+
<p>GlobalService ID: {{ globalService.getInstanceId() }}</p>
165+
<p>ComponentService ID: {{ componentService.getInstanceId() }}</p>
166+
<app-child></app-child>
167+
</div>
168+
`
169+
})
170+
export class ParentComponent {
171+
constructor(
172+
public globalService: GlobalService,
173+
public componentService: ComponentService
174+
) {
175+
console.log('ParentComponent - GlobalService:', this.globalService.getInstanceId());
176+
console.log('ParentComponent - ComponentService:', this.componentService.getInstanceId());
177+
}
178+
}
179+
{% raw %}
113180
```typescript
114181
import { Component } from '@angular/core';
115182
import { GlobalService } from './global.service';
@@ -140,8 +207,38 @@ export class ParentComponent {
140207
}
141208
}
142209
```
210+
{% endraw %}
143211

144212
**child.component.ts**
213+
import { Component } from '@angular/core';
214+
import { GlobalService } from './global.service';
215+
import { ComponentService } from './component.service';
216+
217+
@Component({
218+
selector: 'app-child',
219+
standalone: true,
220+
template: `
221+
<div class="child">
222+
<h3>Componente Filho</h3>
223+
<p>GlobalService ID: {{ globalService.getInstanceId() }}</p>
224+
<p>ComponentService ID: {{ componentService.getInstanceId() }}</p>
225+
<p class="note">
226+
GlobalService: Mesma instância (root)<br>
227+
ComponentService: Mesma instância do pai (herdado)
228+
</p>
229+
</div>
230+
`
231+
})
232+
export class ChildComponent {
233+
constructor(
234+
public globalService: GlobalService,
235+
public componentService: ComponentService
236+
) {
237+
console.log('ChildComponent - GlobalService:', this.globalService.getInstanceId());
238+
console.log('ChildComponent - ComponentService:', this.componentService.getInstanceId());
239+
}
240+
}
241+
{% raw %}
145242
```typescript
146243
import { Component } from '@angular/core';
147244
import { GlobalService } from './global.service';
@@ -172,6 +269,7 @@ export class ChildComponent {
172269
}
173270
}
174271
```
272+
{% endraw %}
175273

176274
**Explicação da Solução**:
177275

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,26 @@ Demonstre diferenças criando múltiplos componentes e módulos lazy-loaded.
6363
### Abordagem Recomendada
6464

6565
**root.service.ts**
66+
import { Injectable } from '@angular/core';
67+
68+
@Injectable({
69+
providedIn: 'root'
70+
})
71+
export class RootService {
72+
private instanceId = Math.random().toString(36).substr(2, 9);
73+
74+
constructor() {
75+
console.log(`[ROOT] RootService criado: ${this.instanceId}`);
76+
}
77+
78+
getInstanceId(): string {
79+
return this.instanceId;
80+
}
81+
82+
getScope(): string {
83+
return 'root - Singleton global';
84+
}
85+
}
6686
```typescript
6787
import { Injectable } from '@angular/core';
6888

@@ -87,6 +107,26 @@ export class RootService {
87107
```
88108

89109
**any.service.ts**
110+
import { Injectable } from '@angular/core';
111+
112+
@Injectable({
113+
providedIn: 'any'
114+
})
115+
export class AnyService {
116+
private instanceId = Math.random().toString(36).substr(2, 9);
117+
118+
constructor() {
119+
console.log(`[ANY] AnyService criado: ${this.instanceId}`);
120+
}
121+
122+
getInstanceId(): string {
123+
return this.instanceId;
124+
}
125+
126+
getScope(): string {
127+
return 'any - Nova instância por módulo lazy';
128+
}
129+
}
90130
```typescript
91131
import { Injectable } from '@angular/core';
92132

@@ -111,6 +151,24 @@ export class AnyService {
111151
```
112152

113153
**component-scoped.service.ts**
154+
import { Injectable } from '@angular/core';
155+
156+
@Injectable()
157+
export class ComponentScopedService {
158+
private instanceId = Math.random().toString(36).substr(2, 9);
159+
160+
constructor() {
161+
console.log(`[COMPONENT] ComponentScopedService criado: ${this.instanceId}`);
162+
}
163+
164+
getInstanceId(): string {
165+
return this.instanceId;
166+
}
167+
168+
getScope(): string {
169+
return 'component - Nova instância por componente';
170+
}
171+
}
114172
```typescript
115173
import { Injectable } from '@angular/core';
116174

@@ -133,6 +191,49 @@ export class ComponentScopedService {
133191
```
134192

135193
**demo.component.ts**
194+
import { Component } from '@angular/core';
195+
import { RootService } from './root.service';
196+
import { AnyService } from './any.service';
197+
import { ComponentScopedService } from './component-scoped.service';
198+
199+
@Component({
200+
selector: 'app-demo',
201+
standalone: true,
202+
providers: [ComponentScopedService],
203+
template: `
204+
<div class="demo">
205+
<h2>Demonstração de Escopos</h2>
206+
207+
<div class="service-info">
208+
<h3>RootService (providedIn: 'root')</h3>
209+
<p>ID: {{ rootService.getInstanceId() }}</p>
210+
<p>{{ rootService.getScope() }}</p>
211+
</div>
212+
213+
<div class="service-info">
214+
<h3>AnyService (providedIn: 'any')</h3>
215+
<p>ID: {{ anyService.getInstanceId() }}</p>
216+
<p>{{ anyService.getScope() }}</p>
217+
</div>
218+
219+
<div class="service-info">
220+
<h3>ComponentScopedService (component providers)</h3>
221+
<p>ID: {{ componentService.getInstanceId() }}</p>
222+
<p>{{ componentService.getScope() }}</p>
223+
</div>
224+
225+
<app-demo-child></app-demo-child>
226+
</div>
227+
`
228+
})
229+
export class DemoComponent {
230+
constructor(
231+
public rootService: RootService,
232+
public anyService: AnyService,
233+
public componentService: ComponentScopedService
234+
) {}
235+
}
236+
{% raw %}
136237
```typescript
137238
import { Component } from '@angular/core';
138239
import { RootService } from './root.service';
@@ -177,8 +278,35 @@ export class DemoComponent {
177278
) {}
178279
}
179280
```
281+
{% endraw %}
180282

181283
**demo-child.component.ts**
284+
import { Component } from '@angular/core';
285+
import { RootService } from './root.service';
286+
import { AnyService } from './any.service';
287+
import { ComponentScopedService } from './component-scoped.service';
288+
289+
@Component({
290+
selector: 'app-demo-child',
291+
standalone: true,
292+
providers: [ComponentScopedService],
293+
template: `
294+
<div class="child-demo">
295+
<h3>Componente Filho</h3>
296+
<p>RootService ID: {{ rootService.getInstanceId() }} (mesmo)</p>
297+
<p>AnyService ID: {{ anyService.getInstanceId() }} (mesmo se mesmo módulo)</p>
298+
<p>ComponentScopedService ID: {{ componentService.getInstanceId() }} (novo)</p>
299+
</div>
300+
`
301+
})
302+
export class DemoChildComponent {
303+
constructor(
304+
public rootService: RootService,
305+
public anyService: AnyService,
306+
public componentService: ComponentScopedService
307+
) {}
308+
}
309+
{% raw %}
182310
```typescript
183311
import { Component } from '@angular/core';
184312
import { RootService } from './root.service';
@@ -206,6 +334,7 @@ export class DemoChildComponent {
206334
) {}
207335
}
208336
```
337+
{% endraw %}
209338

210339
**Explicação da Solução**:
211340

0 commit comments

Comments
 (0)