AngularJS依赖注入详解及示例代码

依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。

AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。

值

工厂

服务

提供者

常值

值

值是简单的Java脚本语言对象，它是用来将值传递过程中的配置相位控制器。

//定义一个modulevar mainApp=angular。模块(' mainApp '，[])；//创建一个值对象作为defaultInput '，并传递给它一个数据。mainapp。值(' defaultInput '，5)；//使用其名称“DefaultInPut”main app。控制器(' CalcController '，函数($scope，CalcService，defaultInput){ $ scope。number=defaultInput$ scope。结果=calcservice。square($ scope)。数量)；$ scope。square=function(){ $ scope。结果=calcservice。square($ scope)。数量)；}});工厂

工厂是用于返回函数的值。它根据需求创造值，每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值

//定义一个modulevar mainApp=angular。模块(' mainApp '，[])；//创建一个工厂“MathService”，它提供了一个乘法方法来返回两个numbers mainapp。factory('MathService '，function(){ var factory={ }；factory.multiply=function(a，b){ return a * b } return factory；});//在服务中注入工厂数学服务'，利用factory.mainApp.service的乘法方法(“计算服务”，函数(数学服务){ this。square=函数(a){ return math service。乘(a，a)}；}});服务

服务是一个单一的Java脚本语言包含了一组函数对象来执行某些任务。服务使用服务()函数，然后注入到控制器的定义。

//定义一个modulevar mainApp=angular。模块(' mainApp '，[])；//创建一个服务，定义一个方法平方来返回一个数的平方。mainApp.service('CalcService '，function(math ServiCe){ this。square=函数(a){ return math ServiCe。乘以(a，a))；}});//将服务' CalcService '注入到控制器mainapp。控制器('计算控制器'，函数($scope，calc service，defaultInput){ $ scope。number=defaultInput$ scope。结果=calcservice。square($ scope)。数量)；$ scope。square=function(){ $ scope。结果=calcservice。square($ scope)。数量)；}});提供者

提供者所使用的AngularJS内部创建过程中配置阶段的服务，工厂等（相AngularJS引导自身期间)。下面提到的脚本，可以用来创建，我们已经在前面创建MathService。提供者是一个特殊的工厂方法以及get()方法，用来返回值/服务/工厂。

//定义一个modulevar mainApp=angular。模块(' mainApp '，[])；//使用供应者创建一个服务，该服务定义了一个方法平方来返回一个数字的平方mainApp.config(函数($ provide){ $ provide。提供程序(' MathServiCe '，函数(){这个.$ get=function(){ var factory={ }；factory.multiply=函数(a，b){返回a * b；}返厂；};});});常量

常量用于通过配置相位值考虑事实，值不能使用期间的配置阶段被传递。

mainApp.constant('configParam '，'常量值');

例子

下面的例子将展示上述所有指令。

testAngularJS.html

htmlhead titleAngularJS依赖注入/title/headbody h2AngularJS示例应用程序/H2分部ng-app=' mainApp ' ng-controller=' calc controller ' pEnter a number :输入类型=' number ' ng-model=' number '/button ng-click=' square()' Xsup 2/sup/button preslt : { { result } }/p/div脚本src=' http :http://Ajax。谷歌api。com/Ajaxmainapp。config(函数($ provide){ $ provide。提供程序(' MathServiCe ')，函数(){ this .$ get=function(){ var factory={ }；factory.multiply=函数(a，b){返回a * b；}返厂；};});});mainApp.value('defaultInput '，5)；mainApp.factory('MathService '，function(){ var factory={ }；factory.multiply=函数(a，b){返回a * b；}返厂；});mainApp.service('CalcService '，function(math ServiCe){ this。square=函数(a){ return math ServiCe。乘法(a，a)；} });mainapp。控制器(' calc controller '，函数($scope，CalcService，defaultInput){ $ scope。number=defaultInput$ scope。结果=calcservice。square($ scope)。数量)；$ scope。square=function(){ $ scope。结果=calcservice。square($ scope)。数量)；} });/脚本/正文/html结果

在网浏览器打开textAngularJS.html。看到结果如下。

以上就是对AngularJS依赖注入的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！