AngularJS 依赖注入详解和简单实例


Posted in Javascript onJuly 28, 2016

AngularJS 依赖注入

什么是依赖注入

wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖

一句话 --- 没事你不要来找我,有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:

value
factory
service
provider
constant

value

Value 是一个简单的 javascript 对象,用于向控制器传递值(配置阶段):

var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "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);
  }
});

factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 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;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
  this.square = function(a) {
   return MathService.multiply(a,a);
  }
});
...

provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get(),它用于返回 value/service/factory。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
  $provide.provider('MathService', function() {
   this.$get = function() {
     var factory = {}; 
     
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   };
  });
});

constant

constant(常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

实例

以下实例提供了以上几个依赖注入机制的演示。

<html>
  
  <head>
   <meta charset="utf-8">
   <title>AngularJS 依赖注入</title>
  </head>
  
  <body>
   <h2>AngularJS 简单应用</h2>
   
   <div ng-app = "mainApp" ng-controller = "CalcController">
     <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
     <button ng-click = "square()">X<sup>2</sup></button>
     <p>结果: {{result}}</p>
   </div>
   
   <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>

 运行结果:

 AngularJS 依赖注入详解和简单实例

 以上就是对AngularJS 依赖注入资料整理,后续继续补充,希望能帮助开发AngularJS 的朋友。

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
AngularJS中实现动画效果的方法
Jul 28 #Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 #Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 #Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 #Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 #Javascript
AngularJS中的API(接口)简单实现
Jul 28 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
自荐书范文
2013/12/08 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
学子宴致辞大全
2015/07/27 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js