一. 首先说一下，为什么要引入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. 【转】在 2016 年做 PHP 开发是一种什么样的体验？（一）

    原文: https://www.v2ex.com/t/312651 在 2016 年做 PHP 开发是一种什么样的体验?(一) 嘿,我最近接到一个网站开发的项目,不过老实说,我这两年没怎么接触编程,听 ...

  2. HDU 2846 Repository（字典树）

    字典树较为复杂的应用,我们在建立字典树的过程中需要把所有的前缀都加进去,还需要加一个id,判断它原先是属于哪个串的.有人说是AC自动机的简化,但是AC自动机我还没有做过. #include<io ...

  3. 转：Selenium的延迟等待

    Selenium的延迟等待分为 显式等待(Explicit Wait) & 隐式等待(Implicit Wait). 1.显式等待 显式等待,就是明确的要等到某个元素的出现或者是某个元素的可点 ...

  4. wex5 实战 微信6位数字密码输入设计

    微信支付使用是6位数字输入,用wex5能不能制作这种效果呢? 答案是肯定的. 根据网上提供的数字插件,研究源码后,与wex5进行整后修改,便于利用wex5框架优势. 一 效果演示: 弹出密码框 输入 ...

  5. 用JAVA捕获屏幕、屏幕录像、播放

    http://blog.csdn.net/njchenyi/article/details/447554 用JAVA捕获屏幕.屏幕录像.播放 标签: javaexceptionimageimportn ...

  6. 配置 php-fpm 监听的socket

    一般现在我们配置的PHP的web环境,如LNMP(linux+Nginx+Mysql+PHP), 这里linux可能是centos, ubuntu..., 数据库可能是mysql, postgresq ...

  7. UWSGITOP-----监控uwsgi 性能

    启动 uwsgi -x etc/bfdds_cookiemapping_conf.xml --stats /tmp/stats.socket 查看 uwsgitop /tmp/stats.socket ...

  8. [转] Eclipse 使用 Link 方式进行插件的安装

    下方来自 http://www.iteye.com/topic/1113353 Eclipse 的插件安装方法一般有以下几种(以安装 SVN 插件为例说明,Eclipse 版本为:3.7/Indigo ...

  9. Quick Cocos2dx 调试问题

    最近由于忙了一段时间,忙完了之后又迷茫了这么久,然后终于开始继续Quick-x的学习之路了. 然后遇到了一个比较棘手的问题. 虽然照着官方mvc的例子敲代码,但是还是不停的报错,报错的问题下次集结成一 ...

  10. Linux挂在ntfs格式的U盘

    工作中遇到linux系统 Red Hat Enterprise5.7 挂载希捷ntfs格式移动硬盘,会跳出一个ERROR提示框:The volume ‘EAGET-NQH’user the ntfs ...