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

AngularJS 中的依赖注入是什么?

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

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

因此我们首先来了解一下依赖是什么。

AngularJS 中的依赖注入

上图展示了数据库编程日常例行工作的简单 AngularJS 依赖注入示例。

  • “模型”框表示通常创建用于与数据库交互的“模型类”。因此,现在数据库是“模型类”运行的依赖项。
  • 通过依赖注入,我们创建一个服务来从数据库中获取所有信息并进入模型类。

在本教程的剩余部分,我们将更多地了解依赖注入以及如何在 AngularJS 中实现依赖注入。

在 AngularJS 中哪个组件可以作为依赖项注入?

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

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

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

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

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

现在,当 $http 服务在控制器中定义如上所示时。这意味着控制器现在依赖于 $http 服务。

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

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

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

依赖注入示例

在这个例子中,我们将学习如何在 AngularJS 中使用依赖注入。

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

  1. 一是通过“价值组件”
  2. 另一种是通过“服务”

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

1)价值成分

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

这是通过以下两个步骤实现的

步骤1) 创建一个 Java通过使用值组件来编写脚本对象并将其附加到主 AngularJS.JS 模块。

值组件接受两个参数;一个是键,另一个是创建的 javascript 对象的值。

步骤2) 访问 Java脚本对象来自 Angular.JS 控制器

<! 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>

在上面的代码示例中,主要执行了以下几个步骤

  1. sampleApp.value("TutorialID", 5);

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

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

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

  1.  $scope.ID =TutorialID;

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

  1. {{ID}}

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

执行上述代码时,输​​出如下所示

依赖注入中的值组件

2)服务

服务定义为单例 Java脚本对象由您想要在控制器中公开和注入的一组函数组成。

例如,“$http” 是 Angular.JS 中的一个服务,当它被注入到你的控制器中时,它将提供以下必要的功能:

(获取()、查询()、保存()、删除()、删除())。

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

让我们看一个简单的例子,看看如何创建自己的服务。我们将创建一个简单的加法服务,将两个数字相加。

<! 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>

在上面的例子中,执行以下步骤

  1.  mainApp.service('AdditionService', function()

在这里,我们使用主 AngularJS JS 模块的服务参数创建一个名为“AdditionService”的新服务。

  1.  this.Addition = function(a,b)

这里我们在服务中创建了一个名为 Addition 的新函数。这意味着当 AngularJS 在我们的控制器内部实例化我们的 AdditionService 时,我们将能够访问“Addition”函数。在这个函数定义中,我们说这个函数接受两个参数,a 和 b。

  1.  return a+b;

这里我们定义了加法函数的主体,它只是添加参数并返回添加的值。

  1.  mainApp.controller('DemoController', function($scope, AdditionService)

这是涉及依赖注入的主要步骤。在我们的控制器定义中,我们现在引用我们的“AdditionService”服务。当 AngularJS 看到这一点时,它将实例化“AdditionService”类型的对象。

  1.  $scope.result = AdditionService.Addition(5,6);

我们现在正在访问在我们的服务中定义的函数“Addition”并将其分配给控制器的 $scope 对象。

这是一个简单的例子,说明如何定义我们的服务并在控制器内部注入该服务的功能。

总结

  • 依赖注入,顾名思义,就是在运行时将依赖功能注入模块的过程。
  • 使用依赖注入有助于提高代码的可重用性。如果您有跨多个应用程序模块使用的通用功能,最好的方法是定义一个具有该功能的中央服务,然后将该服务作为依赖项注入到您的应用程序模块中。
  • AngularJS 的值对象可以用来注入简单的 Java使用 $inject 在你的控制器中编写脚本对象 AngularJS.
  • 服务模块可用于定义可在多个 AngularJS 模块中重复使用的自定义服务。