详解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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
vue使用element-ui按需引入
May 20 Vue.js
详解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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python求pi的方法
2014/10/08 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
市场营销专科应届生求职信
2013/11/24 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
客户答谢会致辞
2015/01/20 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
企业战略合作意向书
2015/05/08 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python