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 相关文章推荐
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
js实现网页定位导航功能
Mar 07 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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内核探索:变量概述
2014/01/30 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
董事长岗位职责
2013/11/30 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
党员目标管理责任书
2014/07/25 职场文书
廉政教育的心得体会
2014/09/01 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
金秋助学感谢信
2015/01/21 职场文书
社团个人总结范文
2015/03/05 职场文书
超市食品安全承诺书
2015/04/29 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
nginx配置限速限流基于内置模块
2022/05/02 Servers
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB