AngularJS 依赖注入

什么是依赖注入

wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

一句话 --- 没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

  • value
  • factory
  • service
  • provider
  • constant

value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

  1. // 定义一个模块
  2. var mainApp = angular.module("mainApp", []);
  3.  
  4. // 创建 value 对象 "defaultInput" 并传递数据
  5. mainApp.value("defaultInput", 5);
  6. ...
  7.  
  8. // 将 "defaultInput" 注入到控制器
  9. mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
  10.    $scope.number = defaultInput;
  11.    $scope.result = CalcService.square($scope.number);
  12.  
  13.    $scope.square = function() {
  14.       $scope.result = CalcService.square($scope.number);
  15.    }
  16. });

factory

factory 是一个函数，用于返回值。在 service 和 controller 需要时创建。

通常我们使用 factory 函数来计算或返回值。

  1. // 定义一个模块
  2. var mainApp = angular.module("mainApp", []);
  3.  
  4. // 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
  5. mainApp.factory('MathService', function() {
  6.    var factory = {};
  7.  
  8.    factory.multiply = function(a, b) {
  9.       return a * b
  10.    }
  11.    return factory;
  12. }); 
  13.  
  14. // 在 service 中注入 factory "MathService"
  15. mainApp.service('CalcService', function(MathService){
  16.    this.square = function(a) {
  17.       return MathService.multiply(a,a);
  18.    }
  19. });

provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

  1. // 定义一个模块
  2. var mainApp = angular.module("mainApp", []);
  3. ...
  4.  
  5. // 使用 provider 创建 service 定义一个方法用于计算两数乘积
  6. mainApp.config(function($provide) {
  7.    $provide.provider('MathService', function() {
  8.       this.$get = function() {
  9.          var factory = {};  
  10.  
  11.          factory.multiply = function(a, b) {
  12.             return a * b;
  13.          }
  14.          return factory;
  15.       };
  16.    });
  17. });

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

  1. mainApp.constant("configParam", "constant value");

实例

以下实例提供了以上几个依赖注入机制的演示。

  1. <html>
  2.  
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>AngularJS  依赖注入</title>
  6.    </head>
  7.  
  8.    <body>
  9.       <h2>AngularJS 简单应用</h2>
  10.  
  11.       <div ng-app = "mainApp" ng-controller = "CalcController">
  12.          <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
  13.          <button ng-click = "square()">X<sup>2</sup></button>
  14.          <p>结果: {{result}}</p>
  15.       </div>
  16. <script type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
  17.  
  18.       <script>
  19.          var mainApp = angular.module("mainApp", []);
  20.  
  21.          mainApp.config(function($provide) {
  22.             $provide.provider('MathService', function() {
  23.                this.$get = function() {
  24.                   var factory = {};
  25.  
  26.                   factory.multiply = function(a, b) {
  27.                      return a * b;
  28.                   }
  29.                   return factory;
  30.                };
  31.             });
  32.          });
  33.  
  34.          mainApp.value("defaultInput", 5);
  35.  
  36.          mainApp.factory('MathService', function() {
  37.             var factory = {};
  38.  
  39.             factory.multiply = function(a, b) {
  40.                return a * b;
  41.             }
  42.             return factory;
  43.          });
  44.  
  45.          mainApp.service('CalcService', function(MathService){
  46.             this.square = function(a) {
  47.                return MathService.multiply(a,a);
  48.             }
  49.          });
  50.  
  51.          mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
  52.             $scope.number = defaultInput;
  53.             $scope.result = CalcService.square($scope.number);
  54.  
  55.             $scope.square = function() {
  56.                $scope.result = CalcService.square($scope.number);
  57.             }
  58.          });
  59.  
  60.       </script>
  61.  
  62.    </body>
  63. </html>

AngularJS学习篇（二十二）的更多相关文章

  1. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

  2. Scrapy学习篇（十二）之设置随机IP代理（IPProxy）

    当我们需要大量的爬取网站信息时,除了切换User-Agent之外,另外一个重要的方式就是设置IP代理,以防止我们的爬虫被拒绝,下面我们就来演示scrapy如何设置随机IPProxy. 设置随机IPPr ...

  3. Redis学习篇（十二）之管道技术

    通过管道技术降低往返时延 当后一条命令不依赖于前一条命令的返回结果时,可以使用管道技术将多条命令一起 发送给redis服务器,服务器执行结束之后,一起返回结果,降低了通信频度.

  4. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  5. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  6. AngularJS学习篇（十六）

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

  7. AngularJS学习篇（十五）

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...

  8. AngularJS学习篇（十四）

    AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...

  9. AngularJS学习篇（十）

    AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如 ...

  10. 我的MYSQL学习心得（十二） 触发器

    我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...

随机推荐

  1. SQL语言知识点总结

    1.DQL.DML.DDL.DCL的概念与区别 一.SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下: 1974年- ...

  2. Linux脚本入门（1）

    1. Linux 脚本编写基础1.1 语法基本介绍1.1.1 开头程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例 ...

  3. struts jar包

    这些错误很让我摸不着头脑,经多方查阅资料后,在Struts 2.2.x中应该导入如下7个JAR文件 1)   commons-fileupload-1.2.1.jar 2)   commons-io- ...

  4. Hadoop 一: NCDC 数据准备

    Hadoop 本文介绍Hadoop- The Definitive Guide一书中的NCDC数据准备,为后面的学习构建大数据环境; 环境 3节点 Hadoop 2.7.3 集群; java vers ...

  5. Codeforces Round #430 (Div. 2)

    A. Kirill And The Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  6. Python s12 Day1 笔记及作业

    作业一: 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 python3代码 : # -*- coding:utf-8 -*- input_name = input("Please ...

  7. 邮件实现详解（二）------手工体验smtp和pop3协议

    上篇博客我们简单介绍了电子邮件的发送和接收过程,对参与其中的邮件服务器,邮件客户端软件,邮件传输协议也有简单的介绍.我们知道电子邮件需要在邮件客户端和邮件服务器之间,以及两个邮件服务器之间进行传递必须 ...

  8. 关于Websockets问题:

     Websockets是一种与服务器进行全双工,双向通信的信道,它不使用http协议,他有自己的协议即自定义协议,ws协议:它的安全协议为wss协议.这种协议专门为快速传输小数据而设计的.对服务其有一 ...

  9. 聊聊VUE中的nextTick

    在谈nextTick之前,先要说明一件事,可能在我们平时使用vue时并没有关注到,事实上,vue执行的DOM更新是异步的. 举个栗子: <template> <div class=& ...

  10. webpack-dev-server配置指南（使用webpack3.0）

    最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...