把獲取模型數據的任務重構為一個單獨的服務，它將提供英雄數據，並把服務在所有需要英雄數據的組件間共享。

@Injectable()
export class HeroService {
  getHeroes(): void {} // stub
}

HeroService可以從任何地方獲取Hero數據 —— Web服務、本地存儲或模擬數據源。

Service不是new()出來的

文檔裏給出了李菊福的理由：

我們的組件得弄清楚該如何創建HeroService。 如果有一天我們修改了HeroService的構造函數，我們不得不找出創建過此服務的每一處代碼，並修改它。 圍著補丁代碼轉圈很容易導致錯誤，還會增加測試負擔。

我們每次使用new都會創建一個新的服務實例。 如果這個服務需要緩存英雄列表，並把這個緩存共享給別人呢？怎麽辦？ 沒辦法，做不到。

我們把AppComponent鎖定到HeroService的一個特定實現。 我們很難在不同的場景中切換實現。 例如，能離線操作嗎？能在測試時使用不同的模擬版本嗎？這可不容易。

在app.component.ts裏

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

import { Hero } from ‘./hero‘;
import { HeroService } from ‘./hero.service‘;

@Component({
  selector: 
 
‘my-app‘,
  template: `...‘,//略
  providers: [HeroService]
})
export class AppComponent implements OnInit {
  title = ‘Tour of Heroes‘;
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  getHeroes(): void {
    this.heroService.getHeroes().then(heroes => this
 
.heroes = heroes);
  }

  ngOnInit(): void {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

1 import

2 在@Component裏增加 providers: [HeroService]

3 在APPComponent的構造函數裏傳入constructor(private heroService: HeroService)，這樣直接有了heroService的私有屬性，不需要在開頭聲明了

Model部分

類似 models.py 定義數據類型

export class Hero {
  id: number;
  name: string;
}

類似 models.py定義的ORM類。可以送進模板用雙括號訪問屬性 {{hero.name}}

ng的雙向綁定很給力。

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

從flask視角理解angular（三）ORM VS Service