Angular · Theory

Services & DI

Theory

24/43

Services & DI

Services & DI (and) is a Angular topic. In plain words you use it for MarksService shared by two pages in the campus app. Don’t start with a slogan — start with that picture.

Smallest example: @Injectable + constructor inject. Type it, run it, and say what you see. If you can do that from memory, you know Services & DI (and).

From the example next to this theory — Services & DI: toggle open.

Trap — new MarksService() in each component. Fix that before you talk about advanced Angular.

Viva — what is Services & DI (and)? Then show @Injectable + constructor inject. Then name the trap.

Diagram

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

Exam tip

What is Services & DI (and)? Show this: @Injectable + constructor inject. Trap: new MarksService() in each component.

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 & DI: toggle open. Say whether the panel is on screen after one click.

Short notes

DefServices & DI (and) — MarksService shared by two pages in the campus app.
Rule@Injectable + constructor inject
Trapnew MarksService() in each component
Usethe campus app

Angular · Theory

Services & DI

← All stacks

Theory

24/43

Services & DI

Services & DI (and) is a Angular topic. In plain words you use it for MarksService shared by two pages in the campus app. Don’t start with a slogan — start with that picture.

Smallest example: @Injectable + constructor inject. Type it, run it, and say what you see. If you can do that from memory, you know Services & DI (and).

From the example next to this theory — Services & DI: toggle open.

Trap — new MarksService() in each component. Fix that before you talk about advanced Angular.

Viva — what is Services & DI (and)? Then show @Injectable + constructor inject. Then name the trap.

Diagram

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

Exam tip

What is Services & DI (and)? Show this: @Injectable + constructor inject. Trap: new MarksService() in each component.

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 & DI: toggle open. Say whether the panel is on screen after one click.

Short notes

DefServices & DI (and) — MarksService shared by two pages in the campus app.
Rule@Injectable + constructor inject
Trapnew MarksService() in each component
Usethe campus app

Services & DI

Example

Short notes

Questions

Services & DI

Example

Short notes

Questions