AngularJS 依赖注入详解及示例代码


Posted in Javascript onAugust 17, 2016

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

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 依赖注入详解及示例代码

以上就是对AngularJS 依赖注入的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
jQuery实现简单全选框
Sep 13 jQuery
AngularJS 服务详细讲解及示例代码
Aug 17 #Javascript
深入理解jQuery layui分页控件的使用
Aug 17 #Javascript
AngularJS 作用域详解及示例代码
Aug 17 #Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
Node.js中使用jQuery的做法
Aug 17 #Javascript
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
React中的render何时执行过程
2018/04/13 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python模块之StringIO使用示例
2015/04/08 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python hashlib加密实现代码
2019/10/17 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
MYSQL基础面试题
2012/05/13 面试题
一帮一活动总结
2014/05/08 职场文书
班级文化建设标语
2014/06/23 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android