详解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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript实用方法总结
Feb 06 Javascript
javaScript基础语法介绍
Feb 28 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php实现学生管理系统
2020/03/21 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
js常见遍历操作小结
2019/06/06 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python 如何在字符串中插入变量
2020/08/01 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
后勤人员岗位职责
2013/12/17 职场文书
项目副经理岗位职责
2013/12/30 职场文书
文员岗位职责范本
2014/03/08 职场文书
春节请假条
2014/04/11 职场文书
员工保密承诺书
2014/05/28 职场文书
求职教师自荐书
2014/06/19 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
单位委托书
2014/10/15 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
小学大队长竞选稿
2015/11/20 职场文书
nginx配置之并发频次限制
2022/04/18 Servers