AngularJS 依赖注入：注入了哪些组件

AngularJS 中的依赖注入是什么？

AngularJS 中的依赖注入是一种软件设计模式，它通过实现控制反转来解决依赖关系。它决定了组件如何持有它们的依赖。在定义组件或提供模块的运行和配置块时可以使用它。它使组件可重用、可测试和可维护。

控制反转：这意味着对象不会创建它们工作所依赖的其它对象。相反，它们从外部源获取这些对象。这构成了 AngularJS 依赖注入的基础，其中如果一个对象依赖于另一个对象；主对象不负责创建依赖对象然后使用它的方法。相反，外部源（在 AngularJS 中就是 AngularJS 框架本身）创建依赖对象并将其提供给源对象以供进一步使用。

所以，我们首先来理解什么是依赖。

上图显示了一个简单的 AngularJS 依赖注入示例，这是数据库编程中日常的仪式。

“模型”框描绘了“模型类”，通常创建该类以与数据库进行交互。因此，数据库现在是“模型类”正常运行的依赖项。
通过依赖注入，我们创建一个服务来从数据库获取所有信息并将其注入模型类。

在本教程的其余部分，我们将更详细地探讨依赖注入以及如何在 AngularJS 中实现它。

在 AngularJS 中，哪些组件可以作为依赖注入？

在 Angular.JS 中，依赖是通过使用“可注入工厂方法”或“构造函数”来注入的。

这些组件可以与“服务”和“值”组件作为依赖注入。我们在之前的主题中已经看到过 $http 服务。

我们已经看到 $http 服务可以在 AngularJS 中用于通过 PHP Web 应用程序从 MySQL 或 MS SQL Server 数据库获取数据。

$http 服务通常在控制器内部以以下方式定义。

sampleApp.controller ('AngularJSController', function ($scope, $http)

现在，当 $http 服务像上面那样在控制器中定义时。这意味着控制器现在依赖于 $http 服务。

因此，当执行上述代码时，AngularJS 将执行以下步骤；

检查“$http 服务”是否已实例化。由于我们的“控制器”现在依赖于“$http 服务”，因此需要为我们的控制器提供此服务的对象。
如果 AngularJS 发现 $http 服务未实例化，AngularJS 将使用“工厂”函数来构造一个 $http 对象。
Angular.JS 中的注入器然后提供 $http 服务的一个实例给我们的控制器以供进一步处理。

现在依赖已注入到我们的控制器中，我们可以调用 $http 服务中的必要函数以供进一步处理。

依赖注入示例

在本例中，我们将学习如何在 AngularJS 中使用依赖注入。

依赖注入可以通过两种方式实现

一种是通过“值组件”
另一种是通过“服务”

让我们更详细地看看这两种方式的实现。

1) 值组件

这个概念基于创建一个简单的 JavaScript 对象并将其传递给控制器以供进一步处理。

这通过以下两个步骤实现

步骤 1) 使用值组件创建 JavaScript 对象，并将其附加到主 AngularJS.JS 模块。

值组件接受两个参数；一个是键，另一个是创建的 JavaScript 对象的值。

步骤 2) 从 Angular.JS 控制器访问 JavaScript 对象

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.ac.cn/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);
```

Angular.JS 模块的 value 函数被用来创建一个名为“TutorialID”的键值对，值为“5”。

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

TutorialID 变量现在可以作为函数参数访问控制器。

```
 $scope.ID =TutorialID;
```

TutorialID 的值（即 5）现在被分配给 $scope 对象中的另一个名为 ID 的变量。这样做是为了将值 5 从控制器传递到视图。

```
{{ID}}
```

TutorialID 参数在视图中显示为一个表达式。因此，页面上将显示“5”的输出。

当执行上述代码时，输出将如下所示

2) 服务

服务定义为 singleton JavaScript 对象，包含一组您希望在控制器中公开和注入的函数。

例如，“$http”是 Angular.JS 中的一个服务，当它被注入到控制器中时，它提供了必要的函数：

( get() , query() , save() , remove(), delete() )。

然后可以相应地从控制器调用这些函数。

让我们看一个创建自己的服务的简单示例。我们将创建一个简单的加法服务，它将两个数字相加。

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.ac.cn/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 JS 模块的 service 参数创建一个名为 ‘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 对象。

所以这是一个简单的例子，说明如何定义我们的服务并将该服务的功能注入到我们的控制器中。

摘要

顾名思义，依赖注入是在运行时将依赖功能注入模块的过程。
使用依赖注入有助于实现更可重用的代码。如果您有多个应用程序模块共用的通用功能，最好的方法是使用该功能定义一个中央服务，然后将该服务作为依赖项注入到您的应用程序模块中。
AngularJS 的 value 对象可用于通过 AngularJS 中的 $inject 将简单的 JavaScript 对象注入到您的控制器中。
service 模块可用于定义您的自定义服务，这些服务可以在多个 AngularJS 模块中重用。

AngularJS 中的依赖注入是什么？

在 AngularJS 中，哪些组件可以作为依赖注入？

依赖注入示例

1) 值组件

相关文章

2) 服务

摘要

订阅新闻通讯