将角度服务与 es6 模块一起使用是不是有意义？

Posted 2023-02-22

【中文标题】将角度服务与 es6 模块一起使用是不是有意义？

【英文标题】：Does it make sense to use angular services with es6 modules?将角度服务与 es6 模块一起使用是否有意义？

【发布时间】：2016-04-17 07:24:27

【问题描述】：

当我们使用 ES6 模块时，使用 angular-services 有意义吗？例如，我们的代码中需要一个单例模块 (userService)，我们可以这样做：

var app = angular.module('app', []);

app.service('userService', function()
    this.users = ['John', 'James', 'Jake'];
);

app.controller('FooController', ['$scope', 'userService', function($scope, userService)

    console.log(userService);

]);

但我们可以在单独的文件中定义服务：

/* ./user-service.js */
export default users = ['John', 'James', 'Jake'];

，然后编写如下代码：

var app = angular.module('app', []);

var userService = require('./user-service')    

app.controller('FooController', ['$scope', function($scope)

    console.log(userService);

]);

结果将与使用的服务完全一样。那么既然可以使用模块，为什么还要使用 Angular 服务呢？

【问题讨论】：

这里你不使用依赖注入的服务。因此，您不能模拟和单元测试您的服务和控制器

【参考方案1】：

是的！这很有意义。

服务在您的应用程序中实现特定职责，在数据存储和视图之间移动数据。

模块允许您组织代码并将具有不同职责的部分分开。

通过将每个服务放入一个模块中，您可以更轻松地浏览和测试您的代码。很容易找到所有实现职责的代码。

【参考方案2】：

来源：Difference between service, directive and module =)

来自我自己的personal notes（主要来自文档、google 群组帖子和 SO 帖子的 sn-ps）：

模块

提供命名空间/分组服务、指令、过滤器、配置信息和初始化代码的方法 帮助避免全局变量 用于配置$injector，允许模块（或整个模块本身）定义的东西被注入到别处（依赖注入的东西） Angular 模块与 CommonJS 或 Require.js 无关。与 AMD 或 Require.js 模块相反，Angular 模块不会尝试解决脚本加载顺序或延迟脚本获取的问题。这些目标是正交的，两个模块系统可以并存并实现它们的目标（文档声称）。

服务

是单例，因此您定义的每个服务只有一个实例。作为单例，它们不受作用域的影响，因此可以被多个视图/控制器/指令/其他服务访问（共享） 您可以（并且可能应该）在以下情况下创建自定义服务 两个或多个事物需要访问相同的数据（不要使用根范围），或者您只是想整齐地封装您的数据 您想要封装与 Web 服务器的交互（在您的服务中扩展 $resource 或 $http） 内置服务以“$”开头。 要使用服务，依赖项需要注入依赖项（例如，在控制器、其他服务或指令上）。

指令（下面的一些项目说的基本相同，但我发现有时稍微不同的措辞会有很大帮助）

负责在模型状态发生变化时更新 DOM 扩展 html 词汇 = 教授 HTML 新技巧。 Angular 带有一组内置指令（例如，ng-* 的东西），这些指令对于构建 Web 应用程序很有用，但您可以添加自己的指令，以便将 HTML 转换为声明性域特定语言 (DSL)。例如，Angular 主页演示“创建组件”中的 和 元素。 不明显的内置指令（因为它们不以“ng”开头）：a、form、input、script、select、textarea。在 Angular 下，这些都比平常做得更多！ 指令允许您“组件化 HTML”。指令通常比 ng-include 更好。例如，当您开始编写大量主要使用数据绑定的 HTML 时，将 HTML 重构为（可重用）指令。 Angular 编译器允许您将行为附加到任何 HTML 元素或属性，甚至可以创建具有自定义行为的新 HTML 元素或属性。 Angular 将这些行为扩展称为指令。 归根结底，指令只是一个函数，当 Angular 编译器在 DOM 中遇到它时会执行该函数。 指令是一种行为或 DOM 转换，由存在的属性、元素名称、类名称或注释中的名称触发。指令是在 (HTML) 编译过程中遇到特定 HTML 结构时应触发的行为。指令可以放置在元素名称、属性、类名以及 cmets 中。 大多数指令仅限于属性。例如，DoubleClick 仅使用自定义属性指令。 另见What is an angularjs directive?

在模块中定义和分组 Angular 的东西（依赖注入的东西）。 共享数据并将 Web 服务器交互封装在服务中。 扩展 HTML 并在指令中进行 DOM 操作。 并使控制器尽可能“瘦”。

【讨论】：

我想说的是，模块是一个糟糕的理由，而且完全没有意义恕我直言。另一方面，依赖注入很有用