详解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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Vue的过滤器你真了解吗
Feb 24 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
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python和c语言的主要区别总结
2019/07/07 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
.NET remoting中对象激活的两种方式
2015/06/08 面试题
建筑专业自我鉴定
2013/10/22 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
娱乐节目策划方案
2014/06/10 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
人民币使用说明书
2019/04/17 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP