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 将执行以下步骤;
- 检查“$http 服务”是否已实例化。由于我们的“控制器”现在依赖于“$http 服务”,因此需要将此服务的对象提供给我们的控制器。
- 如果 AngularJS 发现 $http 服务未实例化,AngularJS 将使用“factory”函数构造一个 $http 对象。
- 然后,Angular.JS 中的注入器向我们的控制器提供 $http 服务的实例,以供进一步处理。
现在依赖项已注入到我们的控制器中,我们现在可以调用 $http 服务中的必要函数进行进一步处理。
依赖注入示例
在这个例子中,我们将学习如何在 AngularJS 中使用依赖注入。
依赖注入可以通过两种方式实现
- 一是通过“价值组件”
- 另一种是通过“服务”
让我们更详细地看看这两种方式的实现。
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>
在上面的代码示例中,主要执行了以下几个步骤
-
sampleApp.value("TutorialID", 5);
Angular.JS JS 模块的 value 函数用于创建一个名为“TutorialID”且值为“5”的键值对。
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
TutorialID 变量现在可作为函数参数供控制器访问。
-
$scope.ID =TutorialID;
TutorialID 的值是 5,现在被赋值给 $scope 对象中另一个名为 ID 的变量。这样做是为了将值 5 从控制器传递到视图。
-
{{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>
在上面的例子中,执行以下步骤
-
mainApp.service('AdditionService', function()
在这里,我们使用主 AngularJS JS 模块的服务参数创建一个名为“AdditionService”的新服务。
-
this.Addition = function(a,b)
这里我们在服务中创建了一个名为 Addition 的新函数。这意味着当 AngularJS 在我们的控制器内部实例化我们的 AdditionService 时,我们将能够访问“Addition”函数。在这个函数定义中,我们说这个函数接受两个参数,a 和 b。
-
return a+b;
这里我们定义了加法函数的主体,它只是添加参数并返回添加的值。
-
mainApp.controller('DemoController', function($scope, AdditionService)
这是涉及依赖注入的主要步骤。在我们的控制器定义中,我们现在引用我们的“AdditionService”服务。当 AngularJS 看到这一点时,它将实例化“AdditionService”类型的对象。
-
$scope.result = AdditionService.Addition(5,6);
我们现在正在访问在我们的服务中定义的函数“Addition”并将其分配给控制器的 $scope 对象。
这是一个简单的例子,说明如何定义我们的服务并在控制器内部注入该服务的功能。
总结
- 依赖注入,顾名思义,就是在运行时将依赖功能注入模块的过程。
- 使用依赖注入有助于提高代码的可重用性。如果您有跨多个应用程序模块使用的通用功能,最好的方法是定义一个具有该功能的中央服务,然后将该服务作为依赖项注入到您的应用程序模块中。
- AngularJS 的值对象可以用来注入简单的 Java使用 $inject 在你的控制器中编写脚本对象 AngularJS.
- 服务模块可用于定义可在多个 AngularJS 模块中重复使用的自定义服务。