AngularJS 中的 factory、 service 和 provider
AngularJS 中的 factory、 service 和 provider
初学 AngularJS 时, 肯定会对其提供 factory 、 service 和 provider 感到疑惑, 这三种都是提供服务的方式, 他们到底有什么区别呢?
factory
factory 可以认为是设计模式中的工厂方法, 就是你提供一个方法, 该方法返回一个对象的实例, 对于 AngularJS 的 factory 来说, 就是先定义一个对象, 给这个对象添加属性和方法, 然后返回这个对象, 例如:
var app = angular.module('MyApp', []);
app.factory('MyFactory', function() {
// define result object of factory.
var result = {};
// add some property and method to the object
result.greeting = 'Hello from factory.';
// return the object;
return result;
});
最后 controller 拿到的就是 result
对象, 相当于下面的代码:
var factoryResult = MyFactory();
所谓的 factory 就是这么简单。
service
service 通过 new
运算符进行实例化, 可以认为是一个类型, 只要把属性和方法添加到 this
对象上即可, 不用显式返回什么对象, 比如下面的代码:
app.service('MyService', function() {
this.greeting = 'Hello from service';
});
controller 拿到的对象就是上面代码中 this
指向的对象, 相当于下面的代码:
var serviceObj = new MyService();
provider
与 factory 和 service 稍有不同的是, provider 必须提供一个 $get
方法, $get
方法和 factory 要求是一致的, 即: 先定义一个对象, 给这个对象添加属性和方法, 然后返回这个对象, 例如:
app.provider('MyProvider', function() {
this.$get = function() {
var result = {};
result.greeting = 'Hello from provider';
return result;
}
})
最后 controller 拿到的对象就是 provider 的 $get
方法返回的对象, 相当于下面的代码:
var instance = new MyProvider();
var provider = instance.$get();
使用 factory、 service 与 provider
factory、 service 与 provider 使用起来是一样的, 都是通过 AngularJS 的依赖注入使用, 比如:
// inject factory, service and provider to a controller
app.controller('TestController', ['$scope', 'MyFactory', 'MyService', 'MyProvider', function($scope, myFactory, myService, myProvider) {
$scope.greetingFromFactory = myFactory.greeting;
$scope.greetingFromService = myService.greeting;
$scope.greetingFromProvider = myProvider.greeting;
}]);
对应的 HTML 视图为:
<body ng-controller="TestController">
<p>greeting from factory: </p>
<p>greeting from service: </p>
<p>greeting from provider: </p>
</body>
provider 可以在应用启动时进行配置
provider 的特殊之处就是可以在 module 启动时进行配置, 从而达到特殊的用途, 比如在上面的 provider 中可以添加一个 setName
方法, 可以在启动时调用这个方法, 进行一些额外的初始化工作:
app.provider('MyProvider', function() {
// default name is 'anonymous';
var defaultName = 'anonymous';
var name = defaultName;
// setName can be called duaring module init
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
var result = {};
result.greeting = 'Hello from provider';
result.name = name;
result.defaultName = defaultName;
return result;
}
})
添加了 setName
方法之后, 可以 module 启动时来调用这个方法, 实现对 provider 的配置
app.config(function(MyProviderProvider) {
MyProviderProvider.setName('Angularjs Provider');
});
在 controller 中添加显示 provider 的这些信息:
app.controller('TestController', ['$scope', 'MyFactory', 'MyService', 'MyProvider', function($scope, myFactory, myService, myProvider) {
$scope.greetingFromFactory = myFactory.greeting;
$scope.greetingFromService = myService.greeting;
$scope.greetingFromProvider = myProvider.greeting;
$scope.defaultName = myProvider.defaultName;
$scope.name = myProvider.name
}]);
对应的 HTML 视图也调整一下
<body ng-controller="TestController">
<p>greeting from factory: </p>
<p>greeting from service: </p>
<p>greeting from provider: </p>
<p>defaultName: , config to: </p>
</body>
最后程序运行截图如下:
- 机器学习VS放射科医生
- python学习手册-环境安装和配置
- 全球最大家谱网站Ancestry.com意外泄露了30万名用户的登录凭证
- 摸金Redis漏洞
- 机器人越来越像人,你会担心你的工作被人工智能取代吗?
- 一句代码实现批量数据绑定[上篇]
- 机器学习-从高频号码中预测出快递送餐与广告骚扰
- MS Windows 下基于Atom的LaTeX编译环境的配置
- WCF中的Binding模型之一: Binding模型简介
- WCF中的Binding模型之一: Binding模型简介
- 2017最火的五篇深度学习论文 总有一篇适合你
- SplashScreenSource的妙用
- SplashScreenSource的妙用
- SplashScreenSource的妙用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 精选25道Mysql面试题,快来测测你的数据库水平吧
- Flask基础入门学习笔记-1
- WSL 下优雅地 Coding
- Python3补充知识点
- WSL 下搭建前端开发环境
- 编译安装 SeasLog 扩展
- Python3笔试实际操作基础1.md
- Python3入门学习四.md
- 通用封装函数——四则运算
- 打造自己最喜爱的 Windows10 —— 系统与软件配置优化篇
- 编译安装 IgBinary 扩展
- Python3入门学习二.md
- 编译安装 Yaml 扩展
- 一行代码不用写,就可以训练、测试、使用模型,这个star量1.5k的项目帮你做到
- 打造自己最喜爱的 Windows10 —— 纯命令安装系统篇