一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层。

1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层越轻薄越好,业务逻辑和持久化数据应该放在Service层。

2.针对内存性能的考虑,controller会在需要的时候才初始化,不需要的话,就会被放弃。所以AngularJS会在刷新页面的时候,清空controller. 而永久保存的数据放在Service层,那么在不同的controller之间可以被调用。

二.AngularJS 提供了三种方法创建并注册自己的Service.

1). Factory

2). Service

3). Provider

三.对Factory,Service,Provider的详解

1).Factory 相当于创建对象,在对象里添加属性和方法,返回这个对象,然后在controller里便可直接用service对象的属性啦

例如:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
<div data-ng-controller="demoController">
title:<span data-ng-bind="title"></span>
</div>
</body>
</html> (function () {
angular.module('demoApp', []);
angular.module('demoApp').controller("demoController", function ($scope,demoFactory) {
$scope.title = demoFactory.getTitle();
});
angular.module('demoApp').factory("demoFactory", function () {
var _title = "ruby's test";
var service = {};
service.getTitle = function () {
return _title;
}
return service;
})
})();

 2).Service 相当于是用new关键字来实例化的Service对象(相当于创建了一个构造器),因此只需要给this添加属性,然后由service返回this. 在controller层通过该service获得这个属性。

angular.module('demoApp').controller("demoController", function ($scope,demoService) {
$scope.title = demoService.getTitle();
});
angular.module('demoApp').service('demoService', function () {
var _title = "Ruby Test service";
this.getTitle = function () {
return _title;
}
});

3).Provider 是唯一一个能传到应用程序.config的服务。所以当想要在controller之前启用,先进行模块范围的配置(对provider的一部分属性值进行配置),就用provider

  如果想要在controller控制器里直接调用provider的属性和方法 要放到$get里

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
<div data-ng-controller="demoController">
title:<span data-ng-bind="title"></span>
<br/>
thingFromConfig:<span data-ng-bind="thingFromConfig"></span>
</div>
</body>
</html> angular.module('demoApp', []);
angular.module('demoApp').controller("demoController", function ($scope,demoProvider) {
demoProvider.setTitle("provider service test");
$scope.title = demoProvider.getTitle();
$scope.thingFromConfig = demoProvider.thingOnConfig;
});
angular.module('demoApp').provider('demoProvider', function () {
var _title = "";
this.thingFromConfig = "";
this.$get = function () {
return {
setTitle: function (t) {
_title = t;
},
getTitle: function () {
return _title;
},
thingOnConfig: this.thingFromConfig
}
}
});
angular.module('demoApp').config(function (demoProviderProvider) {
demoProviderProvider.thingFromConfig = "Hello, this is a thing from configuration.";
});

四.深入解析 AngularJs的service

首先了解一下$provide

AngularJs有个叫$provide的服务,这个服务可以创建供应商,我们的service都是通过供应商来定义的。

有六个个创建供应商的方法:

1.Factory

2.Service

3.Constant

4.value

5.provider

6.decorator(装饰器)

AngularJS 讲解五, Factory ,Service , Provider的更多相关文章

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

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

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

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

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

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

  4. AngularJS Factory Service Provider

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

  5. angula的factory service provider

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

  6. Angular之Providers (Value, Factory, Service and Constant )

    官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...

  7. Angular1.x 之Providers (Value, Factory, Service and Constant )

    官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...

  8. AngularJs:Service、Factory、Provider依赖注入使用与区别

           本教程使用AngularJS版本:1.5.3        AngularJs GitHub: https://github.com/angular/angular.js/       ...

  9. 转载:[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)

    来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provide ...

随机推荐

  1. Android NDK 下的宽字符编码转换及icu库的使用(转)

    原贴http://topic.csdn.net/u/20101022/16/1b2e0cec-b9d2-42ea-8d9c-4f1bb8320a54.html?r=70149216 ,看过并动手实现, ...

  2. Naive Bayes在mapreduce上的实现(转)

    Naive Bayes在mapreduce上的实现 原文地址 http://www.cnblogs.com/sunrye/p/4553732.html Naive Bayes是比较常用的分类器,因为思 ...

  3. 最完整的自动化测试流程:Python编写执行测试用例及定时自动发送最新测试报告邮件

    今天笔者就要归纳总结下一整套测试流程,从无到有,实现零突破,包括如何编写测试用例,定时执行测试用例,查找最新生成的测试报告文件,自动发送最新测试报告邮件,一整套完整的测试流程.以后各位只要着重如何编写 ...

  4. Quartz总结(四):动态修改定时器二

    前文:http://www.cnblogs.com/LiuChunfu/p/5598806.html 提到了一种动态修改定时器的方法, 其本质就是在job方法中注入Schedular的对象,从Sche ...

  5. Ant自动构建

    Ant+jenkins+tomcat <project name="buildWar" default="clean"> <property ...

  6. ural1628 White Streaks

    White Streaks Time limit: 1.0 secondMemory limit: 64 MB The life of every unlucky person has not onl ...

  7. PAT (Advanced Level) 1023. Have Fun with Numbers (20)

    手动模拟一下高精度加法. #include<iostream> #include<cstring> #include<cmath> #include<algo ...

  8. php 设计模式系列(一)

    参考文章:http://duchengjiu.iteye.com/blog/2227452 多态代码 // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什 ...

  9. ubuntu上安装vsftp-使用java进行匿名链接

    检查环境: 1. 检查是否装过了ftp服务器 如果没有提示内容折,本机没有安装. root@hadoops:~# rpm -qa|grep vsftpdroot@hadoops:~# rpm -qa| ...

  10. Mysql 常用引擎的特点及选择使用策略

    Mysql 常用引擎的特点及选择使用策略 Mysql数据库常用存储引擎 Mysql数据库是一款开源的数据库,支持多种存储引擎的选择,比如目前最常用的存储引擎有:MyISAM,InnoDB,Memory ...