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学习心得(四) 数 ...
随机推荐
- 为什么要用深度学习来做个性化推荐 CTR 预估
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:苏博览 深度学习应该这一两年计算机圈子里最热的一个词了.基于深度学习,工程师们在图像,语音,NLP等领域都取得了令人振奋的进展.而深 ...
- Linux 安装PHP探针
学习linux系统还是很有意思的事情,下面这个就是探针,想必有人已经看到过类似的界面主要用来查看自己服务器的运行状况,简单看看内存占用及运行时间就可以了 1 首先要安装Apahce 及 php,命令如 ...
- WaitAll 和 WhenAll 的使用及区别
用过.net 异步编程的同学都知道,比以前的多线程编程实现起来真的方便很多,今天把WaitAll和WhenAll这两种编程方式回顾总结一下(当然WaitAny.WhenAny是一样的操作) 1:Wai ...
- java中log4j学习笔记
Log4j是apache的一个开源项目,用来操作程序日志信息的框架.因便于管理,在工程中用来代替System.out打印语句.通过配置Log4j中的log4j.properties,可以指定日志信息的 ...
- install xdebug
安装准备 安排php的xdebug扩展,在php.ini上配置xdebug.通过phpinfo或者php-m 查看 [Xdebug] zend_extension ="D:\upupw7\P ...
- 如何用Django从零开始搭建一个网站（0）
python,django等安装就直接略过了.下面直接奔如主题,搭建网站. Step1:新建一个django project,运行命令:‘django-admin startproject myPit ...
- cmd获取python返回值
test.py代码如下: import urllib2 import sys try: f = urllib2.urlopen('http://www.baidu.com/',timeout = 10 ...
- MVC中View界面数据呈现示例
@using System.Text; @model List<MvcShopping.Models.ProductCategory> @{ ViewBag.Title = "测 ...
- 浅谈Java抽象类
什么是抽象类?这名字听着就挺抽象的,第一次听到这个名字还真有可能被唬住.但是,就像老人家所说的,一切反动派都是纸老虎,一切有着装x名字的概念也是纸老虎.好吧,我们已经从战略上做到了藐视它,现在就要战术 ...
- cocos2dx - 环境配置，项目创建
准备工具 cocos2dx当前最新版本:v3.9 官网下载地址: http://www.cocos.com/download/ python 2.7x最新版本:2.7.11 官 ...