AngularJS依赖注入与ES6导入的区别

Question

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

- Najafsen

---

依赖注入和导入根本没有关系，你需要同时使用它们。 - a better oliver

是的，我两种方法都使用。但我的问题是关于在控制器中需要一个服务。我可以编写Angular服务并将其注入到控制器中，也可以编写普通的JS类或函数并导入以在控制器中使用。我想知道在AngularJS中是否使用导入而不是AngularJS DI是一种反模式。@zeroflagL - Najafsen

我认为这是一个完全合理的问题。我也在寻找答案。 - Brendan

可能是Angular 2何时使用DI、提供者或纯导入？的重复问题。 - Daniel

我正在使用webpack与angular 1.6.x，并且放弃了使用angular DI，转而使用ES6导入。当我需要一些ng服务，如$http、$q等时，我直接使用angular.injector函数进行注入。不知道这是否是最佳实践，但它运行得非常好。 - darksoulsong

Answer 1

首先，Angular依赖注入和ES6 import是两个不同的概念。 Angular依赖注入是一种为组件提供其依赖项的方式，而不是在组件内部进行硬编码。这使得组件从定位依赖关系中解脱出来，并且依赖项是可配置的。 ES6 import是一种JavaScript功能，用于导入另一个模块导出的绑定。

您可以导入一个模块，该模块可以是您的服务类，并将其添加为Angular服务。如果您正在编写“非Angular”服务，请确保它是可导出的ES6类。您不能直接将ES6类用作依赖项，因为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依赖注入相结合的一种方式。

- gmuraleekrishna

Answer 2

个人而言，我最终开始仅使用DI来注入内部服务，例如$http和单例应用程序（业务逻辑）服务，这些服务很少。如果需要实例化类（new Something（...）），则我使用es6模块导入语法和纯es6类。在我的应用程序中，这种类型的类是大多数。

就这样，完全正常地工作。我必须说，我采用这种工作流程是因为IDE自动完成无法正确使用DI方法，并且它开始非常恼人。现在我享受绝对出色、正确和超快的自动完成。

AngularJS依赖项（特别是工厂）在es6-imports之前的时代是救命稻草，因为它为您隔离了命名空间。现在，es6模块可以做到这一点。

尽管如此，您仍然从DI中受益，因为这是使用Angular内部服务（例如$http）和实例化单例类（使用.service（...））的方便方式。

更新。如果您想在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)
}

重要提示！injector()函数必须在文档准备好之后才能运行。通常情况下是这样的，但如果不是这样，将会在injector（injector.js）中出现错误“无法读取未定义的'get'属性”。解决方案是在文档准备好之后简单地进行注入：

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

let $http;

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

- Nurbol Alpysbayev