Angular · Theory

Advanced DI

Theory

31/43

Advanced DI

Advanced DI 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 Advanced DI.

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

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

Viva — what is Advanced DI? Then show @Injectable + constructor inject. Then name the trap.

Diagram

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

Exam tip

What is Advanced DI? 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;
  }
}

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

Short notes

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

Angular · Theory

Advanced DI

← All stacks

Theory

31/43

Advanced DI

Advanced DI 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 Advanced DI.

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

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

Viva — what is Advanced DI? Then show @Injectable + constructor inject. Then name the trap.

Diagram

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

Exam tip

What is Advanced DI? 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;
  }
}

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

Short notes

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

Advanced DI

Example

Short notes

Questions

Advanced DI

Example

Short notes

Questions