对 AngularJS 依赖注入不一致感到困惑

2024-04-03

我是新来的angular.js,并浏览了几个教程,包括此处的所有教程代码学校 http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro。我发现它们非常有用,并且学到了很多东西。但是现在我已经完成了我的“介绍”并开始尝试在某些事情上使用它,我发现了一些令人困惑的不一致之处,最明显的是“依赖注入”。

在我学习的教程中,服务的依赖关系是这样完成的;

app.controller('name', [ $http, $scope, function($http, $scope) {
   // .. code ... //
}]);

这让我觉得很奇怪,但无论如何它确实有效。我很困惑为什么[]没有在函数之前终止(我是假设这就是你所说的'打回来'JavaScript 中的函数?)。我本来期待它更像require.js它本来应该在哪里......

app.controller('name', [ '$http', '$scope' ], function($http, $scope) { });

然而后来我开始在网上查看 Angular 的示例和演示,我发现这并不一致。例如,检查以下链接;

  • 媒体网站 https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc
  • 革命网 http://blog.revolunet.com/blog/2014/02/14/angularjs-services-inheritance/
  • kendo.ui http://demos.telerik.com/kendo-ui/scheduler/angular

在每一个中,我都看到像这样使用依赖注入;

app.controller('name', function($http, AdvancedGithubUser) { });
app.controller('name', function($scope){ });
function controllerName($scope) { };

他们完全绕过了array就像语法一样,三者都是不同的。在其中一个中,它需要一种在其他地方声明的对象类型,但我没有看到任何连接来指向它。

在另一个例子中,它只是拥有这些对象。

还有另一个,“名字”部分controller是函数的名称,我没有看到任何真正将其表示为controller,但它在指令中是这样使用的。

谁能向我解释一下吗?我现在完全迷失了。这种不一致使得掌握这些技术有点困难。


有三种方法可以注释函数的依赖关系:

第一个是:参数名称明确且准确:

app.controller('ACtrl', function($scope, $http, $q) {
    //your stuff here
});

这意味着该函数的参数名称必须与已注册的服务/提供商的名称相匹配。Caveat:如果你缩小文件(丑化,以节省空间),你将丢失参数名称,因此它将被破坏 - 将不起作用(会抱怨)。

第二个允许您选择要作为字符串文字注入的服务名称(因为字符串文字是一个值,所以它永远不会缩小):

var myfunc = function($s, $http, $q) {
    //do your stuff here
};
myfunc.$inject = ['$scope', '$http', '$q'];
app.controller('ACtrl', myfunc);

这使得 Angular 读取函数的 $inject 属性,并且不按名称匹配形式参数,而是按同一数组位置中的值匹配。因此,即使您缩小文件,$scope 也会在 $s 中。如果函数中不存在 $inject,那么您将回到第一种情况(不推荐)。

第三个与第二个类似(即它将通过字符串指定依赖项并抵抗丑陋的化):

var myfunc = function($s, $http, $q) {
    //do your stuff here
}
app.controller('ACtrl', ['$scope', '$http', '$q', myfunc]);

请注意数组的最后一个元素是要调用的函数。看起来有点令人毛骨悚然,但它是一致的。 Angular 是这样做的:如果控制器是一个数组,则弹出最后一个元素 - 它将是函数。前一个元素(剩余的数组)受到威胁,就好像它们是$inject函数中的值。

控制器和提供程序必须有一个名称来引用它们 - 我使用“ACtrl”作为控制器的名称。它不是函数的名称,而是在依赖注入(对于提供者)和 ngRoute(对于控制器)之类的东西中使用的内部名称。

声明名称是第一个边界wiring你在要求。在依赖注入的三种形式中的任何一种中使用它们是这种依赖注入的第二个纽带wiring.

Remember: AdvancedGithubUser是注册提供商,原样$http。唯一的区别是$http是 Angular 内置的,而 AdvancedGithubUser 不是。美元符号开头的符号应该保留给 Angular,但这不是必需的 - 只是一个很好的做法。AdvancedGithubUser是通过以下内容创建的(在外部模块中):

app.service('AdvancedGithubUser', AdvancedGithubUser);
//being AdvancedGithubUser a constructor.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

对 AngularJS 依赖注入不一致感到困惑 的相关文章

  • Yeoman“grunt 测试”在干净的项目上失败,“端口已在使用中”

    With 苹果操作系统 10 8 4 节点 0 10 12 npm 1 3 1 grunt cli 0 1 9 哟1 0 0 rc 1 凉亭0 9 2 电子邮件受保护 cdn cgi l email protection 我在清理时遇到以下
  • 如何在 Amserial 图表中添加图例

    我在 AngularJS 应用程序中使用 Amcharts 创建一个简单的条形图 以下是我在控制器中的代码 let empChart let empBarGraph let empLine const writeemp data gt co
  • 变量可以存储在图像或 div 标签中吗?

    我已经成功地创建了一个巨大的div其中包含许多小divs 附加到它上面 所以它创建了一个网格 我的目标是能够在每个较小的变量中存储两个变量divs 瓷砖 目前 我可以通过更改较小的图块来存储一个值innerHTML 但是 我希望能够存储的不
  • 如何制作可扩展的文本框?

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行
  • 空 JavaScript 数组的布尔值冲突

    谁能解释为什么以下两个陈述都评估为true false and 这个问题纯粹是出于对为什么会发生这种情况的好奇 而不是关于如何最好地测试数组是否为空 第一个 false The 运算符对其操作数进行类型转换 在这种情况下 两边都转换为 Nu
  • 从谷歌加载 jquery 不起作用(对我来说)

    啊 我是个可怜的菜鸟 下面的 html 文档没有提醒任何人我的求助 有人知道为什么吗 这对我有用
  • 使用 ES6 从子级获取父类名?

    我想获取父类名称 Parent 但我只能使用此代码检索子类名称 Child use strict class Parent class Child extends Parent var instance new Child console
  • 如何获取node.js中调用函数的文件路径?

    以下是来自三个文件的一些示例代码 foo js var myFunc require myFunc function foo myFunc message bar js var myFunc require myFunc function
  • 从不同的控制器修改 $rootscope 属性

    在我的 rootscope 中我有一个visible控制 div 可见性的属性 app run function rootScope rootScope visible false HTML 示例 section section
  • Apex 图表自定义工具提示 - 如何获取类别名称和颜色?

    我想在 Apex Charts 中创建自定义工具提示 以下是官方文档中的建议 tooltip custom function series seriesIndex dataPointIndex w return div class arro
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 从文件中抓取随机行

    我不知道该怎么做 我应该从哪里开始 我用谷歌搜索了这个 但没有找到关于如何从文本文件中提取随机行的结果 我唯一发现的是https github com chrisinajar node rand line https github com
  • 在 React 中渲染来自 Firebase 的数据

    请帮助我渲染从 Firebase 实时数据库检索的数据 我成功从 Firebase 中以数组形式检索数据 下一步是显示数据 问题就从这里开始了 我想要显示的数据应该存储在 模块 状态 首先 它被设置为一个空数组 然后检索数据 通过 Coum
  • 在函数字符串上使用 eval

    我在做 eval function console log Hello World 但这给出了错误 Uncaught SyntaxError Unexpected token 为什么这是错误的 The eval操作员期望Program作为输
  • 根据 Google Apps 脚本中的另一个数组过滤数组

    我对 JavaScript 相当陌生 可能需要一些帮助来解决我在处理 Google Apps 脚本时遇到的问题 我打算做的是根据数组过滤数据 该数组是从特定工作表中的特定单元格中获取的 其中包含我不想保留在数据中的字符串元素 换句话说 包含
  • 提交ajax表单并停留在同一页面不起作用

    我想将用户的评论存储在我的数据库中 当用户提交时 我不想将他们重定向到新页面 我有以下代码 但它不起作用 我的 HTML 代码
  • 流星与承诺

    我一直在尝试养成使用 Promise 的习惯 但在尝试在 Meteor 上下文中的服务器端代码中使用它们时遇到了问题 这就是问题 if Meteor isServer Meteor startup function code to run
  • Webpack 未将 css 复制到 dist 中

    我有以下 css 文件 以及以下 webpack 配置 var path require path module exports entry app src index js output path path resolve dirname
  • 如何在二维数组中找到字符串?

    我有一个看起来像这样的数组 var array a b c d e f 我希望能够在数组中搜索字符串 d 并返回对应的值 c try function find str array for var i in array if array i
  • Cookies - 日期过期不起作用,关闭浏览器时cookies将被清除

    我试图在 cookie 中保存用户电子邮件 1 年 但当浏览器关闭时 cookie 会被删除 这是我尝试使用的代码 document cookie userEmail email document cookie expires Wed 31

随机推荐

  • R 错误:某些组对于“qda”来说太小

    我用的是MASS qda 找到我的数据的分类器 它总是报告 某些群体对于 qda 来说太小了 是由于我用于模型的测试数据的大小吗 我将测试样本大小从 30 增加到 100 它报告了相同的错误 求助啊啊啊啊啊 set seed 1345 Al
  • Spring Integration TCP - 在发送数据之前启动消息握手

    我正在使用 MessagingGateway 将数据发送到服务器 我为出站网关配置了 AbstractClientConnectionFactory 和 ServiceActivator 为了将数据发送到我的服务器 我需要在启动连接时发送握
  • delete *p 是删除 [] p 的替代方法吗?

    以下代码来自微软文档 https learn microsoft com en us cpp cpp new operator cpp view vs 2019 int p new int 7 delete p 我觉得delete p应该在
  • QUnit 与 Jasmine? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 这两个测试框架的主要区别是什么 我是测试驱动开发的新手 从头开始 QUnit 非常容易上手 因为您只需要包含两个文件和一点标记 然后就可以开始编
  • 链增量运算符

    为什么不能连锁经营 int test 5 test OR int test 5 test 此代码给出编译时错误 递增或递减运算符的操作数必须是变量 属性或索引器 我完全理解这一点 如果允许的话 将是一个完整的代码味道 几乎没有现实世界的用途
  • 当 AWS 存在时,为什么人们还使用 Heroku? Heroku 与 AWS 有何不同? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我是一名初级 RoR 程序员 计划使用 Heroku 部署我的应用程序 我的其他顾问朋友说 Heroku 真的很简单 很好用 唯一的问题是我仍然
  • 安装到 USB 驱动器根目录时出现 Inno Setup 错误:“您必须输入带驱动器号的完整路径”

    我想知道如何修复此类错误 您必须输入带驱动器号的完整路径 例如 C APP 或以下形式的 UNC 路径 server share 每当我尝试强制 Inno Setup Compiler 5 5 5 u 将我的东西放入其中时 就会出现这种情况
  • 两次调用的递归函数的时间复杂度

    考虑这段代码 def count 7 lst if len lst 1 if lst 0 7 return 1 else return 0 return count 7 lst len lst 2 count 7 lst len lst 2
  • 去除错误的 Windows 文件名字符

    我发现这个函数可以测试字符串是否是 Windows 文件名和文件夹友好的 function is valid filename name parts preg split preg quote name if preg match a z
  • 如何在代码/预块中添加 Markdown 格式?

    这似乎违背了代码块的目的 但我希望能够将代码块中的某些内容加粗 例如 如果我想将返回行加粗 int main void return 0 您必须在 HTML 中执行此操作 按设计 http daringfireball net projec
  • Powershell 将行转置为列

    有人可以帮我将行转置为列吗 需要将机器名称转置到列中 结束时间必须排序 lt MachineName TotalDataSizeBytes ActualStartTime EndTime FinalJobStatus SERVER1 322
  • 如何从 uitableviewcell 显示 uidatepicker [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 询问代码的问题必须对所解决的问题表现出最低限度的了解 包括尝试的解决方案 为什么不起作用以及预期结果 也可以看看 Stack Overfl
  • 如何在 Spring 中查看 SOAP 请求的 XML 输出?

    我是 Spring SOAP 请求的新手 我想查看 SOAP 请求的最终 XML 输出 其中包括 SOAP 标头和 SOAP 信封 在调试时我到达了这段代码 sendSourceAndReceiveToResult partnerURI s
  • Xamarin Forms Flex 布局大小调整问题

    在我的 Xamarin Forms 应用程序中 我需要在另一个 Flex 布局内有一个 Flex 布局 这是因为 我的应用程序中需要有两列 一列占据屏幕的 80 另一列占据屏幕的 20 我使用具有两个子级的 FlexLayout 为此设置了
  • Xcode 12.4 中未找到框架 FIRAnalyticsConnector

    在 Xcode 12 4 中更新 pod 后出现 找不到框架 FIRAnalyticsConnector 错误 我已经清理并重建了该项目 但它仍保留在那里 我应该怎么办 转到您的项目目标Build Settings gt 搜索FIRAnal
  • 每次迁移后都需要重新启动 Heroku 吗?

    最近我遇到了一个问题 我的数据库方案更改没有反映在 Heroku PG 上 我仔细检查了一下 发现迁移和种子都成功了 更奇怪的是 数据库方案更改在暂存的 Heroku 部署上运行良好 在完全相同的迁移 种子之后 经过一番搜索后 我了解到您应
  • PHP 中每个文件只有一个或多个函数?

    每当我用 php 设计我的应用程序时 我都会遇到这个问题 这确实让我头疼 我不知道是否应该为每个函数创建单独的文件 例如 用于验证特定表单的函数 好吧 有人可能会认为这没有意义 因为我必须单独包含每个文件 这可能会导致应用程序更慢 但我仍然
  • C++ - 检测超出范围的访问

    我想分析我的 C 代码以查找向量和数组中的错误访问 超出范围访问 是否有工具可以实现这一点 提前致谢 如果您使用的是 gcc 则可以使用定义的 GLIBCXX DEBUG 和 GLIBXX DEBUG PEDATIC 进行编译 如果请求越界
  • 如何修改此 sed awk 命令以便输出到所选文件?

    我正在使用这个答案中的最后一个命令https stackoverflow com a 54818581 80353 https stackoverflow com a 54818581 80353 cap cd tmp rm f vtt y
  • 对 AngularJS 依赖注入不一致感到困惑

    我是新来的angular js 并浏览了几个教程 包括此处的所有教程代码学校 http campus codeschool com courses shaping up with angular js intro 我发现它们非常有用 并且学