Question

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

Answer 1

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

角度依赖注入是一种为组件提供依赖关系而不是在组件内对其进行硬编码的方法。这可以减轻组件定位依赖关系的负担，并使依赖关系可配置。

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

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

index.js

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

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

中的

{{1}}

这是ES6可以使用AngularJS依赖注入的一种方式。

Answer 2

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

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

就是这样，完美无缺。我必须说我已经来到这个工作流程，因为IDE自动完成功能无法正常使用DI方法，并且它开始让我非常恼火。现在我享受绝对令人敬畏，正确和超快的自动完成。

Angularjs依赖项（特别是工厂）在之前的es6-imports时代是一个救生员，因为它为你隔离了命名空间。现在es6模块就是这样做的。但是，您仍然可以从DI中受益，因为它只是使用Angular内部服务（例如$ http）的便捷方式，并且它是实例化单例类（使用.service（...））的便捷方式。

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

$http = injector('$http')

注射器功能来自：

// 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)
}

重要！ inject（）函数必须在文档准备好后才能运行。通常是这种情况，但如果没有，您将在进样器（injector.js）中收到错误“无法读取属性'获取'未定义”。解决方案就是在文档准备就绪后进行注入：

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

let $http;

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

AngularJS依赖注入VS ES6导入

2 个答案: