Angular的服务之自定义服务

最新推荐文章于 2020-06-11 10:25:30 发布

请叫我龙仔c

最新推荐文章于 2020-06-11 10:25:30 发布

阅读量394

点赞数 1

分类专栏： AngularJS

本文链接：https://blog.csdn.net/Jnlong_vae/article/details/71022858

版权

AngularJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自定义服务

大家好，今天和大家小谈一下Angular的服务之自定义服务

我们知道，AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。其中“MVC”中的V是View视图，是专门用于数据的展示和提取，而Controller控制器主要用于数据的挂载，在这里问题来了，数据是从哪里来的呢？所以这和我们今天小谈的自定义服务有关了！

自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中！

在Angular的服务中，主要从以下两方面来讲

1、内置服务（$http服务等等，这个我们暂时放过，哈哈，见谅见谅^-^）

2、自定义服务

Angular中自定义服务的实现方式有三种

>factory工厂模式的实现：作用就是返回一个有属性有方法的对象，这种实现方式以其简洁的使用特色而流行于自定义服务行列中。在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据，极大地满足我们项目的需要，所以比较常用，根据项目组规范进行确定是否使用！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    factory:<div ng-bind="value1"></div>
</div>
<script>
    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>
</body>

其运行结果为

factory:

factory value

> service对象方式：service方式同factory方式一样也流行于自定义服务行列，而service方式只能返回对象，在某些项目中，为了规范服务返回的数据，也就是强制指定。service服务必须返回对象数据，才能正常解析，避免出现大量的各种格式的数据：由于返回的数据标准化而流行！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    service:<div ng-bind="value2"></div>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", "service2",
        function($scope,s2) {
            $scope.value2 = s2.v;// s2 {v:_v}, s2.v:_v
    }]);
    app.service("service2", function() {
        // 从后端获取数据：模拟
        var _v = "service value";
        // 返回JSON对象
        return {v:_v};
    });
</script>
</body>

其运行结果为

service:

service value

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    provider:<div ng-bind="value3"></div>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope","service3",
        function($scope,s3) {
            $scope.value3 = s3;
    }]);
    app.provider("service3", function() {

        this.$get =function() {
            return "provider value";
        }
    });
</script>
</body>

其运行结果为：

provider:

provider value

请叫我龙仔c

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular的服务之自定义服务

自定义服务大家好，今天和大家小谈一下Angular的服务之自定义服务我们知道，AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。其中“MVC”中的V是View视图，是专门用于数据的展示和提取，而Controller控制器主要用于数据的挂载，在这里问题来了，数据是从哪里来的呢？所
复制链接

扫一扫