Angular自定义服务

自定义服务

先来看一个小图

这是讲面向对象讲的，也可以运用到自定义服务中。

表要急~面向对象会单独写出来~

AngularJS自定义服务：

在AngularJS中服务是一个函数或对象。即从后端接口获取数据，然后将数据挂载到控制器中。
在AngularJS应用中：自定义服务是在控制器（controller）与数据模型（model）之间使用的。

AngularJS自定义服务有以下三种：

1.factory():工厂模式实现
2.service():对象方式
3.provider():代理方式

下面来详细说明一下：

1.factory():

工厂模式实现：比较常见，根据项目规范进行确定是否使用。以其简洁的使用特色而流行于自定义服务行列。

案例：

<!--html代码-->  
<div ng-controller="myCtrl">  
     factory:<div ng-bind="value1"></div>  
</div> 

<script>  
//js代码  
   var app = angular.module("myApp", []);  
    app.controller("myCtrl", ["$scope","service1",   
        function($scope, s1,) {  
            $scope.value1 = s1;// 从自定义服务中获取数据  
             
    }]);  
     app.factory("service1", function() {  
        // 从后端获取数据:模拟  
        var _v = "factory value";  
        // 返回数据，返回的数据可以是字符串，可以是复杂对象  
        return _v;  
    });  
</script>  

在页面中显示的效果为：

factory:

factory value

2.service():

对象方式：比较常用，根据项目组规范进行确定是否使用。以其规范的返回数据而流行与自定义服务行列。

案例：

<!--html代码-->
service:<div ng-bind="value2"></div>  

<script>  
//js代码  
 var app = angular.module("myApp", []);  
    app.controller("myCtrl", ["$scope","service2",   
        function($scope, s2,) {  
            $scope.value1 = s2.v;// 从自定义服务中获取数据  
             
    }]); app.service("service2", function() { var _v = "service value"; return {v:_v}; }</script>  

页面效果：

service:

service value

3.provider():

provider代理方式：Angular框架中的使用方式，常规项目开发很少使用，以函数的形式返回数据。

案例：

<!--html代码-->  
provider:<div ng-bind="value3"></div>  

 var app = angular.module("myApp", []);  
    app.controller("myCtrl", ["$scope","service3",   
        function($scope, s3,) {  
            $scope.value1 = s3;// 从自定义服务中获取数据  
             
    }]);  app.provider("service3", function() {<br>  
<br>  
        this.$get =function() {<br>  
            return "provider value";<br>  
        } 
    });  

页面效果：

provider：

provider value

provider():要求处理的过程中必须通过this.$get()函数进行返回数据的处理，这种方式在Angular自己的内置服务和框架中使用较多，但是不推荐在项目开发中使用。因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度。

自定义服务有这三种，总结出来分享给大家，楼主就不啰嗦了，好好看看