Angularで自作の「サービス」を定義するには？（@Injectableデコレーター）：Angular TIPS

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

import { Article } from './article';

// ［1］@Injectableデコレーターを付与
@Injectable()
export class ArticleService {
  // ［2］全ての記事情報を配列として返す
  getArticles(): Article[] {
    return [
      {
        url: 'http://www.buildinsider.net/web/jqueryref',
        title: 'jQuery逆引きリファレンス',
        author: 'WINGSプロジェクト',
        released: new Date(2017, 10, 1)
      },
      ……中略……
    ];
  }
}

export class Article {
    url: string;
    title: string;
    author: string;
    released: Date;
  }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Provider } from '@angular/core';

import { AppComponent } from './app.component';
import { ArticleService }  from './article.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ArticleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';

import { Article } from './article';
import { ArticleService } from './article.service';

@Component({
  selector: 'app-root',
  template: `
  <table class="table">
  <tr>
    <th>タイトル</th><th>著者</th><th>公開日</th>
  </tr>
  <tr *ngFor="let article of articles">
    <td><a href="{{article.url}}">{{article.title}}</a></td>
    <td>{{article.author}}</td>
    <td>{{article.released | date: 'mediumDate'}}</td>
  </tr>
  </table>
  `,
  styleUrls: ['./app.component.css'],
})

export class AppComponent implements OnInit {
  articles: Article[];

  // ［1］ArticleServiceサービスを有効化
  constructor(private articleservice: ArticleService) {}

  // ［2］コンポーネントの初期化時に記事情報を取得
  ngOnInit() {
    this.articles = this.articleservice.getArticles();
  }
}