详解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静态作用域的功能。
Dec 25 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
js制作提示框插件
Dec 24 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中jsonp的跨域实例
2013/06/21 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
Python写入CSV文件的方法
2015/07/08 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
如何提高JDBC的性能
2013/04/30 面试题
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
大专生自我鉴定范文
2013/10/01 职场文书
优秀教师先进事迹
2014/01/22 职场文书
中学生运动会入场词
2014/02/12 职场文书
警示教育活动总结
2014/05/05 职场文书
工程材料采购方案
2014/05/18 职场文书
长城的导游词
2015/01/30 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
2015入党自传书范文
2015/06/26 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python