Registering providers

To do that you need to register a provider, and there are two places where you can do it. One is in the component decorator.

@Component({
  selector: 'talks-cmp',
  template: `
    <h2>Talks:</h2>
    <talk *ngFor="let t of talks" [talk]="t"></talk>
  `,
  providers: [TalksAppBackend]
})
class TalksCmp {
  constructor(backend:TalksAppBackend) {
    this.talks = backend.fetchTalks();
  }
}

And the other one is in the module decorator.

@NgModule({
  declarations: [FormattedRatingPipe, WatchButtonCmp, \
    RateButtonCmp, TalkCmp, TalksCmp],
  exports: [TalksCmp],
  providers: [TalksAppBackend]
})
class TalksModule {}

 

What is the difference and which one should you prefer?

Generally, I recommend to register providers at the module level when they do not depend on the DOM, components, or directives. And only UI-related providers that have to be scoped to a particular component should be registered at the component level. Since TalksAppBackend has nothing...