了解angular js

factory
可以认为是设计模式中的工厂方法，就是你提供一个方法，该方法返回一个对象的实例；
对于angularJs的factory，就是先定义一个对象，给这个对象添加属性和方法，然后返回这个对象。
例如：
var app = angular.module("MyApp",[]);
app.factory("MyFactory",function(){
var result = {};
result.greeting = "Hello from factory";
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
三者使用起来是一样的，都是通过AngularJs的依赖注入使用，比如：
app.controller("TestController",['$scope','MyFactory','MyService','MyProvider',function($scope,MyFactory,MyService,MyProvider){
$scope.greetingFromFactory = MyFactory.greeting;
$scope.greetingFromService = MyService.greeting;
$scope.greetingFromProvider = MyProvider.greeting;
}]);
对应的视图为：
<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
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>
运行结果：
greeting form factory:hello from factroy
greeting form service:hello from service
greeting form provider:hello from provider
defaultName:anonymous,config to:Angularjs Provider

angularJs 解析factory、service、provider的更多相关文章

  1. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  2. AngularJS 讲解五, Factory ,Service , Provider

    一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...

  3. angularjs factory,service,provider 自定义服务的不同

    angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...

  4. [译]AngularJS中几种Providers(Factory, Service, Provider)的区别

    原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...

  5. angularjs中factory, service和provider

    在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了(因为service的底 ...

  6. AngularJS Factory Service Provider

    先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...

  7. angula的factory service provider

    本人学了一段时间的angular的服务(factory.service.provider),有了自己的一些对于他们的见解,如果说的对,敬请赐教!!! 以后更新

  8. AngularJS 之 Factory vs Service vs Provider【转】

    英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一 ...

  9. AngularJS之Factory vs Service vs Provider

    原文  http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scop ...

随机推荐

  1. linux内核对块设备的使用

    1 partition table 这里的分析以经典的MBR为例. 在MBR里面有partition table,每一项对应一个逻辑的块设备,partion table中的每一项是16个字节. 第一个 ...

  2. Python Tricks（十九）—— switch 的实现

    python 原生语法不支持 switch,体现了 Python 大道至简的设计思路,有时为了避免啰嗦的 if elif等判断语句,我们可以用字典来代替 switch 的各分支,也即建立表达式和操作的 ...

  3. tyvj 1013 找啊找啊找GF

    题目大意: 有一个背包,里面的东西需要满足两个条件,不只是体积 求最多能装多少东西,这些东西的东西最小价值 思路: 双重背包 开两个数组,记录装的东西数量和价值 #include<iostrea ...

  4. ios下使用overflow scroll情况下，到达最极端的情况时会拖动整个页面的解决办法

    今天开发ipad webapp时,遇到个问题就是在支持内部滚动(overflow:scroll)的页面中,在滚到到最极端(最上或者最下时),会拖动整个页面,带来不好的用户体验. 方法一,从网上找到的: ...

  5. 30. extjs getEl方法 怎么用

    转自:https://blog.csdn.net/evilcry2012/article/details/50586861 2014-10-27 11:57 提问者采纳   getEl = compo ...

  6. bzoj 1660: [Usaco2006 Nov]Bad Hair Day 乱发节【单调栈】

    开一个单调递减的单调栈,然后用sum数组维护每个点的答案,新加点的时候一边退栈一边把退掉的点的sum加进来 #include<iostream> #include<cstdio> ...

  7. Java调用ssl异常（javax.net.ssl.SSLHandshakeException: No appropriate protocol）

    今天做升级用了jdk1.8发现java调用SSL的时候,突然一下抛出一个异常 经过一阵瞎搞,最后才发现是因为jdk1.8版本导致SSL调用权限上有问题. 解决办法:找到jdk 1.8安装目录,找到C: ...

  8. 【题解】自行车比赛 [AHOI2016] [P2777]

    [题解]自行车比赛 \([AHOI2016]\) \([P2777]\) 逼自己每天一道模拟题 传送门:自行车比赛 \([AHOI2016]\) \([P2777]\) [题目描述] 比赛中一共有 \ ...

  9. [NOIP2004]火星人

    Description 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法.这种交流方法是这样的,首先,火星人把一个非常大的数 ...

  10. 【转载】Hadoop分布式文件系统HDFS的工作原理详述

    转载请注明来自36大数据(36dsj.com):36大数据 » Hadoop分布式文件系统HDFS的工作原理详述 转注:读了这篇文章以后,觉得内容比较易懂,所以分享过来支持一下. Hadoop分布式文 ...