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学习笔记(五)正则表达式
Apr 08 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
js实现简单商品筛选功能
Feb 02 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
详解Python自建logging模块
2018/01/29 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
pandas数据处理进阶详解
2019/10/11 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
实习生自荐信范文分享
2013/11/27 职场文书
银行求职推荐信范文
2013/11/30 职场文书
心理健康心得体会
2014/01/02 职场文书
学生党支部先进事迹
2014/02/04 职场文书
债务纠纷起诉书
2015/05/20 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android