[Angular 2] Inject Service with "Providers"

In this lesson, we’re going to take a look at how add a class to the providers property of a component creates an actual providers. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token.

 

import {Component} from 'angular2/core';
import {TodoService} from './../services/TodoService';

@Component({
    selector: 'todos',
    providers: [TodoService],
    template: `
        <div>
            <ul>
                <li *ngFor="#todo of todoService.todos 
                    {{todo.name}}
                </li>
            </ul>
        </div>
    `
})

export class TodoList implements OnInit{

    todos: Array<any>

    constructor(private todoService: TodoService){}
    
    ngOnInit(){
        this.todos = this.todoService.getTodos();
    }
}

 

import {Injectable} from '@angular/core';

@Injectable()
export class TodoService {
    todos = [
        {id: 0, name: "eat"},
        {id: 1, name: "sleep"},
        {id: 2, name: "running"},
    ];

    getTodos(){
        return this.todos;
    }
}

 

Here we use providers, which tell Angular, we want to use TodoService, create a instance for us, and so that we can use the instance. 

providers: [TodoService],

Actually, this is shorthard syntax, you can do:

providers: [
 { provider: TodoService, useClass: TodoService}
],

Here need to make sure, "provider" 's token are the same use "userClass", if you change "userClass" to some other service, it will still use the "TodoService":

providers: [
 { provide: TodoService, useClass: OtherService} // still use TodoService instead
],

 

To recap importing a data really just makes the type available, but doesn't give us an instance. In order to inject objects, we need providers that know how to create these objects by a given token which is a type.