AngularJS? 带有内置的依赖注入机制。您可以将您的应用程序分为多个不同类型的AngularJS可以注入到每个等组成。模块化您的应用程序可以更容易地重新使用,配置和应用程序测试组件。
AngularJS 带有内置的依赖注入机制。您可以将您的应用程序分为多个不同类型的AngularJS可以注入到每个等组成。模块化您的应用程序可以更容易地重新使用,配置和应用程序测试组件。【相关教程推荐:《angular教程》】 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"} ); 这些值是使用 注入价值 注入的值成AngularJS控制器功能是通过将参数具有相同的名称作为值(传递给所述第一参数简单地完成 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 服务是使用 function MyService() {this.doIt = function() {console.log("done");}} var myModule = angular.module("myModule", []); myModule.service("myService", MyService); 如您所见,服务的定义与工厂和值有所不同。首先,服务被定义为一个单独的命名函数。这是因为 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); 注意 providerAngularJS 中的提供者是您可以创建的最灵活的工厂形式。您可以像使用服务或工厂一样使用模块注册提供者,但您要使用该 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; }); 如您所见,该 当您查看创建提供程序的函数时,您可以看到提供程序是一个 JavaScript 对象。 JavaScript 提供程序对象包含一个 为了将提供者的产品注入控制器,请指定对提供者的依赖,就像使用服务一样。注入控制器的是提供者创建的产品,而不是提供者本身。这是一个 AngularJS 提供程序注入示例: myModule.controller("MyController", function($scope, mySecondService ) { $scope.whenButtonClicked = function() { mySecondService.doIt(); } }); 如您所见,提供者的名称用作控制器函数中的参数。提供者的 配置提供商 可以在模块的配置阶段通过调用其函数来进一步配置提供者。下面是一个例子: 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 对象现在如何有一个名为 的额外函数 还要注意对 示例中稍后定义的控制器仅依赖于提供者创建的对象(而不是提供者本身)。它通过获取一个名为 常数在上一节有关提供程序的部分中,您看到了如何通过 AngularJS 中的常量是使用 myModule.constant("configValue", "constant config value"); 这个常量现在可以 myservices.config( function( mySecondServiceProvider, configValue ) { mySecondServiceProvider.doConfig(configValue); }); 如您所见,该参数 模块之间的依赖关系如您所见,值、工厂和服务被添加到 AngularJS 模块中。一个模块可以使用另一个模块的值、工厂和服务。为此,模块需要声明对包含它要使用的值、工厂和服务的模块的依赖关系。下面是一个例子: var myUtilModule = angular.module("myUtilModule", []); myUtilModule.value("myValue", "12345"); var myOtherModule = angular.module("myOtherModule", [ 'myUtilModule' ]); myOtherModule.controller("MyController", function($scope, myValue ) { }); 注意第二个模块 ( 其次,注意 微小的安全依赖注入AngularJS当您缩小 JavaScript 时,JavaScript minifier 会用较短的名称替换局部变量和参数的名称。然而,AngularJS 使用控制器函数、工厂、服务和提供者的参数名称来决定将什么注入到他们的工厂函数中。如果名称更改,AngularJS 将无法注入正确的对象。 为了使您的 AngularJS 代码压缩安全,您需要提供要作为字符串注入的对象的名称。您将这些字符串与需要注入值的函数一起包装在一个数组中。这是一个 AngularJS 压缩安全依赖注入示例: var myapp = angular.module("myapp", ['myservices']); myapp.controller("AController", ['$scope', function(p1) { p1.myvar = "the value"; }]); 本示例将 注意控制器函数是如何注册的。不是 var myapp = angular.module("myapp", ['myservices']); myapp.controller("AController", ['$scope', '$http', function(p1, p2) { p1.myvar = "the value"; p2.get("/myservice.json"); }]); 此示例将 现在,控制器函数的参数名称不再重要。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工厂函数指定,但对 更多编程相关知识,请访问:编程视频!! 以上就是深入了解AngularJS中的模块化和依赖注入的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |