AngularJS依赖注入

什么是依赖注入

Wiki解释了依赖注入(DI)是一种软件设计模式，将一个或多个依赖(或服务)注入(或通过引用传递)到一个独立的对象(或客户端)中，然后成为客户端状态的一部分。这种模式分离了客户端依赖行为的创建，这使得编程变得松散耦合，并遵循依赖反转和单一责任的原则。与服务定位器模式形成鲜明对比的是，它允许客户端知道客户端如何使用系统来查找依赖关系

一句话——没事就别来找我，有事我就来找你。

AngularJS提供了一个很好的依赖注入机制。以下五个核心组件用作依赖注入：

valuefactoryserviceproviderconstat

价值

Value是一个简单的javascript对象，用于将值传递给控制器(配置阶段):

var main app=angular . module(' main app '，[])；//创建value对象' defaultInput '并传递数据mainApp.value('defaultInput '，5)；将“defaultInput”注入控制器主应用程序.控制器(' calc controller '，函数($ scope，calc service，默认输入){$ scope。number=默认输入；$ scope . result=calcservice . square($ scope . number)；$ scope . square=function(){ $ scope . result=calcservice . square($ scope . number)；}});工厂

工厂是一个返回值的函数。服务和控制器需要时创建。通常我们使用工厂函数来计算或返回值。

//定义一个模块var main app=angular . module(' main app '，[])；//为两个数字的乘积创建工厂“MathService”提供一个方法multiple返回两个数字的乘法运算smainapp.factory ('mathservice '，function(){ varfactory={ }；factory.multiply=function(a，b){ return a * b } return factory；});//注入工厂“math service”main app . service(' calc service ')，函数(mathservice) {this。square=函数(a){ return math service . multiply(a，a)；}});供应者

在AngularJS中，创建服务、工厂等。通过提供者(配置阶段)。

提供程序提供了一个工厂方法get()，用于返回值/服务/工厂。

//定义一个模块var main app=angular . module(' main app '，[])；用provider创建服务，定义一个方法来计算两个数字的乘积，main app . config(function($ provide){ $ provide . provider(' math service ')，function () {this .$ get=function(){ varfactory={ }；factory.multiply=函数(a，b){ return a * b；}返厂；};});});常数

常量用于在配置过程中传递数值。请注意，该常数在配置期间不可用。

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

例子

以下示例演示了上述依赖注入机制。

超文本标记语言头元字符集='utf-8' titleAngularJS依赖注入/title /head body h2AngularJS简单应用/H2分部ng-app=' main app ' ng-controller=' calc controller ' p输入一个数字：输入类型=' number ' ng-model=' number '/p按钮ng-click=' square()' Xsup 2/sup/按钮p结果： {{result}}/p /div脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js /脚本var mainApp=angular。模块(' mainApp '，[])；mainapp。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运行结果：

以上就是对AngularJS依赖注入资料整理，后续继续补充，希望能帮助开发AngularJS的朋友。