angularJS中service、factory、provider使用和区别

前言

大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴。
dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的。
service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以供不同的controller高用。
controller层:即控制层,在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑,尽量写在service层里。

当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到,controller 这一层应该很薄;也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里。我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据。这就不是 controller 该干的事。出于内存性能的考虑,controller 只在需要的时候才会初始化,一旦不需要就会被抛弃。因此,每次当你切换或刷新页面的时候,Angular 会清空当前的 controller。与此同时,service 可以用来永久保存应用的数据,并且这些数据可以在不同的 controller 之间使用。

service只实例化一次,其实就是单例模式的思想。无论我们在什么地方注入我们的service,将永远使用同一个实例。所以对很多在controller层中的操作就可以放到serivce层中去。AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等。每个服务负责例如一个特定的任务,$http 是用来创建AJAX调用,以获得服务器的数据。 $route 用来定义路由信息等。内置的服务总是前缀$符号。

angular 三种Service

Angular 提供了3种方法来创建并注册我们自己的 service。

Factory

Service

Provider

Factory

用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

module.exports = angular.module('myApp')
  .factory('myFactory', require('./my-factory'))
  .controller('myCtrl', require('./my-controller'))

//my-factory.js
module.exports = function myFactory(){
        var service = {};//定义一个Object对象'
        service.name = "张三";
        var age;//定义一个私有化的变量
        //对私有属性写getter和setter方法
        service.setAge = function(newAge){
            age = newAge;
        }
        service.getAge = function(){
            return age;
        }
        return service;//返回这个Object对象
    }
//my-controller.js
module.exports = function myCtrl(
$scope
, myFactory
){
	myFactory.setAge(20);
    $scope.r =myFactory.getAge();
    alert(myFactory.name);
}

Service

是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把 service 传进 controller 之后,在controller里 “this” 上的属性就可以通过 service 来使用了。

    var app = angular.module('myApp', []);

    app.service('myService', function($http,$q) {
        this.name = "service";
        this.myFunc = function (x) {
            return x.toString(16);//转16进制
        }
        this.getData = function(){
            var d = $q.defer();
            $http.get("ursl")//读取数据的函数。
                .success(function(response) {
                d.resolve(response);
            })
                .error(function(){
                alert(0)
                d.reject("error");
            });
            return d.promise;
        }
    });
    app.controller('myCtrl', function($scope, myService) {
        $scope.r = myService.myFunc(255);
        myService.getData().then(function(data){
            console.log(data);//正确时走这儿
        },function(data){
            alert(data)//错误时走这儿
        });
    });

Provider

只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前,先进行模块范围的配置,那就应该选择 provider。需要注意的是:在config函数里注入provider时,名字应该是:providerName+Provider.
使用Provider的优点就是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
当你使用Provider创建一个service时,唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

    var app = angular.module('myApp', []);

    //需要注意的是:在注入provider时,名字应该是:providerName+Provider   
    app.config(function(myProviderProvider){
        myProviderProvider.setName("大圣");       
    });
    app.provider('myProvider', function() {
        var name="";
        var test={"a":1,"b":2};
        //注意的是,setter方法必须是(set+变量首字母大写)格式
        this.setName = function(newName){
            name = newName  
        }

        this.$get =function($http,$q){
            return {
                getData : function(){
                    var d = $q.defer();
                    $http.get("url")//读取数据的函数。
                        .success(function(response) {
                            d.resolve(response);
                        })
                        .error(function(){
                            d.reject("error");
                        });
                    return d.promise;
                },
                "lastName":name,
                "test":test
            }   
        }

    });
    app.controller('myCtrl', function($scope,myProvider) {
        alert(myProvider.lastName);
        alert(myProvider.test.a)
        myProvider.getData().then(function(data){
            //alert(data)
        },function(data){
            //alert(data)
        });
    });

什么时候使用provider:

当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如,我们需要配置services在不同的部署环境里面(开发,演示,生产)使用不同的后端处(2)理的时候就可以使用到了

当我们打算发布开源provider()也是首选创建service的方法,这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。

总结

Service、Factory、Provider三者区别

  1. 用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

  2. Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把 service 传进 controller 之后,在controller里 “this” 上的属性就可以通过 service 来使用了。

  3. Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider。

4)Factory/service是第一个注入时才实例化,而provider不是,它是在config之前就已实例 化好

致谢

AngularJS 之 Factory vs Service vs Provider
angularJS中service、factory、provider使用和区别
深究AngularJS——自定义服务详解(factory、service、provider)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值