[Angular 2] 9. Value Providers & @Inject

Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a primitive, or maybe just a configuration object. For these cases, we can use value providers and in this lesson we’ll discuss, how they are created.

For example we have this code:

import {LoggerProvider} from ‘./LoggerProvider‘;import (Http) from ‘@angular/http‘;
import {Injectable} from ‘@angular/core‘;

@Injectable
export class TodoService{

    apiUrl : string = "http://localhost:3000/api"

    constructor(private logger: LoggerProvider, private http: Http){ }

    getTodos(){
        this.logger.debug(‘Items‘, this.todos);
        return this.http.get(`${this.apiUrl}/todos`).map(res => res.json());
    }
}

Code use hard coded ‘apiUrl‘ to get data from backend. It would be better to inject apiUrl instead of hard coded.

app.ts:

 providers: [
    TodoService,
    ConsoleService,
    TranslateService,
   ,{
        provide: LoggerProvider, useFactory: (cs, ts) => {
             return new LoggerProvider(cs, ts, true)
        },
        deps: [ConsoleService, TranslateService]
    }
   ,{
        provide: apiUrl,
        useValue: ‘http://localhost:3000/api‘
    }
], 

Inside providers we add another value provider. Using keyword ‘useValue‘.

Then in the TodoService, we can do:

import {LoggerProvider} from ‘./LoggerProvider‘;
import {Injectable} from ‘@angular/core‘;import {Http} from ‘@angular/core‘;
import {Inject} from ‘@angular/core‘;

@Injectable
export class TodoService{

    constructor(@Inject(apiUrl) private apiUrl, private logger: LoggerProvider, private http: Http){ }

    getTodos(){
        this.logger.debug(‘Items‘, this.todos);
        return this.http.get(`${this.apiUrl}/todos`).map(res => res.json());
    }
}

We add @Inject because ‘apiUrl‘ doesn‘t have annotation for ‘apiUrl‘.  Angular provide @Inject for this case. @inject is a decorator that we can attach to the constructor parameter so we can annotate them with the required metadata.

Another thing to note is that @inject takes any token, not just strings.

We can also do:

constructor(@Inject(apiUrl) private apiUrl, @Inject(LoggerProvider) private logger, private http: Http){ }

This is useful if we happen to write our Angular 2 application in a language other than TypeScript, where type annotations don‘t exist.