angular五种服务详解-唐朝资源网

在本学习笔记(十五)-)中的”之前，已经大致解释了ng中的”，之后很多地方也用到了，但是所有的都是使用创建的应用程序。但其实创建服务有5种方式，本文将详细讲解ng中的五种服务。

首先，为了给栗子，写如下模型，控制器，html：

html:

<!DOCTYPE html>
<html ng-app="serviceApp">
<head>
  <title>服务</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>

</head>
<body >
  <div ng-controller="myCtrl">
    name:{{name}}
    <br/>
    age:{{age}}
    <br/>
    love:{{love}}
    <br/>
    money:{{money}}
    <br/>
    id:{{id}}
  </div>
  <hr/>
  <div ng-controller="myOtherCtrl">
    name:{{name}}
    <br/>
    love:{{love}}
    <br/>
  </div>
  <hr/>
</body>
</html>

js：

var serviceApp = angular.module('serviceApp',[]);
serviceApp.controller('myCtrl',function($scope,myConfig){
    $scope.name = myConfig.name;
    $scope.love = myConfig.love;
    $scope.age = myConfig.age;
    $scope.money = myConfig.money;
    $scope.id = myConfig.getId();
    $scope.$watch(myConfig.love,function(){$scope.love = myConfig.love;});
})

serviceApp.controller('myOtherCtrl',function($scope,myConfig){
    $scope.name = myConfig.name;
    $scope.love = myConfig.love;
    angular.extend(myConfig,{love:'zxg'});
    $scope.$watch(myConfig.love,function(){$scope.love = myConfig.love;});
});

如上，模型中有两个控制器，并且这两个控制器都注入了这个服务。稍后我们将通过创建不同的服务来查看结果

一.服务：

应用程序。（’名称’，obj）

name 是服务的名称，obj 是一个 json 对象。

js：

图片[1]-angular五种服务详解-唐朝资源网

serviceApp.constant('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

运行结果：

阐明：

创建服务返回一个json对象（也就是第二个参数传入的对象），这个对象可以有参数和方法，属性和方法都可以在控制器中修改和添加，但是要按照它的设计意图一般创建的服务不会修改其内容。如果内容需要修改，最好用价值创造服务。

当心：

1.是一个引用对象，不管注入多少个控制器，其实都是指向同一个对象，所以不管修改哪一个，其他的所有服务都会改变。

2.服务修改后，ng不会自动同步。简而言之，它不会通过两种方式自动绑定数据。比如这里给服务添加love属性：.(,{love:’zxg ‘})，我需要使用$scope.$watch(.love,(){$scope.love = .love ;}) 将 love 属性的值同步到视图。

3.服务不能被装饰，（什么是装饰会在下面讨论）

二.价值服务：

app.value(‘名称’,obj)

name 是服务的名称，obj 是一个 json 对象。

js：

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

serviceApp.config(function($provide){
    $provide.decorator('myConfig',function($delegate){
        $delegate.money = '100w';
        return $delegate
    })
});

运行结果：

阐明：

值创建服务返回一个json对象（即第二个参数传入的对象），这个对象可以有参数和方法，并且属性和方法都可以在控制器中修改，新增，根据它的设计意图的，如果需要修改属性和方法，使用 value 来创建服务。

而value主要是用来存储一些数据或者使用的方法，不同的是一般存储的是固定的内容，value存储的是可能被修改的内容

当心：

1.同注1

2.同注2

3.value是可以修饰的，所以这里的服务有money属性。（如何使用装饰将在下面描述）

三.服务

app.(‘name’,(){ obj})

name 是服务的名称，第二个参数传递给一个函数。该函数需要有一个返回值obj，它返回一个对象。实际注入的服务就是这个对象。

js：

serviceApp.factory('myConfig',function(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    return {
        name: myname,
        age: age,
        getId: function(){
            return id
        }
    }

});

或这个：

serviceApp.factory('myConfig',function(){
    return new constructorFun()
});
function constructorFun(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;
    this.getId = function(){
        return id
    }
}

装饰件代号：

serviceApp.config(function($provide){
    $provide.decorator('myConfig',function($delegate){
        console.log($delegate);
        $delegate.money = '100w';
        return $delegate
    })
});

运行结果：

阐明：

服务是最常见、最常用的服务类型，几乎可以满足90%的自我开发需求。使用它，你可以编写一些逻辑，最后通过这个逻辑返回需要的对象。例如，使用 $http 获取一些数据。我们在创建的服务中抓取数据并最终返回。

它和value最大的区别是服务有一个处理过程，经过这个过程，返回结果。

当心：

1.同注1

2.同注2

3.返回的服务也可以修饰，所以这里的服务有money属性。（如何使用装饰将在下面描述）

四.服务

应用程序。（’名称’，）

name 是服务的名称，是一个构造函数。

js：

serviceApp.service('myConfig',function(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;
    this.getId = function(){
        return id
    }
});

或这个：

serviceApp.service('myConfig',constructorFun);
function constructorFun(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;

    this.getId = function(){
        return id
    }
}

装饰部分的代码同上。

运行结果：

阐明：

和的区别在于传入的第二个参数是构造函数，最终注入的服务是这个构造函数实例化的结果。所以基本上那些使用创建服务的人也可以使用它创建。

所以这里，第二种写法和使用服务是一致的：

serviceApp.factory('myConfig',function(){
    return new constructorFun()
});
//等价于
serviceApp.service('myConfig',constructorFun);

当心：

1.同注1

2.同注2

3.返回的服务也可以修饰，所以这里的服务有money属性。（如何使用装饰将在下面描述）

五.服务

app.provider('name',function(){
　　....
　　return {
　　　　...
　　　　$get:function(){
　　　　　　...
　　　　　　return obj
　　　　}
     }
})

name 是服务的名称，第二个参数接受一个函数，函数返回一个对象。比如返回的对象必须有一个$get方法，而$get方法必须返回一个对象obj，这才是真正的注入服务。

栗子一：

js：

serviceApp.provider('myConfig',function(){
   return {
       $get:function(){
           var myname = 'code_bunny';
           var age = 12;
           var id = 1;
           return {
               name: myname,
               age: age,
               getId: function(){
                   return id
               }
           }
       }
   }
});

装饰部分的代码同上。

运行结果：

阐明：

服务的第二个参数的返回值必须有$get方法（除了$get，还可以有其他方法，后面的例子会讲到），$get方法相当于的第二个参数服务，最后返回一个实际注入服务的对象：

栗子二：

js：

serviceApp.provider('myConfig',function(){

    var id = 1;
    return {
        setID:function(newID){
            id = newID
        },
        $get:function(){
            var myname = 'code_bunny';
            var age = 12;
            return {
                name: myname,
                age: age,
                getId: function(){
                    return id
                }
            }
        }
    }
});
serviceApp.config(function(myConfigProvider){
    myConfigProvider.setID(2)
});

装饰部分的代码同上。

运行结果：

阐明：

这里的服务不仅返回$get方法，还返回setID方法，然后将id变量写入函数中，在返回值之外，形成一个可以修改的闭包。

然后，可以在函数中调用服务中定义的方法。注意调用的格式：

serviceApp.config(function(myConfigProvider){
    myConfigProvider.setID(2)
});

不是调用注入的服务名，而是函数中可以调用的setID方法（即setID方法）。

这样我们的服务就可以手动配置了，比如这里可以配置id。

ng有很多内置的服务都有这样的功能，比如$route服务、$，当我们通过$和$来配置它们的时候，本质就是这些服务是通过创建的。

当心：

1.同注1

2.同注2

3.返回的服务也可以修饰，所以这里的服务有money属性。（如何使用装饰将在下面描述）；

六.装修服务

其实通过上面这么多例子，你就可以看出什么是装饰……

app.config(function($provide){
    $provide.decorator('name',function($delegate){  
        $delegate.money = '100w';   
        return $delegate
    })
});

同样通过将$注入到参数函数中，$有一个接受两个参数的方法，第一个参数’name’是要修饰的服务的名称，第二个参数是一个函数，$被注入函数，$是被装饰服务的实例，然后在函数中操作$就相当于操作服务的实例。

注意：

1.最后必须是$，这样服务才被修饰。

2.服务不能被修饰。

先不说栗子了，以上都是~

总结以上内容：

1.服务的实例注入控制器后，是一个引用对象，不管注入多少个控制器，其实都是指向同一个对象，所以不管修改哪一个，都是其他服务将被更改。

2.服务的实例修改后，ng不会自动同步，需要使用$scope.$watch()来监控它的变化并手动刷新视图。

3.服务不能被 .

4.一些固定的参数和方法，使用

图片[5]-angular五种服务详解-唐朝资源网

5. 可以修改的参数和方法，使用值

6.逻辑处理后得到的参数或方法，使用

7.能用的也能用，反之亦然（常用）

8.可以手动配置参数的服务，使用

七.可以创建不同实例的服务

前面我们说过，所有的服务实例都是引用对象，不管注入多少个控制器，其实都是指向同一个对象，所以不管修改哪一个，其他的所有服务都会改变。这是ng服务的设计模式一般不需要改变，但是如果有特殊需要，每次注入控制器后能够得到一个新的实例，可以这样做：

我们给服务添加了一个方法，每次执行这个方法都会创建一个新的实例，这样虽然服务实例是注入到控制器还是同一个，但是在调用创建实例的方法时，将创建一个新实例。新建实例，那么你可以单独修改这个实例而不影响其他控制器：如下

js：

var serviceApp = angular.module('serviceApp',[]);
serviceApp.controller('myCtrl',function($scope,myConfig){
    var myConfigConstant = myConfig.create();
    $scope.name = myConfigConstant.name;
    $scope.age = myConfigConstant.age;
    angular.extend(myConfigConstant,{love:'zxg'});
    $scope.love = myConfigConstant.love;
    $scope.id = myConfigConstant.getId();
    $scope.$watch(myConfigConstant.name,function(){$scope.name = myConfigConstant.name;});
    myConfigConstant.name = 'white_bunny';
});
serviceApp.controller('myOtherCtrl',function($scope,myConfig){
    var myConfigConstant = myConfig.create();
    $scope.love = myConfigConstant.love;
    $scope.name = myConfigConstant.name;
    $scope.$watch(myConfigConstant.name,function(){$scope.name = myConfigConstant.name;});
});
/************************创建实例的服务************************/
serviceApp.factory('myConfig',function(){
    return {
       //服务返回的对象有一个create方法,该方法每次被执行都会返回一个新的constructorFun实例 
　　　　create: constructorFun.createNew
    }
});

//创建一个构造函数
function constructorFun(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;
    this.id = id
}

//给构造函数添加createNew方法,用于实例化一个constructorFun.
constructorFun.createNew = function(){
    return new constructorFun()
};

//给构造函数添加原型的方法.使得它的实例可以继承.
constructorFun.prototype = {
    getId: function(){
        return this.id
    }
};

运行结果：

好了~五种服务类型都写完了~~~

完整的代码托管：

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END