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实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
基于js实现逐步显示文字输出代码实例
Apr 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
php牛逼的面试题分享
2013/01/18 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
js正则表达式的使用详解
2013/07/09 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
js闭包实例汇总
2014/11/09 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python实现flappy bird游戏
2018/12/24 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
selenium如何定位span元素的实现
2021/01/13 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
优秀信贷员先进事迹
2014/01/31 职场文书
安全生产承诺书
2014/03/26 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书