将angular服务与es6模块一起使用有意义吗

Does it make sense to use angular services with es6 modules?

本文关键字：有意义 一起 模块 angular 服务 es6      更新时间：2023-09-26

当我们使用ES6模块时，使用angular服务有意义吗？例如，我们在代码中需要一个单例模块（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服务呢？

是！这很有道理。

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

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

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

来源：服务、指令和模块之间的差异=）

来自我自己的个人笔记（主要是来自文档、谷歌群组帖子和SO帖子的片段）：

模块

  • 提供命名空间/组服务、指令、筛选器、配置信息和初始化代码的方法
  • 帮助避免全局变量
  • 用于配置$injector，允许在其他地方注入模块（或整个模块本身）定义的东西（依赖注入的东西）
  • Angular模块与CommonJS或Require.js无关。与AMD或Require.jss模块不同，Angular模块并不试图解决脚本加载顺序或懒惰的脚本获取问题。这些目标是正交的，两个模块系统可以共存并实现它们的目标（正如文档所说）

服务

  • 是singleton，因此您定义的每个服务只有一个实例。作为singleton，它们不受作用域的影响，因此可以由多个视图/控制器/指令/其他服务访问（与之共享）
  • 当
    • 两个或两个以上的东西需要访问相同的数据（不要使用根作用域），或者你只想巧妙地封装你的数据
    • 您希望封装与web服务器的交互（在服务中扩展$resource或$http）
  • 内置服务以"$"开头
  • 要使用服务，依赖项需要注入（例如，控制器、另一个服务或指令）

指令（下面的一些内容基本上是一样的，但我发现有时稍微不同的措辞会有很大帮助）

  • 负责在模型状态发生变化时更新DOM
  • 扩展HTML词汇表=教HTML新技巧
    Angular提供了一组内置指令（例如，ng-*东西），这些指令对构建web应用程序很有用，但您可以添加自己的指令，以便将HTML转换为声明性领域特定语言（DSL）。例如，<tabs>和<窗格>Angular主页演示"创建组件"中的元素。
    • 不明显的内置指令（因为它们不是以"ng"开头）：a、form、input、script、select、textarea。在Angular下，这些都比正常情况下做得更多
  • 指令允许您"组件化HTML"。指令通常比ng-include更好。例如，当您开始编写大量以数据绑定为主的HTML时，请将该HTML重构为（可重用的）指令
  • Angular编译器允许您将行为附加到任何HTML元素或属性，甚至可以创建具有自定义行为的新HTML元素或特性。Angular调用这些行为扩展指令。
    • 当你把它归结起来时，指令只是一个函数，当Angular编译器在DOM中遇到它时就会执行
  • 指令是由属性、元素名、类名或注释中的名称触发的行为或DOM转换。指令是在（HTML）编译过程中遇到特定HTML构造时应该触发的行为。指令可以放在元素名称、属性、类名以及注释中。
    • 大多数指令仅限于属性。例如，DoubleClick仅使用自定义属性指令
  • 另请参阅angularjs指令是什么

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

相关文章：