AngularJS学习篇（二十二）
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学习心得(四) 数 ...
随机推荐
- SSM之整合Redis
Redis安装与使用 第一步当然是安装Redis,这里以Windows上的安装为例. 首先下载Redis,可以选择msi或zip包安装方式 zip方式需打开cmd窗口,在解压后的目录下运行redis- ...
- Integer的自动拆箱
public class Test2{ public static void main(String[] args){ Integer a=1; Integer b=2; Integer c=3; I ...
- IO模型分析
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- 分享基于分布式Http长连接框架--设计模型
追求简单的设计. 也许你的设计功能很强大,但能够在满足你需求的前提下尽量简单明了设计. 当你的设计过于复杂的时候想想是不是有其它路可以走,你站在别人的角度想下,如果别人看了你的设计会不会心领神会,还是 ...
- 安装CentOS7精简版后的配置工作
CentOS7完整版有7.7G,太大了下载起来比较费劲,还是下载了精简版,但是精简版安装以后很多命令都没有,还要动手配yum源,按需安装 国内的yum源比较好的就是163的了,配置方法: 1,进入yu ...
- PHP MYSQL 搜索周边坐标，并计算两个点之间的距离
搜索附近地点,例如,坐标(39.91, 116.37)附近500米内的人,首先算出“给定坐标附近500米”这个范围的坐标范围. 虽然它是个圆,但我们可以先求出该圆的外接正方形,然后拿正方形的经纬度范围 ...
- apache 安装/mod_dir.so: undefined symbol: apr_array_clear
apache 安装好后 启动出错: httpd: Syntax error on line 143 of /usr/local/apache2/conf/httpd.conf: Cannot load ...
- 高德地图测两点距离android比较精确的
/////参考资料:高德官方:[http://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation] 主要三 ...
- python _winreg模块
详细资料请参考:https://docs.python.org/2/library/_winreg.html 一.常用函数功能介绍 OpenKey() - 打开一个key ############## ...
- Python系列之反射、面向对象
一.反射 说反射之前先介绍一下__import__方法,这个和import导入模块的另一种方式 1. import commons 2. __import__('commons') 如果是多层导入: ...