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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 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来检测proxy
2006/10/09 PHP
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
第六章 php目录与文件操作
2011/12/30 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
围观tangram js库
2010/12/28 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
django框架中间件原理与用法详解
2019/12/10 Python
端口镜像是怎么实现的
2014/03/25 面试题
化工机械应届生求职信
2013/11/04 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
廉洁教育学习材料
2014/05/19 职场文书
八年级英语教学计划
2015/01/23 职场文书
德劲DE1108畅想
2021/04/22 无线电