AngularJS 依赖注入组件
詹姆斯·哈特曼
AngularJS 中的依赖注入是什么？
依赖注入 AngularJS 中的依赖管理是一种软件设计模式，它实现了控制反转以解决依赖关系。它决定了组件如何保存它们的依赖关系。它可以在定义组件或提供模块的运行和配置块时使用。它使您能够使组件可重用、可测试和可维护。
控制反转：这意味着对象不会创建它们依赖的其他对象来完成其工作。相反，它们从外部源获取这些对象。这构成了 AngularJS 依赖注入的基础，其中如果一个对象依赖于另一个对象；主要对象不负责创建依赖对象然后使用其方法。相反，外部源（在 AngularJS 中，是 AngularJS 框架本身）会创建依赖对象并将其提供给源对象以供进一步使用。
⚠️ 版本说明： AngularJS 的支持已于 2022 年 1 月结束。没有安全补丁。现代 Angular 通过 @Injectable 提供程序注入， 注入（）以下代码仅供历史参考。
因此我们首先来了解一下依赖是什么。
上图展示了数据库编程日常例行工作的简单 AngularJS 依赖注入示例。
- “模型”框表示通常创建用于与数据库交互的“模型类”。因此，现在数据库是“模型类”运行的依赖项。
- 通过依赖注入，我们创建一个服务来从数据库中获取所有信息并进入模型类。
在本教程的剩余部分，我们将更深入地探讨依赖注入以及如何在系统中实现它。 AngularJS.
在AngularJS中，哪些组件可以作为依赖项注入？
在 AngularJS 中，依赖项是通过使用“可注入工厂方法”或“构造函数”注入的。
这些组件可以作为依赖项注入“服务”和“值”组件。我们在之前的 $http 服务主题中已经看到过这一点。
AngularJS 模块 通过五个配方注册可注射对象。
| 烹饪食谱 | 它记录了什么 |
|---|---|
| 折扣值 | 一个已准备就绪的对象，对配置块不可见 |
| 工厂 | 返回值被注入的函数 |
| 服务 | 一个使用 new 实例化一次的构造函数 |
| 提供者 | 一个可配置的配方，公开 $get |
| 常数 | 配置块中可读取的固定值 |
我们已经看到，$http 服务可以在 AngularJS 中用于从 MySQL 或质谱 SQL 服务器数据库通过 PHP Web应用程序。
$http 服务通常以下列方式在控制器内部定义。
sampleApp.controller ('AngularJSController', function ($scope, $http)
现在，当 $http 服务在控制器中定义如上所示时。这意味着控制器现在依赖于 $http 服务。
因此，当执行上述代码时，AngularJS 将执行以下步骤；
- 检查“$http 服务”是否已实例化。由于我们的“控制器”现在依赖于“$http 服务”，因此需要将此服务的对象提供给我们的控制器。
- 如果 AngularJS 发现 $http 服务未实例化，AngularJS 将使用“factory”函数构造一个 $http 对象。
- 然后，AngularJS 中的注入器会将 $http 服务的实例提供给我们的控制器进行进一步处理。
注释形式： 隐式注释 读取参数名称，因此压缩会破坏它。内联数组表示法和 `$inject` 都能保留下来；ng-app 上的 `ng-strict-di` 会拒绝隐式注解。
现在依赖项已注入到我们的控制器中，我们现在可以调用 $http 服务中的必要函数进行进一步处理。
依赖注入示例
在这个例子中，我们将学习如何在 AngularJS 中使用依赖注入。
依赖注入可以通过两种方式实现
- 一是通过“价值组件”
- 另一种是通过“服务”
让我们更详细地看看这两种方式的实现。
1）价值成分
这个概念基于创建一个简单的 JavaScript 并将对象传递给控制器进行进一步处理。
这是通过以下两个步骤实现的
步骤1） 创建一个 Java使用值组件创建脚本对象，并将其附加到您的主 AngularJS 模块。
值组件接受两个参数；一个是键，另一个是值。 Java创建的脚本对象。
步骤2） 访问 Java脚本对象来自 AngularJS 控制器
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">
<div ng-controller="AngularJSController">
<h3> Guru99 Global Event</h3>
{{ID}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.value("TutorialID", 5);
sampleApp.controller('AngularJSController', function($scope,TutorialID) {
$scope.ID =TutorialID;
});
</script>
</body>
</html>
上面的代码执行以下步骤。
-
sampleApp.value("TutorialID", 5);AngularJS 模块的 value 函数用于创建一个名为“TutorialID”的键值对，其值为“5”。
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
TutorialID 变量现在可作为函数参数供控制器访问。
-
$scope.ID =TutorialID;
TutorialID 的值（即 5）现在被赋值给另一个名为 ID 的变量。 范围 这样做是为了将值 5 从控制器传递到视图。
-
{{ID}}ID 参数在视图中显示为表达式。因此页面上将显示“5”的输出。
执行上述代码时，输出如下所示
2）服务
服务定义为单例 Java脚本对象由您想要在控制器中公开和注入的一组函数组成。
例如，“$http”是AngularJS中的一项服务，当它被注入到控制器中时，可以提供必要的功能。
（获取（）、查询（）、保存（）、删除（）、删除（））。
然后可以从控制器中相应地调用这些函数。
让我们看一个简单的例子，看看如何创建自己的服务。我们将创建一个简单的加法服务，将两个数字相加。
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>
<div ng-app = "mainApp" ng-controller = "DemoController">
<p>Result: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.service('AdditionService', function(){
this.ADDITION = function(a,b) {
return a+b;
}
});
mainApp.controller('DemoController', function($scope, AdditionService) {
$scope.result = AdditionService.ADDITION(5,6);
});
</script>
</body>
</html>
在上面的例子中，执行以下步骤
-
mainApp.service('AdditionService', function()
在这里，我们使用主 AngularJS 模块的服务参数创建一个名为“AdditionService”的新服务。
-
this.ADDITION = function(a,b)
这里我们在服务中创建了一个名为 ADDITION 的新函数。这意味着当 AngularJS 在控制器中实例化 AdditionService 时，我们就可以访问 'ADDITION' 函数了。在这个函数定义中，我们声明该函数接受两个参数 a 和 b。
-
return a+b;这里我们定义了 ADDITION 函数的主体，该函数简单地将参数相加并返回相加后的值。
-
mainApp.controller('DemoController', function($scope, AdditionService)
这是涉及依赖注入的主要步骤。在我们的控制器定义中，我们现在引用了“AdditionService”服务。当AngularJS检测到这一点时，它将实例化一个“AdditionService”类型的对象。
-
$scope.result = AdditionService.ADDITION(5,6);
现在，我们正在访问服务中定义的函数“ADDITION”，并将其分配给控制器的 $scope 对象。
这是一个简单的例子，说明如何定义我们的服务并在控制器内部注入该服务的功能。
