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 type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></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 SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...
Scrapy学习篇（十二）之设置随机IP代理（IPProxy）
当我们需要大量的爬取网站信息时,除了切换User-Agent之外,另外一个重要的方式就是设置IP代理,以防止我们的爬虫被拒绝,下面我们就来演示scrapy如何设置随机IPProxy. 设置随机IPPr ...
Redis学习篇（十二）之管道技术
通过管道技术降低往返时延当后一条命令不依赖于前一条命令的返回结果时,可以使用管道技术将多条命令一起发送给redis服务器,服务器执行结束之后,一起返回结果,降低了通信频度.
AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象迭代对象转换对象全局 API 函数使用 angular 对象进行访 ...
AngularJS学习篇（十六）
AngularJS 表单 HTML 控件以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
AngularJS学习篇（十五）
AngularJS 模块模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块你可以通过 AngularJS 的 angular. ...
AngularJS学习篇（十四）
AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...
AngularJS学习篇（十）
AngularJS Select(选择框) 使用 ng-options 创建选择框在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如 ...
我的MYSQL学习心得（十二）触发器
我的MYSQL学习心得(十二) 触发器我的MYSQL学习心得(一) 简单语法我的MYSQL学习心得(二) 数据类型宽度我的MYSQL学习心得(三) 查看字段长度我的MYSQL学习心得(四) 数 ...

随机推荐

python之gui-tkinter可视化编辑界面自动生成代码
首先提供资源链接 http://pan.baidu.com/s/1kVLOrIn#list/path=%2F
使用node.js检查js语法错误
如果没有一些工具和插件写JavaScript代码遇到语法错误找起来很费时间,请教了同事怎么用node.js检查用浏览器测试的时候报语法错误. 1.点击红圈中的蓝色按钮,下次刷新是会在抛出异常的时候自 ...
vue学习心得
前言使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建假设你已经通读vue官方文档(文档都 ...
C#泛型基础知识点总结
1.0 什么是泛型泛型是C#2.0和CLR(公共语言运行时)升级的一个新特性,泛型为.NET 框架引入了一个叫 type parameters(类型参数)的概念,type parameters 使 ...
Python 基础之函数、深浅copy,set及练习
三元运算符通常在Python里被称为条件表达式,这些表达式基于真(true)/假(not)的条件判断,在Python 2.4以上才有了三元操作. 语法格式: X if C else Y 有了三元表达式 ...
Promise 对象
Promise 对象用于处理异步请求,保存一个异步操作最终完成(或失败)的结果语法 new Promise( /* executor */ function(resolve, reject) {.. ...
Linux目录结构详解（一）
Linux目录结构,在逻辑上所有目录只有一个顶点,即/(根目录),是所有目录的起点.根下面类似于一个倒挂着的树的结构. Linux目录按照类别组织: 应用程序 /usr/bin 数据文件,帮助/usr ...
Javascript 面向对象编程—封装
前言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
NSTimer的问题
iOS开发中,涉及到定时的问题,我们通常使用NSTimer来解决,例如下面的代码. SFClass.h #import <Foundation/Foundation.h> @interfa ...
Linux-问题集锦(1)
一. 某用户只读特定文件夹只读目录 : /home/www/yqz/logs 1. 创建用户 useradd ReadOnly passwd ReadOnly 2. ...

AngularJS学习篇（二十二）