AngularJS 依赖注入 VS ES6 导入答案

【问题标题】：AngularJS Dependency Injection VS ES6 ImportAngularJS 依赖注入 VS ES6 导入
【发布时间】：2017-05-09 05:41:45
【问题描述】：

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

【问题讨论】：

依赖注入和导入甚至没有远程相关。您将同时使用两者。
是的，我两个都用。但我的问题是关于在控制器中要求服务。我可以编写角度服务并将其注入控制器，或者我可以编写一个普通的 JS 类或函数并将其导入以在控制器中使用。我问在AngularJS中使用import而不是AngularJS DI是否是一种反模式。 @zeroflagL
我认为这是一个非常有效的问题。我也在寻找这个问题的答案。
Angular 2 when to use DI, provider or pure import?的可能重复
我正在使用带有 Angular 1.6.x 的 webpack，我退出使用 Angular DI 以支持 ES6 导入。当我需要一些像 $http、$q 等 ng 服务时，我会使用 angular.injector 函数直接注入它们。不知道这是否不是最佳实践，但它的效果非常好。

标签： angularjs dependency-injection import ecmascript-6

【解决方案1】：

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

Angular 依赖注入是一种为组件提供依赖的方法，而不是在组件中硬编码它们。这使组件免于定位依赖项并使依赖项可配置。

ES6 import 是一个 javascript 功能，用于导入由另一个模块导出的绑定。

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

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 依赖注入的一种方式。

【讨论】：

【解决方案2】：

就个人而言，我最终开始仅使用 DI 来注入内部服务，例如 $http 和 singleton 应用程序（业务逻辑）服务，这些服务很少。

如果我需要类，我想自己实例化 (new Something(...))，那么我使用 es6 模块导入语法和纯 es6 类。在我的应用程序中，这些类型的类占大多数。

就是这样，工作得很好。我必须说我来到了这个工作流程，因为 IDE 自动完成不能与 DI 方法正常工作，它开始让我非常恼火。现在，我享受绝对棒、正确和超快的自动补全功能。

Angularjs 依赖项（尤其是工厂）在 es6-imports 之前的时代是救命稻草，因为它为您隔离了命名空间。现在 es6 模块可以做到这一点。不过，您仍然可以从 DI 中受益，因为它只是使用 Angular 内部服务（例如 $http）的便捷方式，并且是实例化单例类（使用 .service(...)）的便捷方式。

UPD。如果你想在 angularjs 之外的类中使用 angularjs 依赖项，你可以使用这个：

$http = injector('$http')

Injector 函数来自这里：

// injector.js
let cache = {}

/**
 * Use example:
 * import injector from 'injector.js'
 * $http = injector('$http')
 *
 * @param dependency {string}
 */

export function injector (dependency) {

  return cache.hasOwnProperty(dependency)
    ? cache[dependency]
    : cache[dependency] = angular.element(document).injector().get(dependency)
}

重要！ injector() 函数必须在文档准备好后运行。通常是这种情况，但如果不是，您将在注入器（injector.js）中收到错误“无法读取未定义的属性'get'”。解决方案只是在文档准备好后注入：

import { injector } from '../injector.js'

let $http;

angular.element(document).ready(() => {
  $http = injector('$http')
})

【讨论】：