AngularJS中模块化和依赖注入的示例分析
这篇文章主要介绍了AngularJS中模块化和依赖注入的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站是一家专业提供牡丹企业网站建设,专注与做网站、成都做网站、HTML5、小程序制作等业务。10年已为牡丹众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
AngularJS 带有内置的依赖注入机制。您可以将您的应用程序分为多个不同类型的AngularJS可以注入到每个等组成。模块化您的应用程序可以更容易地重新使用,配置和应用程序测试组件。
AngularJS包含以下核心类型的对象和组件:
价值
工厂
服务
提供者
持续的
这些核心类型可以注入到彼此使用AngularJS依赖注入机制。纵观本文的其余部分,我将解释如何定义和注入这些组件相互转化。
价值
在AngularJS的值是一个简单的对象。它可以是一个数字,字符串或JavaScript对象。值通常用作注入工厂、服务或控制器的配置。
一个值必须属于一个 AngularJS 模块。这里有三个例子,价值观添加到AngularJS模块:
var myModule = angular.module("myModule", []); myModule.value( “numberValue”,999); myModule.value( “stringValue的”, “ABC”); myModule.value("objectValue", { val1 : 123, val2 : "abc"} );
这些值是使用value()
模块上的函数定义的。第一个参数是所述值的名称,并且第二参数是所述值本身。工厂,服务和控制器现在可以通过它们的名字引用这些值。
注入价值
注入的值成AngularJS控制器功能是通过将参数具有相同的名称作为值(传递给所述第一参数简单地完成value()
函数被定义的值时)。下面是一个例子:
var myModule = angular.module("myModule", []); myModule.value( “ numberValue ”,999); myModule.controller( “myController的”功能($范围,numberValue){ 的console.log(numberValue); });
通知控制器功能的第二个参数是如何具有相同的名称作为值。
工厂
工厂是一个创造价值的函数。当服务、控制器等需要从工厂注入的值时,工厂会按需创建该值。一旦创建,该值将被重新用于所有需要注入的服务、控制器等。因此,工厂与值的不同之处在于它可以使用工厂函数来创建它返回的对象。您还可以将值注入工厂以在创建对象时使用。你不能用一个值来做到这一点。
这是一个在模块上定义工厂的示例,以及一个获取工厂创建值注入的控制器:
var myModule = angular.module("myModule", []); myModule.factory("myFactory", function() { return "a value"; }); myModule.controller("MyController", function($scope, myFactory) { console.log(myFactory); });
如您所见,它与定义和注入值对象非常相似。请记住,注入的不是工厂函数,而是工厂函数产生的值。
价值观注入到工厂
您可以将值注入工厂。它的工作原理就像将值注入控制器一样。下面是一个例子:
var myModule = angular.module("myModule", []); myModule.value("numberValue", 999); myModule.factory("myFactory", function(numberValue) { return "a value: " + numberValue; });
在这个例子中,注入的值用于创建由工厂函数创建的对象。
服务
AngularJS 中的服务是一个包含一组函数的单例 JavaScript 对象。这些函数包含服务执行其工作所需的任何逻辑。
AngularJS 服务是使用service()
模块上的函数创建的。下面是一个例子:
function MyService() {this.doIt = function() {console.log("done");}} var myModule = angular.module("myModule", []); myModule.service("myService", MyService);
如您所见,服务的定义与工厂和值有所不同。首先,服务被定义为一个单独的命名函数。这是因为 AngularJS 中的服务是使用new
关键字创建的。因此,AngularJS 将在内部执行此操作:
var theService = new MyService();
除了将服务定义为内部带有函数的函数之外,您还可以将它们添加到 AngularJS 中并将其与 AngularJS 一起使用,就像使用值或函数一样。您可以像这样将服务注入控制器:
function MyService() { this.doIt = function() { console.log("done"); } } var myModule = angular.module("myModule", []); myModule.service("myService", MyService); myModule.controller("MyController", function($scope, myService) { myService.doIt(); });
价值注入到服务
您可以将值注入服务,就像您可以将值注入控制器,或将服务注入控制器等。这是一个示例:
var myModule = angular.module("myModule", []); myModule.value ("myValue" , "12345"); function MyService(myValue) { this.doIt = function() { console.log("done: " + myValue; } } myModule.service("myService", MyService);
注意MyService
函数的参数是如何命名为与模块上注册的值相同的。因此,该值将在创建时注入到服务中。
provider
AngularJS 中的提供者是您可以创建的最灵活的工厂形式。您可以像使用服务或工厂一样使用模块注册提供者,但您要使用该 provider()
函数。这是一个 AngularJS 提供程序示例:
var myModule = angular.module("myModule", []); myModule.provider("mySecondService", function() { var provider = {}; provider.$get = function() { var service = {}; service.doService = function() { console.log("mySecondService: Service Done!"); } return service; } return provider; });
如您所见,该provider()
函数采用 2 个参数。第一个参数是提供者创建的服务/对象的名称。在这种情况下,名称是mySecondService
。第二个参数是创建提供程序的函数。注意:提供者本身是一个工厂,因此此时没有从提供者创建实际的服务或对象。仅定义了创建提供程序的函数。
当您查看创建提供程序的函数时,您可以看到提供程序是一个 JavaScript 对象。
JavaScript 提供程序对象包含一个$get()
函数。这是提供者的工厂函数。换句话说,该$get()
函数会创建提供者创建的任何内容(服务、值等)。在上面的例子中,提供者创建了一个服务对象,其中包含一个名为 的服务函数(标准 JavaScript 函数)doService()
。
为了将提供者的产品注入控制器,请指定对提供者的依赖,就像使用服务一样。注入控制器的是提供者创建的产品,而不是提供者本身。这是一个 AngularJS 提供程序注入示例:
myModule.controller("MyController", function($scope, mySecondService ) { $scope.whenButtonClicked = function() { mySecondService.doIt(); } });
如您所见,提供者的名称用作控制器函数中的参数。提供者的$get()
函数创建的对象将被注入到这个参数中。
配置提供商
可以在模块的配置阶段通过调用其函数来进一步配置提供者。下面是一个例子:
var myModule = angular.module("myModule", []); myModule.provider("mySecondService", function() { var provider = {}; var config = { configParam : "default" }; provider.doConfig = function(configParam) { config.configParam = configParam; } provider.$get = function() { var service = {}; service.doService = function() { console.log("mySecondService: " + config.configParam); } return service; } return provider; }); myModule.config( function( mySecondServiceProvider ) { mySecondServiceProvider.doConfig("new config param"); }); myModule.controller("MyController", function($scope, mySecondService) { $scope.whenButtonClicked = function() { mySecondService.doIt(); } });
注意 provider 对象现在如何有一个名为 的额外函数doConfig()
。此函数可用于在提供程序上设置配置参数。
还要注意对myModule.config()
函数的调用。该config
函数接受一个函数作为参数。该函数可以配置模块。传递给的函数 config()
采用名为 的单个参数mySecondServiceProvider
。这与提供者注册的名称相同Provider
,后缀为 plus 。后缀告诉 AngularJS 注入提供者本身,而不是提供者创建的对象。在传递给config()
函数的mySecondServiceProvider.doConfig()
函数内部调用该函数,该函数在提供程序上设置 config 参数。
示例中稍后定义的控制器仅依赖于提供者创建的对象(而不是提供者本身)。它通过获取一个名为mySecondService
name 的参数来实现,该参数是服务提供者注册的名称。如您所见,从$scope.whenButtonClicked()
函数内部使用的服务 。
常数
在上一节有关提供程序的部分中,您看到了如何通过module.config()
函数配置提供程序。不幸的是,您不能将值注入到module.config()
函数中。相反,您可以注入常量。
AngularJS 中的常量是使用module.constants()
函数定义的。这是一个 AngularJS 常量示例:
myModule.constant("configValue", "constant config value");
这个常量现在可以module.config()
像这样注入到函数中:
myservices.config( function( mySecondServiceProvider, configValue ) { mySecondServiceProvider.doConfig(configValue); });
如您所见,该参数configValue
与常量的名称相匹配,该名称也是 configValue
. 因此常量的值将被注入到这个参数中。然后将常量值作为参数传递给提供程序doConfig()
上的函数 mySecondServiceProvider
。
模块之间的依赖关系
如您所见,值、工厂和服务被添加到 AngularJS 模块中。一个模块可以使用另一个模块的值、工厂和服务。为此,模块需要声明对包含它要使用的值、工厂和服务的模块的依赖关系。下面是一个例子:
var myUtilModule = angular.module("myUtilModule", []); myUtilModule.value("myValue", "12345"); var myOtherModule = angular.module("myOtherModule", [ 'myUtilModule' ]); myOtherModule.controller("MyController", function($scope, myValue ) { });
注意第二个模块 ( myOtherModule
)如何在myUtilModule
传递给angular.module()
函数的第二个参数(数组内部)中列出第一个模块 ( )的名称。这告诉 AngularJS 中定义的所有值、工厂和服务也myUtilModule
应该在myOtherModule
模块中可用。换句话说,myOtherModule
取决于 myUtilModule
。
其次,注意MyController
控制器函数现在如何声明一个名为 的参数myValue
。该值将从在myUtilModule
模块上注册的值提供。
微小的安全依赖注入AngularJS
当您缩小 JavaScript 时,JavaScript minifier 会用较短的名称替换局部变量和参数的名称。然而,AngularJS 使用控制器函数、工厂、服务和提供者的参数名称来决定将什么注入到他们的工厂函数中。如果名称更改,AngularJS 将无法注入正确的对象。
为了使您的 AngularJS 代码压缩安全,您需要提供要作为字符串注入的对象的名称。您将这些字符串与需要注入值的函数一起包装在一个数组中。这是一个 AngularJS 压缩安全依赖注入示例:
var myapp = angular.module("myapp", ['myservices']); myapp.controller("AController", ['$scope', function(p1) { p1.myvar = "the value"; }]);
本示例将$scope
对象注入到p1
控制器函数的参数中。
注意控制器函数是如何注册的。不是angular.controller
直接将控制器函数传递给函数,而是传递一个数组。该数组包含要注入控制器函数的值的名称,以及控制器函数本身。控制器函数始终是该数组中的最后一个值。如果需要注入多个值,则值名称列在数组的开头,并按它们要注入函数的顺序列出。这是一个缩小安全的多值示例:
var myapp = angular.module("myapp", ['myservices']); myapp.controller("AController", ['$scope', '$http', function(p1, p2) { p1.myvar = "the value"; p2.get("/myservice.json"); }]);
此示例将$scope
对象注入p1
参数,并将$http
服务注入p2
控制器函数的参数。
现在,控制器函数的参数名称不再重要。AngularJS 将使用数组开头的字符串来确定要注入到控制器函数中的内容。
相同的机制可用于工厂、服务和提供者,以提供缩小安全的依赖注入。这是一个小型化安全工厂、服务和提供程序示例:
var myutil = angular.module("myutil", []); myutil.value("safeValue", "a safe value"); myutil.factory("safeFactory", ['safeValue', function(p1) { return { value : p1 }; }]); function MySafeService(p1){ this.doIt = function() { return "MySafeService.doIt() called: " + p1.value; } } myutil.service("safeService", ['safeFactory', MySafeService]); myutil.provider("safeService2", function() { var provider = {}; provider.$get = ['safeService', function(p1) { var service = {}; service.doService = function() { console.log("safeService from provider: " + p1.doIt()); } return service; }]; return provider; }); myapp.controller("AController", ['$scope', 'safeService2', function(p1, p2) { p1.myvar = "the value"; p2.doService(); }]);
尤其要注意的provider的声明。注意,此时的依赖不会对provider工厂函数指定,但对$get()
从provider工厂函数内部返回的供应商的功能。实际上,使用具有依赖项名称和函数实现的数组而不仅仅是$get()
函数。
感谢你能够认真阅读完这篇文章,希望小编分享的“AngularJS中模块化和依赖注入的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
本文题目:AngularJS中模块化和依赖注入的示例分析
当前URL:http://pwwzsj.com/article/ihhosi.html