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 相关文章推荐
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
详解ES6中class的实现原理
Oct 03 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错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
javascript 事件处理程序介绍
2012/06/27 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
vue按需加载实例详解
2019/09/06 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Python网站验证码识别
2016/01/25 Python
Python 加密的实例详解
2017/10/09 Python
pandas string转dataframe的方法
2018/04/11 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
考试违纪检讨书
2014/02/02 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014年科技工作总结
2014/11/26 职场文书
成本会计岗位职责
2015/02/03 职场文书
酒店前台岗位职责
2015/04/16 职场文书
初二英语教学反思
2016/02/15 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang