详解AngularJS中的依赖注入机制


Posted in Javascript onJune 17, 2015

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

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

  •     值
  •     工厂
  •     服务
  •     提供者
  •     常值

值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器。

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
   $scope.result = CalcService.square($scope.number);
  }
});

工厂

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

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {   
  var factory = {}; 
  factory.multiply = function(a, b) {
   return a * b 
  }
  return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
...

服务

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

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
   $scope.result = CalcService.square($scope.number);
  }
});

提供者

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

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
  $provide.provider('MathService', function() {
   this.$get = function() {
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   };
  });
});

常量

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

mainApp.constant("configParam", "constant value");

例子

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

<html>
<head>
  <title>AngularJS Dependency Injection</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="CalcController">
   <p>Enter a number: <input type="number" ng-model="number" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);
  
   mainApp.config(function($provide) {
     $provide.provider('MathService', function() {
      this.$get = function() {
        var factory = {}; 
        factory.multiply = function(a, b) {
         return a * b; 
        }
        return factory;
      };
     });
   });

   mainApp.value("defaultInput", 5);

   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   }); 

   mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
     }
   });

   mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
     }
   });
  </script>
</body>
</html>

结果

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

详解AngularJS中的依赖注入机制

Javascript 相关文章推荐
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
vue观察模式浅析
Sep 25 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
详解AngularJS中的作用域
Jun 17 #Javascript
简介AngularJS中使用factory和service的方法
Jun 17 #Javascript
简介AngularJS的视图功能应用
Jun 17 #Javascript
在AngularJS中使用AJAX的方法
Jun 17 #Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 #Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php桥接模式应用案例分析
2019/10/23 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
python创建和删除目录的方法
2015/04/29 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python 硬币兑换问题
2019/07/29 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
表彰先进集体通报
2014/01/12 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
免职证明样本
2014/10/23 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
MySQL开启事务的方式
2021/06/26 MySQL