详解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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
javascript 禁止复制网页
Jun 11 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php数组随机排序实现方法
2015/06/13 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
Js的MessageBox
2006/12/03 Javascript
枚举JavaScript对象的函数
2006/12/22 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python实现贪吃蛇双人大战
2020/04/18 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
EJB timer的种类
2014/10/28 面试题
竞选演讲稿范文大全
2014/05/12 职场文书
党的生日演讲稿
2014/09/10 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
golang实现浏览器导出excel文件功能
2022/03/25 Golang