why the example of angular-webpack-stater don't state AppState in providers，however state Title which is aslo service

Question

The address of the code is https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/home/home.component.ts

import { AppState } from '../app.service';
import { Title } from './title';
import { XLargeDirective } from './x-large';

@Component({

  selector: 'home',

  providers: [
    Title
  ],

  styleUrls: [ './home.component.css' ],

  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

  public localState = { value: '' };

  constructor(
    public appState: AppState,
    public title: Title
  ) {}
.....

Answer 1

Because they provide it at the module level

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.module.ts#L38

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.module.ts#L67

Angulars DI is hierarchical. When a component has a dependency, DI looks at the components providers, it's parent components providers up to AppComponent and then continues at providers provided at module level, where it will find AppState.