AngularJS 中的 factory、 service 和 provider区别,简单易懂
转自:http://blog.csdn.net/ywl570717586/article/details/51306176
初学 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: {{greetingFromFactory}} </p>
- <p>greeting from service: {{greetingFromService}} </p>
- <p>greeting from provider: {{greetingFromProvider}} </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: {{greetingFromFactory}} </p>
- <p>greeting from service: {{greetingFromService}}</p>
- <p>greeting from provider: {{greetingFromProvider}} </p>
- <p>defaultName: {{defaultName}}, config to: {{name}} </p>
- </body>
最后程序运行截图如下:
AngularJS 中的 factory、 service 和 provider区别,简单易懂的更多相关文章
- AngularJS 讲解五, Factory ,Service , Provider
一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...
- angularjs中factory, service和provider
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了(因为service的底 ...
- 简介AngularJS中使用factory和service的方法
AngularJS支持使用服务的体系结构“关注点分离”的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们即维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服 ...
- 我也谈“the difference between Factory, Service, and Provider in Angular”
看完这篇文章之后的理解与实践:原文地址:http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ <!doctype ...
- CommonJS, AMD, CMD是什么及区别--简单易懂有实例
CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...
- AngularJS 之 Factory vs Service vs Provider【转】
英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一 ...
- AngularJS之Factory vs Service vs Provider
原文 http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scop ...
- [转载]AngularJS之Factory vs Service vs Provider
http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider http://tylermcginnis.com/a ...
随机推荐
- 如何合并列表中key相同的字典?
现有list: list1 = [{a: 123}, {a: 456},{b: 789}] 合并成: list2 = [{a: [123,456]},{b: [789]}] from collecti ...
- L2-012 关于堆的判断 (25 分)
就是一个最小根堆. 最小根堆的性质,根节点小于等于子树的完全二叉树吧. 构建最小根堆的过程就是一个自下向上的过程. #include<iostream> #include<strin ...
- 004_centos安装pip的几种方式及pip源
一. (1) yum -y install epel-release yum install python-pip pip install --upgrade pip (2) python脚本的一键安 ...
- torch.nn.functional中softmax的作用及其参数说明
参考:https://pytorch-cn.readthedocs.io/zh/latest/package_references/functional/#_1 class torch.nn.Soft ...
- wxWidgets 在 Linux 下开发环境配置
本文基于 CodeBlocks (16.0.1) 和 wxWidgets (3.0.2) 搭建 Linux 下 GUI 开发环境. 1. 安装 CodeBlocks Ubuntu 默认的源当前 Cod ...
- PAT A1052 Linked List Sorting (25 分)——链表,排序
A linked list consists of a series of structures, which are not necessarily adjacent in memory. We a ...
- 使用sql语句比较excel中数据的不同
使用sql语句比较excel中数据的不同 我所在的项目组是一套物流系统,负责与公司的电商系统进行对接.但是公司的电商系统的省市区的配置和物流系统的省市区的配置有差异,所以需要找到这些差异. 首先找到我 ...
- SQL开发规范
一.SQL代码规范: 1.头部 --************************************************************************** --所属主题: ...
- sklearn 数据预处理1: StandardScaler
作用:去均值和方差归一化.且是针对每一个特征维度来做的,而不是针对样本. [注:] 并不是所有的标准化都能给estimator带来好处. “Standardization of a dataset i ...
- JFrame2
package com.fxb.gui; import java.awt.FlowLayout; import java.awt.GridLayout; import java.awt.TextFie ...