Angular · Theory

Services

Theory

13/43

Services

A service is a class with @Injectable that holds shared work: fetch marks, cache them, compute totals. Components stay thin. Two pages inject the same MarksService and see the same data if providedIn: 'root'.

Board: MarksPage and ReportPage both call marksService.list(). Don’t new MarksService() inside a component — you get two copies and a bug that looks like ‘state reset’.

Trap: putting HTTP + alert() + routing inside one service method. Split: data in the service, navigation in the component.

Diagram

  MarksPage ──inject──► MarksService
  ReportPage ──inject──► MarksService
  one root instance

Exam tip

Why DI, not new. One MarksService example.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Services: toggle open. Say whether the panel is on screen after one click.

Short notes

Def@Injectable shared logic. Components stay thin.
RuleprovidedIn: 'root' for one app-wide instance.
Trapnew Service() inside a component.

import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <h1>{{ title }}</h1> <button (click)="toggle()">Toggle</button> <p *ngIf="open">Panel open</p> `, }) export class AppComponent { title = "Angular practice"; open = true; toggle() { this.open = !this.open; } }

Services

Example

Short notes

Questions

Services

Example

Short notes

Questions