View ng-providers.app-cmp-hash2.ts
import { Component, Inject } from '@angular/core';
import { ApiService } from './api.service';
import { Hashwords, IHashwords } from './libs.providers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
View ng-providers.hashwords-register.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HashwordsProvider } from './libs.providers'
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
View ng-providers.libs-providers.ts
import { InjectionToken, ValueProvider } from '@angular/core';
interface IHashwords {
hash: (hash: string) => string[];
hashStr: (hash: string) => string;
random: () => string[];
randomStr: () => string;
}
const Hashwords: InjectionToken<IHashwords> = new InjectionToken<IHashwords>('hashwords');
View ng-providers.app-cmp-hash.ts
import { Component, Inject } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
View ng-providers.api-service-replacement.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ApiService } from 'app/api.service';
import { FakeApiService } from './fake-api.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
View ng-providers.fake-api-service.ts
import { Injectable } from '@angular/core';
import { ApiService } from 'app/api.service';
@Injectable()
export class FakeApiService implements ApiService {
// Using implements to be sure FakeApiService has the same
// methods as original ApiService
constructor() { }
serviceCall() {
View ng-providers.app-cmp-call1.ts
import { Component } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'app';
View ng-providers.api-service-call.ts
import { Injectable } from '@angular/core';
@Injectable()
export class ApiService {
constructor() { }
serviceCall() {
console.log('I am api service instance call!');
}
View ng-providers.api-service-register2.ts
import { ApiService } from 'app/api.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
{ provide: ApiService, useClass: ApiService }
],
bootstrap: [AppComponent]
})
View ng-providers.api-service-register.ts
import { ApiService } from './api.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
ApiService
],
bootstrap: [AppComponent]
})