AngularJS自定义服务

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>

在页面中显示的效果为：



在上述代码中在返回的数据可以返回字面量、数组、对象、复杂对象等等各种数据， 极大的满足了我们项目的需要

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()：只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定，避免出现大量的各种数据。

3.provider():

以函数的形式返回数据。

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

<script>
//js代码

var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope","service3",
function($scope, s3,) {
$scope.value1 = s3;// 从自定义服务中获取数据

}]);

 app.provider("service3", function() {

        this.$get =function() {

            return "provider value";

        }

    });

</script>

页面效果：




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

对AngularJS自定义服务的简单的了解和总结，希望能够对大家有所帮助。。