下面是 SAP 電商云 Spartacus UI 兩個 Angular Service 類，都加上了 @Injectable 的注解，區別就在于是否具有輸入參數 providedIn：

@Injectable() 裝飾器指定 Angular 可以在 DI 系統中使用這個類。 這個注解的輸入元數據，providedIn: ‘root’，意味著被注解的 Angular service 類，在整個應用程序中都是可見的。

當將服務（提供者）注入到我們的組件/服務中時，通過構造函數中的類型定義來指定我們需要的提供者。下面是一個例子：

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'example-component',
  template: '<div>I am a component</div>'
})
class ExampleComponent {
  constructor(private http: Http) {
    // use `this.http` which is the Http provider
  }
}

這里的類型定義是 Http（注意大寫的 H），Angular 會自動將其分配給 http。

對于 JavaScript 開發人員來說，上面的工作方式或許有些神奇。類型定義是特定于 TypeScript 的，所以我們編譯的 JavaScript 代碼理論上應該不知道在瀏覽器中運行它時我們的 http 參數是什么。

在我們的 tsconfig.json 文件中，我們將 emitDecoratorMetadata 設置為 true。 這會將有關參數類型的元數據發送到我們編譯的 JavaScript 輸出中的裝飾器中。

讓我們看看上面列舉的 TypeScript 代碼，實際上被編譯成什么（為了清楚起見，我保留了 ES6 導入）：

import { Component } from '@angular/core';
import { Http } from '@angular/http';

var ExampleComponent = (function() {
  function ExampleComponent(http) {
    this.http = http;
  }
  return ExampleComponent;
})();
ExampleComponent = __decorate(
  [
    Component({
      selector: 'example-component',
      template: '<div>I am a component</div>',
    }),
    __metadata('design:paramtypes', [Http]),
  ],
  ExampleComponent
);

從這里，我們可以看到編譯后的代碼，知道 http 就是 @angular/http 提供的 Http 服務 - 它被添加為我們的類的裝飾器：

__metadata('design:paramtypes', [Http]);

所以本質上，@Component 裝飾器被轉換為普通的 ES5，并且一些額外的元數據通過 __decorate 賦值提供。 這反過來告訴 Angular 查找 Http 令牌并將其作為第一個參數提供給組件的構造函數 - 將其分配給 this.http：

function ExampleComponent(http) {
  this.http = http;
}