AngularJS依赖注入VS ES6导入

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

来源

2017-05-09 Najafsen

依赖注入和导入甚至没有远程相关。你将使用两者。 – zeroflagL

是的，我同时使用。但我的问题是关于在控制器中需要一项服务。我可以编写角度服务并将其注入到控制器中，或者我可以编写一个普通的JS类或函数并将其导入到控制器中使用。我问是否在AngularJS中使用导入而不是AngularJS DI反模式。 @zeroflagL – Najafsen

我认为这是一个完全有效的问题。我也在寻找这个答案。 – Brendan

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

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

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

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

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

来源

2017-10-12 08:12:55 gmuraleekrishna

就个人而言，我终于已经开始只使用DI注入像$ HTTP和单应用程序（业务逻辑）的服务，这是一些内部服务。

如果我需要类，我想要自己实例化（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) 
}

重要！只有在文档准备就绪后，注入器（）函数才能运行。通常情况就是这样，但是如果没有，你将在注入器（injector.js）中出现错误“Can not read property'get'undefined”。解决方案简单地在文档准备好后进行注入：

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

let $http; 

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

export const myHttp = {get: (...) => $http.get(...), post: ...}

来源

2018-01-26 04:58:17

AngularJS依赖注入VS ES6导入

回答

相关问题