AngularJS 依赖注入(inject) VS ES6 导入

Question

我最近使用 AngularJS 和 ES6 创建了一个新项目。这是我的第一个 ES6 项目，我对它的 import 语句非常满意。以前，我必须使用 AngularJS 依赖注入(inject)才能在应用程序逻辑中使用不同的服务。现在我可以使用 ES6 import 轻松导入不同的服务。问题是我是否可以编写非 angular.service 并使用 import 导入它们，或者我必须以 angular.service (或工厂)格式编写它们，并使用依赖项注入(inject)来导入？

Answer 1

首先，Angular dependency injection和 ES6 import是两个不同的概念。

Angular 依赖项注入(inject)是一种为组件提供依赖项的方法，而不是在组件内对它们进行硬编码。这使组件无需定位依赖项，并使依赖项可配置。

ES6 import 是一项 JavaScript 功能，用于导入由另一个模块导出的绑定(bind)。

您可以导入一个模块，它可以是您的服​​务类，并将其添加为 angular.service 。如果您正在编写“非 Angular ”服务，只需确保它是可导出的 ES6 类即可。您不能直接使用 ES6 类作为依赖项，因为 Angular 需要在 DI 之前对其进行 Angular 化。

my-service.service.js

export default class MyService {
  constructor() {
    this.items = [''];
  }

  getItem() {
    return this.items;
  }
}

MyService.$inject = ['SomeOtherService'];

在index.js

import angular from 'angular';
import MyService from './my-service.service';

angular.module('myApp')
  .service('MyService', MyService);

这是 ES6 与 AngularJS 依赖注入(inject)配合使用的一种方式。