Injecting a simple service into a component

The most common use case will be for a component to directly inject a service into itself. Although the rhythms of defining service types and using dependency injection remain mostly the same, it's important to get a good hold of the fundamentals of Angular 2's dependency injection schema, as it differs in several important ways.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/4263.

Getting ready

Suppose you had the following skeleton application:

[app/root.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'root', 
  template: ` 
    <h1>root component!</h1> 
    <button (click)="fillArticle()">Show article</button> 
    <h2>{{title}}</h2> 
  ` 
}) 
export class RootComponent { 
  title:string; 
  constructor() {} 
  fillArticle() {} 
} 

Your objective...